How To Submit AJAX Forms | JQuery
AJAX is simply Asynchronous XML or JSON. A great way to improve the user experience of your website is to validate and submit forms without a page refresh. You can use the $.post() method in combination with the serialize() method to submit a form using AJAX in jQuery.Submit AJAX Forms

You 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.
$.ajax({name:value, name:value, ... })
Example:
The form will use jQuery to process a form without a page refresh (using AJAX) and display a success message.
$("#idForm").submit(function(e) {
e.preventDefault();
var form = $(this);
var actionUrl = form.attr('action');
$.ajax({
type: "POST",
url: actionUrl,
data: form.serialize(), // serializes the form's elements.
success: function(data)
{
alert(data); // show response.
}
});
});
- The jQuery post() method sends a request to the server and retrieves the data asynchronously.
- The serialize() method creates a URL encoded text string by serializing form values for submission. Only "successful controls" are serialized to the string.
- Using event.preventDefault() instead of return false is good practice as it allows the event to bubble up. This lets other scripts tie into the event, for example analytics scripts which may be monitoring user interactions.
Related Topics
- How to get input textbox value using jQuery
- Get Selected Dropdown Value on Change Event | jQuery
- How can I get the ID of an element using jQuery
- Open Bootstrap modal window on Button Click Using jQuery
- How to select an element with its name attribute | jQuery
- How to get the data-id attribute using jQuery
- How to disable/enable submit button after clicked | jQuery
- How to replace innerHTML of a div using jQuery
- Change the selected value of a drop-down list using jQuery
- How to get the value of a CheckBox with jQuery
- How to wait 'X' seconds with jQuery?
- How to detect enter key press on keyboard | jQuery
- How to allow numbers only in a Text Box using jQuery.
- How to dynamically create a div in jQuery?