How to submit a form using ajax in jQuery ?
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:
Please Login to comment...