Introduction to jQuery serialize()
jQuery serialize() method is used to create a valid text string in standard URL-encoded notation by serializing form. Serialization is used to convert JSON object data into string format which is then appended to the request and sent to the server. This method basically encodes form elements to a valid text string. This text string is then attached to the AJAX request before sending it to the.
This method can be used on any individual jQuery object which has form controls, such as input, textarea, and select. The serialized values can be used in the URL query string while making AJAX request to the. jQuery serializes only the successful controls to the query. Successful control is a control that has a name paired with its current value. This control is valid for submission.
Syntax
Given below is a simple syntax for the serialize() method.
$(selector).serialize()- This method does not accept any arguments.
- Returns a string object.
Implementation of jQuery serialize() method
Let us go through a few examples for better understanding :
Example #1
This is a very simple example where the serialize() method has been used.
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
$("#div2").text($("form").serialize());
});
});
</script>
<style> #div1 {
width: 400px; height: 100px; padding: 20px; font-size: medium; font-weight: bold;
border: 3px solid mediumseagreen; background: lightgray;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div id="div1">
<form action="">
Full Name:<input type="text" name="FullName" value="John A" /><br /> Email Id : <input type="text" name="EmailID" value="john@123" /><br />
</form>
<br />
<button style="background-color:palevioletred;"> Click to see serialized values
</button>
</div>
<div id="div2"></div>
</body>
</html>Output:
Below screen gets displayed at the very beginning when the page is first loaded.
The screen shows a form with two input fields and a button.
Values are already hardcoded in the two input fields.
On clicking the button, the serialize() method converts the input field values to a text string as shown below in the
serialize() method here, creates a text string in standard URL-encoded notation.
jQuery serializes the successful controls within the form, that is, <input> in this case. We see that serialized values from two input fields are concatenated using &.
Example #2
Let us now take a look at an example where values to the input fields are provided by the user once the form is loaded.
<!DOCTYPE html>
<html>
<head>
<title>JQuery Example for Serialization</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function() {
$("#submit").click(function() {
var text = $("form").serialize(); // Serialize form Data
$("#div2").text("The Serialized values are :" + text); return false;
});
});
</script>
<style> body {
font-family: "Times New Roman";
}
#div1 {
width: 400px; height: 100px; padding: 20px; color: palevioletred; font-size: medium; font-weight: bold;
border: 3px solid mediumseagreen; background: lightgray;
margin-bottom: 10px;
}
#div2{
color:palevioletred;
}
</style>
</head>
<body>
<div id="div1">
<form>
Full Name:<input type="text" name="FullName" /><br /><br> Email Id : <input type="text" name="EmailID" /><br /><br>
<input type="submit" id="submit" value="Submit form data"/>
</form>
</form>
</div>
<div id="div2"></div>
</body>
</html>Output:
Once the page is first loaded in the browser, the below screen gets displayed.
Here, we see a form with two input fields and a Submit button.
On providing the values in input fields and clicking on the button, input field values get serialized by the serialize() method to a text string in a URL-encoded
Example #3
Let us consider an example where a form is serialized to a query string to be sent in an Ajax request to a server.
<!DOCTYPE html>
<head>
<title>Jquery Example for Serialization</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<style> select {
font-size: 14px; height:100px; width:100px; color:indigo;
border: 3px solid grey;
}
form {
margin: 10px; color:green;
}
p { color:palevioletred; margin: 10px;
font-size: 14px;
}
b { color:green;
}
</style>
</head>
<body>
<form>
<select name="Option" multiple="multiple">
<option selected="selected">Option1</option>
<option>Option2</option>
<option>Option3</option>
<option selected="selected">Option4</option>
<option>Option5</option>
<option>Option6</option>
<option>Option7</option>
<option>Option8</option>
</select>
<br />
<input type="checkbox" name="check" value="check1" id="check1" />
<label for="check1">check1</label>
<input
type="checkbox" name="check" value="check2" checked="checked" id="check2"
/>
<label for="check2">check2</label>
</form>
<p><tt id="results"></tt></p>
<script>
function serializeValues() {
var str = $("form").serialize();
$("#results").text(str);
}
$("input[type='checkbox'").on("click", serializeValues);
$("select").on("change", serializeValues); serializeValues();
</script>
</body>
</html>Output:
The below screen gets displayed once the page is first loaded in the browser. We have a drop-down box where initially we have selected two options, Option1 and
Also, we have two checkboxes with check1 and check2 already checked. At the bottom of the form, we see the serialized values for the form input fields.
Now, we change our selection to
Serialized values here include the selected option from dropbox, that is, Option6 and the checked box, check2
jQuery serializes only the successful controls to the query. Successful control is a control that is valid for submission. It must have a control name paired with its current. This forms a part of the data set of the submitted.
The value of a form element can be included in a serialized string only if the element has a name attribute.
Conclusion
In this article, we have focused mainly on implementing Serialization using serialize() the method in jQuery. Serialization is a concept of converting json object and array data into a string. This process can be used in sending and receiving data in JSON format across various platforms using the web.
We saw how jQuery form data can be converted into serialize object json format using jQuery serialize(). The object string is then de-serialized at the server serialize() method can be used to create a valid query string that will be sent to the server in an AJAX.
Recommended Articles
This is a guide to jQuery serialize(). Here we discuss the introduction, implementation of jQuery serialize() method and examples. You may also look at the following articles to learn more-
