How to Create Ajax Submit Form Using jQuery

Nowadays, Ajax forms are essential parts of the web technology. It makes possible to update parts of a web page without reloading the page and to receive information in numerous formats such as HTML, JSON or XML. Let's show you some ways of sending HTML form data using jQuery Ajax.

jQuery suggests the flexible ajax() function for submitting Ajax forms:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <form action="path/to/server/script" method="post" id="my_form">
      <label>Name</label>
      <input type="text" name="name" />
      <label>Email</label>
      <input type="email" name="email" />
      <label>Website</label>
      <input type="url" name="website" />
      <input type="submit" name="submit" value="Submit Form" />
      <div id="server-results">
        <!-- For server results -->
      </div>
    </form>
    <script>
      $("#my_form").submit(function(event) {
          event.preventDefault(); //prevent default action 
          let post_url = $(this).attr("action"); //get form action url
          let request_method = $(this).attr("method"); //get form GET/POST method
          let form_data = $(this).serialize(); //Encode form elements for submission	
          $.ajax({
              url: post_url,
              type: request_method,
              data: form_data
            }).done(function(response) { //
              $("#server-results").html(response);
            });
        });
    </script>
  </body>
</html>

However, there are some other jQuery shorthand methods that require lesser code.

jQuery post() function is a shorthand for ajax():

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <form action="path/to/server/script" method="post" id="my_form">
      <label>Name</label>
      <input type="text" name="name" />
      <label>Email</label>
      <input type="email" name="email" />
      <label>Website</label>
      <input type="url" name="website" />
      <input type="submit" name="submit" value="Submit Form" />
      <div id="server-results">
        <!-- For server results -->
      </div>
    </form>
    <script>
      $("#my_form").submit(function(event) {
          event.preventDefault(); //prevent default action 
          let post_url = $(this).attr("action"); //get form action url
          let form_data = $(this).serialize(); //Encode form elements for submission      	
          $.post(post_url, form_data, function(response) {
            $("#server-results").html(response);
          });
        });
    </script>
  </body>
</html>

jQuery get() is the same as post(), but uses HTTP GET request:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <form action="path/to/server/script" method="post" id="my_form">
      <label>Name</label>
      <input type="text" name="name" />
      <label>Email</label>
      <input type="email" name="email" />
      <label>Website</label>
      <input type="url" name="website" />
      <input type="submit" name="submit" value="Submit Form" />
      <div id="server-results">
        <!-- For server results -->
      </div>
    </form>
    <script>
      $("#my_form").submit(function(event) {
          event.preventDefault(); //prevent default action 
          let post_url = $(this).attr("action"); //get form action url
          let form_data = $(this).serialize(); //Encode form elements for submission      	
          $.get(post_url, form_data, function(response) {
            $("#server-results").html(response);
          });
        });
    </script>
  </body>
</html>

The .serialize() method serializes form inputs to the query string to send using Ajax.

To upload files to the server, you can use the FormData interface available to XMLHttpRequest2 which constructs a FormData object and send it to the server using the jQuery Ajax.

The get() and post() Methods

The jQuery get() and post() methods sends a request to the server and retrieves the data asynchronously. Both are identical methods, apart from one difference that the get() makes Ajax requests using the HTTP GET method, while the post() makes Ajax requests using the HTTP POST method. The web browser communicates with the server using either GET or POST HTTP methods. GET is used to request data from a specified resource, and POST is used to send data to the server to create or update a resource.