title: Ajax to submit form, and retrieve success/error
body: <p>I'm using jQuery with Ajax to submit a form to a PHP script.</p>
  
  <p>The user will input their details, click a submit button, the PHP script will run and will have either performed the desired action or failed.</p>
  
  <p>At this point I would want to display a success or error message based on the type of error. </p>
  
  <pre><code>&lt;script&gt;
  $( "#contact-form" ).submit(function(event) {
      event.preventDefault();
      $.ajax({
          url: "includes/contact-us.php",
          type: "post",
          data: $("#contact-form").serialize(),
          success:function(data) {
           alert(data);
          },
          error:function(){
              alert("failure");
          }   
      }); 
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>So in my jQuery above, when the form is submitted, it prevents the default <code>action="path to script.php"</code> then performs the submit. I've done this in case users have Javascript disabled, so at least the base functionality will be there.</p>
  
  <p>PHP</p>
  
  <pre><code>&lt;?php                  
      if(isset($_POST['contact']) &amp;&amp; !empty($_POST['contact'])){
  
              $link = new mysqli("example", "example", "example", "example");
  
              if($link-&gt;connect_errno &gt; 0) {
                  die('Unable to connect to database [' . $link-&gt;connect_error . ']');
              }
  
              $name = $_POST['name'];
              $email = $_POST['email'];
              $website = $_POST['website'];
              $subject = $_POST['subject'];
              $message = $_POST['message'];
  
              $stmt = $link-&gt;prepare("INSERT INTO contact (name, email, website, subject, message) VALUES (?, ?, ?, ?, ?)");
              $stmt-&gt;bind_param("sssss", $name, $email, $website, $subject, $message);
  
              if($stmt-&gt;execute()){
  
                  $rtn = "Success";
  
                  echo json_encode($rtn);
  
                  } else {
  
                  $rtn = "Failed";
  
                  echo json_encode($rtn);
  
              }                              
              $stmt-&gt;close();
              $link-&gt;close();
  }
  </code></pre>
  
  <p>However, in this example, an alert box appears empty. No errors in firebug or Apache logs.</p>
  
  <p>Is it possible to: when I perform an submit using Ajax, I can recieve an <code>echo "Text from error or success box";</code> which I can then put into a bootstrap alert?</p>
  
  <p>The code I'm writing is new, so adapting to new libraries is something I would consider. This is purely for UI enhancement to show error or success messages, if the user has javascript disabled then the form default action wouldn't be prevented - they just wouldn't see a success or error message.</p>
  
  <p>Something I have seen is <a href="http://www.html5rocks.com/en/tutorials/es6/promises/" rel="nofollow noreferrer">"Javascript promises"</a> I don't mind using Javascript if this is better in terms of useability, as I don't want to freeze the browser when a submit takes place.</p>
  
  <p>Thanks for your time</p>