jQuery form is a part of jQuery AJAX methods. AJAX (Asynchronous JavaScript and XML) can be defined as the art of exchanging data with a server which includes loading data in the background and updating only the specific parts of a web page, without reloading the whole page.
With AJAX functionality, jQuery provides several methods to load the external data directly into the selected HTML elements of the web page, thus, providing the functionality of creating and submitting forms.
Some of these methods are:
- jQuery serialize(): jQuery serialize() method is used to encode a set of form elements as a string for submission.
- jQuery serializeArray(): jQuery serializeArray() method is used to encode a set of form elements as an array of names and values.
Example:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var x = $("form").serializeArray();
$.each(x, function(i, field){
$("#results").append(field.name + ":" + field.value + " ");
});
});
});
</script>
</head>
<body>
<form action="">
First name: <input type="text" name="Mailid" value="897gmail.com"><br>
Last name: <input type="text" name="UserName" value="Paplu"><br>
</form>
<button>Serialize</button>
<div id="results"></div>
</body>
</html>