Updated February 21, 2023
Introduction to jQuery Ajax Form
jQuery ajax form validation can be handled with jQuery when a form is submitted. This has the advantage of giving users feedback on any input errors. The jQuery form Plugin lets us modify HTML forms to use AJAX discreetly. The serializeArray method in jQuery helps with this. It’s fairly similar to the serialize method, except that it returns an array of objects instead of a string.
What is jQuery ajax form?
- The method of ajaxForm and ajaxSubmit offers a variety of options, giving us complete control over the data submission process.
- JQuery is a free JavaScript framework that makes it easier to deal with HTML/CSS documents, specifically the Document Object Model (DOM) and JavaScript.
- JQuery simplifies HTML document navigation and manipulation, browser event handling, DOM animations, Ajax interactions, and cross-browser JavaScript programming, to name a few things. For jQuery ajax calls, the $.ajax() function is utilised.
Below syntax shows how to submit a form using ajax in jQuery.
Syntax –
$.ajax({name1:value1, name2:value2, …. })We can submit the form of ajax by using the button submitting, and we also need to mention values of the below parameters are as follows.
- Type – This is used to specify the request’s type. We can specify the request type using this parameter.
- URL – This parameter defines the URL to which the request should be sent. We can define the request type using the URL parameter.
- Data – This parameter tells the server what data to send. Using this parameter, we can send specific data to the server.
- When working with forms, jQuery ajax capabilities come in handy. There are several benefits, ranging from serialization to simple client-side validation.
- It’s quite simple to serialize form inputs in jQuery. Serialize and serializeArray are the two built-in methods. While the names are self-explanatory, there are several benefits to employing them.
- The serialize method converts the contents of a form into a query string. A name attribute is required for the value of an element to be serialized.
- Values from checkboxes and radio buttons are only included if they are checked. While simple serialization is fantastic, there are occasions when sending an array of objects rather than simply the query string will make our application work better.
How to submit a jQuery ajax form?
- Utilize the post and serialize methods to submit a form using AJAX in jQuery.
- The serialize function produces a URL encoded text string by serializing form values for submission. The string is serialized only with successful controls.
- The below example shows how to submit the jQuery ajax form as follows.
Example –
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title> JQuery Ajax Form </title>
<script src = "https://code.jQuery.com/jQuery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$("form").on("submit", function(event){
event.preventDefault();
var formValues = $(this).serialize();
var actionUrl = $(this).attr("action");
$.post(actionUrl, formValues, function(data){
$("#result").html(data);
});
});
});
</script>
</head>
<body>
<form action="form.php">
<p>
<label>Name of Student:</label>
<input type = "text" name="Name of Student:">
</p>
<p>
<label>Gender of Student:</label>
<label><input type = "radio" value = "male" name = "Gender of Student"> Male</label>
<label><input type = "radio" value = "female" name = "Gender of Student"> Female</label>
</p>
<p>
<label>Hobbies of Student:</label>
<label><input type = "checkbox" value = "Reading" name = "Hobbies of Student[]"> Reading</label>
<label><input type = "checkbox" value="Playing" name = "Hobbies of Student[]"> Playing</label>
<label><input type = "checkbox" value = "Dance" name = "Hobbies of Student[]"> Dance</label>
</p>
<p>
<label>Favorite Color of student:</label>
<select name = "color">
<option> Pink </option>
<option> Yellow </option>
<option> Red </option>
</select>
</p>
<p>
<label>Comment:</label>
<textarea name = "comment"></textarea>
</p>
<input type = "submit" value = "Submit">
</form>
<div id = "result"></div>
</body>
</html>
JQuery ajax form examples
Below is the example of jQuery ajax form as follows.
Example –
<!Doctype html>
<html>
<head>
<title> JQuery Ajax Form </title>
<script src =
"https://code.jQuery.com/jQuery-3.5.0.js">
</script>
<script>
$(() => {
$("#submitButton").click(function(ev) {
var form = $("#formId");
var url = form.attr ('action');
$.ajax({
type: "POST",
url: url,
data: form.serialize (),
success: function(data) {
alert ("Data updated and from submitted successfully.");
},
error: function(data) {
alert ("Error in submitting form.");
}
});
});
});
</script>
</head>
<body>
<form no = 'formId' action = ''> Student Name:
<input type = 'text'
Id = 'nm'
Name = 'nm'>
</input>
<br> Student No:
<input type = 'text'
No = 'studentNo'
Name = 'studentNo'>
</input>
<br> Student Contact No. :
<input type = 'text'
No = 'contactNumber'
Name = 'contactNumber'>
</input>
<br>
<button type = 'submit'
Id = 'submitButton'>
Submit Form
</button>
</form>
</body>
</html>
JQuery ajax formwork parameters
Below is the work parameter of jQuery ajax as follows.
- Async – If the request should be handled asynchronously, this is a Boolean value. Before, the default was true.
- BeforeSend – This function was run before we sent our request.
- Cache – If the browser should cache the requested pages, this value is a Boolean value. The value of cache is true by default.
- Complete – When the request is completed, call this function.
- ContentType – When data is sent to the server, the content type is used. For all AJAX callback functions, context specifies “this” value.
- DataFilter – This function for dealing with the XMLHttpRequest’s raw response data.
- DataType – The server response’s data type is expected.
- Error – If the request fails, call this function.
- Global – A Boolean value that indicates whether or not the request should be handled via global AJAX event handlers.
- IfModified – A Boolean value indicating if a request is successful only if the response has changed from the previous request. False by default.
- Jsonp – In a jsonp request, a string that replaces the callback function
- JsonpCallback – In a jsonp request password, it specifies the callback function’s name.
- ProcessData – A Boolean value indicating whether or not the data given with the request should be converted to a query string. True by default.
Conclusion
JQuery ajax form validation can be handled with jQuery when a form is submitted. This has the advantage of giving users feedback on any input errors. In addition, JQuery is a free JavaScript framework that makes it easier to deal with HTML/CSS documents, specifically DOM and JavaScript.
Recommended Articles
This is a guide to the jQuery Ajax Form. Here we discuss submitting a form using ajax in jQuery and the examples and outputs. You may also look at the following articles to learn more –
