title: AJAX fires both success and error
body: <p>I'm not sure why the <code>error:</code> portion of my ajax request is also firing. Both the success and error sections are firing actually. I'm pretty new to JS/jQuery but I read that success fires when the ajax request was successful and error fires when there is an error. I assume success means 200 and error means 400-500?</p>
  
  <p>js:</p>
  
  <pre><code>    function create_post() {
          console.log("create post is working");
          var firstName = document.getElementById("firstname");
          var lastName = document.getElementById("lastname");
          var email = document.getElementById("email");
          var phoneNumber = document.getElementById("phonenumber");
          var message = document.getElementById("message");
          var contactInfo = {
              "first_name": firstName.value,
              "last_name": lastName.value,
              "email": email.value,
              "phone_number": phoneNumber.value,
              "message": message.value
          };
  
          $.ajax({
              url: "",
              type: "POST",
              data: contactInfo,
              success: ajaxSuccess(contactInfo),
              error: console.log("ajax fail")
  
          });
      };
  
  
      function ajaxSuccess(contactInfo) {
          console.log(contactInfo);
          // clear form data
          document.getElementById("contact-form").reset();
          // display modal
      }
  
  
  //    Contact form submit
      var contactForm = document.getElementById("contact-form");
      $(contactForm).on('submit', function(event) {
          event.preventDefault();
          console.log("form submitted");
          create_post();
      });
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/kuunQ.png" alt="enter image description here"></p>