How to submit multiple html form using jquery and ajax

Here you are going to learn how to submit multiple html form from single page using jquery and ajax, This problem arise every phase of development If you are working on a rich application, Then you need to create multiple forms on single page and have to submit to server.

So in this topic i’ll tell you how to do this in better and simpler manner. It does not matter how many form on same page by this code you can handle all your form using single jquery script.
multi-form

DEMO DOWNLOAD

In this script i used some advance jquery function like closest(), serialize()
Read more about these function from jquery official website
closest: https://api.jquery.com/closest/
serialize: https://api.jquery.com/serialize/

Lets start the tutorial.

Create a simple html file and write down some sample html code

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Submit multiple form using jquery and ajax</title>
</head>
<body>
<h3>Submit multiple form using jquery and ajax</h3>
    <div >
    <b>Form-1</b>
    <form id="form1">
    <table border=1><tr><td height=100><ul class="msgBox"></ul></td></tr>
  <tr><td>
  <input type="hidden" name="fname" value="form1"> 
  <input type="text" name="name" placeholder="Enter Name" required="required"> 
  <input type="text" name="msg" placeholder="Enter Msg" required="required">
   <button type="button">Submit</button> 
  </td></tr></table></form>
</div>
<br/>
<div >
    <b>Form-2</b>
    <form id="form2">
    <table border=1><tr><td height=100><ul class="msgBox"></ul></td></tr>
  <tr><td>
  <input type="hidden" name="fname" value="form2">
  <input type="text" name="name" placeholder="Enter Name" required="required"> 
  <input type="text" name="msg" placeholder="Enter Msg" required="required">
  <button type="button">Submit</button> 
  </td></tr></table></form>
</div>
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <script>
  $(function() {
     $("button").click(function() {
        var formID = $(this).closest('form').attr('id');
        var formData = $("#"+formID).serialize();
        if($("#"+formID)[0].checkValidity()) {
         $.ajax({
          url: "request.php",
          dataType: "json",
          data: formData,
          success: function( data ) {
             
              if(data.fname == 'form1') {
                $("#"+formID+" .msgBox").append("<li><b>"+data.name+": </b> "+data.msg+"</li>");
                 $("#"+formID+" input[name='msg']").val('');
              } else if(data.fname == 'form2') {
                $("#"+formID+" .msgBox").append("<li><b>"+data.name+": </b> "+data.msg+"</li>");
                $("#"+formID+" input[name='msg']").val('');
              }
 
          },
          error: function(e) {
            
            console.log(e);
          },
          timeout: 30000  
        });
       } else {
        alert("Please enter name and message");
       }
     });
  });
  </script>
</body>
</html>

The above html code i have created two form form1,form2 you can create more form as per your need,
Where i assigned hidden input value fname for each form by this you can easily identify every form on server that which has been clicked.


Create your server file to handle your form request on server.

request.php

<?php
   $formData = $_REQUEST;
   if($formData['fname'] == 'form1') {
     
      echo json_encode($formData);
   } else if($formData['fname'] == 'form2') {
     
      echo json_encode($formData);
   }
?>

DEMO DOWNLOAD

I hope this tutorial will help you to submit multiple form from single page.

If you like this post please don’t forget to subscribe my public note book for more useful stuff