Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to submit a form using ajax in jQuery ?

  • Difficulty Level : Hard
  • Last Updated : 10 Nov, 2021

jQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM), and JavaScript. Elaborating the terms, jQuery simplifies HTML document traversing and manipulation, browser event handling, DOM animations, Ajax interactions, and cross-browser JavaScript development.

The $.ajax() function is used for ajax call using jQuery.

Syntax:

$.ajax({name:value, name:value, ... })

We can submit a form by ajax using submit button and by mentioning the values of the following parameters.

  • type: It is used to specify the type of request.
  • url: It is used to specify the URL to send the request to.
  • data: It is used to specify data to be sent to the server.

 

Example:

HTML




<!Doctype html>
<html>
  
<head>
    <title>JQuery AJAX Call</title>
      
    <!--Include JQuery Library -->
    <script src=
    </script>
    <script>
      
    // When DOM is loaded this 
    // function will get executed
    $(() => {
        // function will get executed 
        // on click of submit button
        $("#submitButton").click(function(ev) {
            var form = $("#formId");
            var url = form.attr('action');
            $.ajax({
                type: "POST",
                url: url,
                data: form.serialize(),
                success: function(data) {
                      
                    // Ajax call completed successfully
                    alert("Form Submited Successfully");
                },
                error: function(data) {
                      
                    // Some error in ajax call
                    alert("some Error");
                }
            });
        });
    });
    </script>
</head>
  
<body>
    <form id='formId' action=''> Name:
        <input type='text' 
               id='nm' 
               name='nm'
        </input>
        <br> Student ID:
        <input type='text' 
               id='studentId' 
               name='studentId'
        </input>
        <br> Contact No. :
        <input type='text' 
               id='contactNumber' 
               name='contactNumber'
        </input>
        <br>
        <button type='submit' 
               id='submitButton'>
            Submit
        </button>
    </form>
</body>
  
</html>

Output:


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!