Open In App

How to submit a form using ajax in jQuery ?

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will see the use of the AJAX request to submit a form in jQuery. The form will be submitted by sending the POST request to the server where the data will be stored.

Syntax:

$.ajax({type: value, url: value, data: value ... });

Some of the main parameters of an AJAX request are explained below:

  • type: It is used to specify the type of the request, whether the request will be of POST type or GET type.
  • url: It is used to specify the URL to which the specified type of request will be sent.
  • data: It is used to specify data to be sent to the server.

Example: The below example illustrates the use of the Ajax request to submit a form in jQuery.

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) {
            let form = $("#formId");
            let 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'>
        <br> Student ID:
        <input type='text'
               id='studentId'
               name='studentId'>
        <br> Contact No. :
        <input type='text'
               id='contactNumber'
               name='contactNumber'>
        <br>
        <button type='submit'
               id='submitButton'>
            Submit
        </button>
    </form>
</body>
 
</html>


Output:



Last Updated : 14 Dec, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads