Programming

jQuery serialize

April 15, 2021

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


  • Recent Posts



shares
Loading...