TryIt Editor v2.0 - jquery ajax post php

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <head>
    <title>jQuery post form data with .ajax() method by codeofaninja.com</title>
    <style>
      div {
        margin: 10px;
      }
    </style>
  </head>
  <body>
    <h1>jQuery post form data with the .ajax() method</h1>
    <div>Filling out and submitting the form below to receive a response.</div>
    
    <form id="userForm" action="/form/submit" method="post">
      <div>
        <input type="text" name="firstname" placeholder="Firstname" />
      </div>
      <div>
        <input type="text" name="lastname" placeholder="Lastname" />
      </div>
      <div>
        <input type="email" name="email" placeholder="Email" />
      </div>
      <div>
        <input type="submit" value="Submit" />
      </div>
    </form>
    
    <div id="response"></div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js "></script>
    <script>
      $(document).ready(function() {
        $('#userForm').submit(function() {
          // showing that something is loading
          $('#response').html("<b>Loading response...</b>");
          /*
           * 'post_receiver.php' - where you will be passing the form data
           * $(this).serialize() - for reading form data quickly
           * function(data){... - data includes the response from post_receiver.php
           */
          $.ajax({
              type: 'POST',
              url: 'post_receiver.php',
              data: $(this).serialize()
            })
            .done(function(data) {
              // demonstrate the response
              $('#response').html(data);
            })
            .fail(function() {
              // if posting your form failed
              alert("Posting failed.");
            });
          // to restrain from refreshing the whole page, it
          returns false;
        });
      });
    </script>
  </body>
</html>