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>
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>
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>
Code:
<!DOCTYPE html>
<html>
<head>
<title> The jQuery example </title>
<style>
#bdr {
border: 2px solid black;
padding-top: 30px;
height: 140px;
background: red;
display: none;
}
</style>
<script src= “https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js” >
</script>
</head>
<body style = “text-align:center;”>
<div id= “bdr”>
<h1 style = “color:white;” >
show() Method Example
</h1>
</div><br>
<button id = “bttn”>
Show( ) mthod
</button>
<!– Script to show display:none content –>
<script>
$(document).ready(function() {
$(“#bttn”).click(function() {
$(“#bdr”).show();
});
});
</script>
</body>
</html>
Code:
<!DOCTYPE html>
<html>
<head>
<title> The jQuery example </title>
<style>
#bdr {
border: 2px solid black;
padding-top: 30px;
height: 140px;
background: red;
display: none;
}
</style>
<script src= “https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js” >
</script>
</head>
<body style = “text-align:center;”>
<div id= “bdr”>
<h1 style = “color:white;” >
show( speed ) Method Example
</h1>
</div><br>
<button id = “bttn”>
Show( ) mthod
</button>
<script>
$(document).ready(function() {
$(“#bttn”).click(function() {
$(“#bdr”).show(2000);
</script>
</body>
</html>
Code:
<!DOCTYPE html>
<html>
<head>
<title> The jQuery example </title>
<style>
#bdr {
border: 2px solid black;
padding-top: 30px;
height: 140px;
background: red;
display: none;
}
</style>
<script src= “https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js” >
</script>
</head>
<body style = “text-align:center;”>
<div id= “bdr”>
<h1 style = “color:white;” >
show(speed=”slow” ) Method Example
</h1>
</div><br>
<button id = “bttn”>
Show( ) mthod
</button>
<script>
$(document).ready(function() {
$(“#bttn”).click(function() {
$(“#bdr”).show(“slow”);
</script>
</body>
</html>
Code:
<!DOCTYPE html>
<html>
<head>
<title> The jQuery example </title>
<style>
#bdr {
border: 2px solid black;
padding-top: 30px;
height: 140px;
background: red;
display: none;
}
</style>
<script src= “https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js” >
</script>
</head>
<body style = “text-align:center;”>
<div id= “bdr”>
<h1 style = “color:white;” >
show( easing=”swing” ) Method Example
</h1>
</div><br>
<button id = “bttn”>
Show( ) mthod
</button>
<script>
$(document).ready(function() {
$(“#bttn”).click(function() {
$(“#bdr”).show(“slow”,”swing”); <!– or just show(“swing”) –>
</script>
</body>
</html>
Code:
<!DOCTYPE html>
<html>
<head>
<title> The jQuery example</title>
<style>
#bdr {
border: 2px solid black;
padding-top: 30px;
height: 140px;
background: red;
display: none;
}
</style>
<script src= “https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js” >
</script>
</head>
<body style = “text-align:center;”>
<div id= “bdr”>
<h1 style = “color:white;” >
show( callback ) Method Example
</h1>
</div><br>
<button id = “bttn”>
Show( ) mthod
</button>
<script>
$(document).ready(function() {
$(“#bttn”).click(function() {
$(“#bdr”).show(“slow”,”swing”, function(){
alert(” show( callback ) method is finished “);
</script>
</body>
</html>
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.
learn more about programming at mcp