The submit() method is an inbuilt method in jQuery which is used to submit a form when a submit event occurs. The special benefit of submitting form using jquery is that, method submits your form entirely without a page refresh.

The form submits all the fields to a php script without page refresh, using native jQuery functions

---

Step 1 - Build the HTML Form:

<form  method="post" action="post.php" id="f1">
    <div class="container" style="margin-right: 150px">
         <table class="table table-bordered-dark " >
            <tbody>
                <tr>
                    <td  style="color:white;background-color:grey">Name </td>
                    <td colspan="4">   
                        <input type="text" class="form-control" name="name" placeholder="Enter Name" >   
                    </td>     
                </tr>
                <tr>
                    <td style="color:white;background-color:grey">Contact </td>
                    <td colspan="4"> <input type="number_format" class="form-control" name="contact" placeholder="Enter Contact" > </td>
                </tr>
                <tr>
                    <td style="color:white;background-color:grey">Email Id   </td>
                    <td colspan="4"> <input type="email" class="form-control" name="email" placeholder="Enter Email"> </td>
                </tr>
                <tr>
                    <td colspan="5"> <button id="submit" class="btn btn-secondary" style="margin-left: 450px"> Register </button> </td>
                </tr>
            </tbody>
        </table>
    </div>
</form>
     

---

Step 2 - Begin Adding jQuery:

Don’t forget to add .js file in script tag,you can add it in head or before the end of the body tag.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> </script>

---

Step 3 - Add ajax code:

Don’t forget to add .js file in script tag,u can add it in head or before the end of the body body tag.

$("#f1").submit(function(e){
            
     e.preventDefault();    //avoid default events
     var form = $(this);
     var form_url = form.attr("action");  //fetch action of the form
     var form_method = form.attr("method"); //fetch method of the form
     var form_data =  form.serialize();    //Name of input fields are required otherwise this will not start

     $.ajax({
        type:form_method , 
        url : form_url , 
        data : form_data , 
        success : function(sd){
             console.log("Submited data and returned ");
              console.log(sd);
        },
        error :  function(err){
             console.log("not Submited data and returned ");
              console.log(err);
        }
     });
});

---

We can trigger the event manually when another element is clicked:

$( "#other" ).click(function() {
  $( "#target" ).submit();
});

---

Additional Notes:

• As the .submit() method is just a shorthand for .on( "submit", handler ), detaching is possible using .off( "submit" ).

• Forms and their child elements should not use input names or ids that conflict with properties of a form, such as submit, length, or method. Name conflicts can cause confusing failures.

---

Errors you may face:

A file input cannot be uploaded using AJAX because you cannot access the contents of a file stored on the client computer and send it in the request using javascript if the browser you are using does not support the HTML5 File API.

You can check it if your brower supports html5 api on : https://html5test.com/ .

If it is showing like this then bingo!!!!!!Your browser does not support HTML5…

Don't worry, I have a simple solution :

Just use ‘.val()’

    $(".current_form_id").submit(function(e){
        console.log("form submited");
        e.preventDefault();   
        var image = $('image_input_id').val();  //this will fetch the file name
        var form = $(this);
        var form_url = form.attr("action");;
        var form_method = form.attr("method");
        var form_data =  form.serialize()+'&image='+ image;    
                    
        console.log( form_data);
        
        $.ajax({
            type:form_method , 
            url : form_url , 
            data : form_data , 
            success : function(sd){
                 console.log("Submited data and returned ");
                  console.log(sd);
            },
            error :  function(err){
                 console.log("not Submited data and returned ");
                  console.log(err);
            }
        });