How to submit a form using ajax in jQuery ?
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 >
< 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
Share your thoughts in the comments
Please Login to comment...