How to Create Ajax Submit Form Using jQuery

Nowadays, Ajax forms are essential parts of the web technology. It makes it 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 <kbd class="highlighted">ajax()</kbd> function for submitting Ajax forms:

Javascript(Jquery) ajax() function

<!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).prop("action"); //get form action url
          let request_method = $(this).prop("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);
            }).fail(function(error) {
              console.error("Request failed:", error);
            });
        });
    </script>
  </body>
</html>

Try it Yourself »

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

jQuery post() function is a shorthand for <kbd class="highlighted">ajax()</kbd>:

Javascript(Jquery) post function

<!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).prop("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);
          }).fail(function(error) {
            console.error("Request failed:", error);
          });
        });
    </script>
  </body>
</html>

Try it Yourself »

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

Javascript(Jquery) get function

<!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).prop("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);
          }).fail(function(error) {
            console.error("Request failed:", error);
          });
        });
    </script>
  </body>
</html>

Try it Yourself »

The <kbd class="highlighted">.serialize()</kbd> 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.

<script>
  $("#my_form").submit(function(event) {
      event.preventDefault();
      let formData = new FormData(this);
      $.ajax({
          url: $(this).prop("action"),
          type: $(this).prop("method"),
          data: formData,
          processData: false,
          contentType: false
      }).done(function(response) {
          $("#server-results").html(response);
      }).fail(function(error) {
          console.error("Request failed:", error);
      });
  });
</script>

The get() and post() Methods

The jQuery <kbd class="highlighted">get()</kbd> and <kbd class="highlighted">post()</kbd> methods sends a request to the server and retrieves the data asynchronously. Both are identical methods, apart from one difference that the <kbd class="highlighted">get()</kbd> makes Ajax requests using the HTTP GET method, while the <kbd class="highlighted">post()</kbd> 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.