Submit form using AJAX in jQuery

Generally, form is submitted to server using a specified URL in action attribute but this method refreshes web page. So whenever you need to submit a form without reloading page then you can use AJAX upload using jQuery.

The jQuery submit() method is useful to handle form submission process or in another way you can customize form uploading. Sometimes we need to validate a form before submitting or we need to add custom validation before processing submits or you want to send only some specific data to a server rather than all data then you can use jQuery submit method and AJAX.

In this tutorial, we will take examples to submit comments using AJAX and jQuery. This comment form will contain name, email, and comment text. Here, we will also use Bootstrap for some basic formatting.

<!DOCTYPE html>
<ḥhtml>
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Simple Comment Form</title>
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
   </head>
   <body>
      <div class="container py-3">
         <div class="row justify-content-center">
            <div class="col-md-6">
               <span class="anchor" id="formLogin"></span>
               <!-- form card login -->
               <div class="card card-outline-secondary">
                  <div class="card-header">
                     <h3 class="mb-0">Comment</h3>
                  </div>
                  <div class="card-body">
                     <form autocomplete="off" class="form" id="commentForm" name="commentForm" role="form" action="comment.php">
                        <div class="form-group">
                           <label for="name">Name</label>
                           <input class="form-control" id="name" name="name" type="text" required>
                        </div>
                        <div class="form-group">
                           <label>Email</label>
                           <input class="form-control" id="email" name="email" type="email" required>
                        </div>
                        <div class="form-group">
                           <label>Comment</label>
                           <textarea class="form-control" id="comment" name="comment" rows="5" required></textarea>
                        </div>
                        <input type="submit" class="btn btn-success btn-lg float-right">
                     </form>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.js" integrity="sha512-n/4gHW3atM3QqRcbCn6ewmpxcLAHGaDjpEBu4xZd47N0W2oQ+6q7oc3PXstrJYXcbNU1OHdQ1T7pAP+gi5Yu8g==" crossorigin="anonymous" referrerpolicy="no-referrer" crossorigin="anonymous"> </script>
      <script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"> </script>
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous" > </script>
      <script type="text/javascript" >
          $(document).ready(function(){
              $('#commentForm').submit(function(e){
                  e.preventDefault();

                  var form = $('#commentForm');
                  var actionUrl = form.attr('action');

                  $.ajax({
                      type: "POST",
                      url: actionUrl,
                      data: form.serialize(),
                      dataType: "json",
                      success:function(data){
                          console.log('success');
                      }
                  });
              });
          });
      </script>
   </body>
</html>

Here, we have created a simple form with name, email, and comment as input and defined HTML required attribute for validating user input before submitting form.

In the last body section, we have called CDN for Bootstrap and jQuery. Lastly, we have defined our form-handling functionality.

The script will handle form submit function whenever submit button is clicked. Here, we have used e.preventDefault() function to stop form submission via reloading. Then we created variable and store form element and defined another variable to get and store action URL.

At last, we called the AJAX function and passed all form data using serialize() function to AJAX request, and in response we just printed a success message to the console.

Conclusion

In this article, we have created a simple form and submitted it using jQuery and AJAX. Now, most of the applications required to use of AJAX at some point. Major web applications like LinkedIn and Facebook use AJAX and jQuery to load data or handle posting and comments.