jQuery 'serialize' Ajax shorthand method


 

jQuery 'serialize' Ajax shorthand method

In this tutorial , jQuery 'serialize' method is implemented to create query for set of form elements

In this tutorial , jQuery 'serialize' method is implemented to create query for set of form elements

jQuery 'serialize' Ajax shorthand method

In this tutorial , jQuery 'serialize' method is implemented to create query for set of form elements. The 'serialize' method create URL in standard URL-encoded notation. It could be sent to a server in an Ajax request.

serializeMethod.html

<!DOCTYPE html>
<html>
<head>
<style>
body, select { font-size:12px; }
form { margin:5px; }
p { color:red; margin:5px; font-size:14px; }
b { color:blue; }
</style>
<script src="jquery-1.4.2.js"></script>
</head>
<body>

<h3><font color="blue">Enter information</font></h3>
<form>
<select name="CourseType">
<option>Full Time</option>
<option>Part Time</option>
</select>

<br />
<select name="Education" multiple="multiple">
<option selected="selected">Intermediate</option>
<option>Diploma</option>

<option>Other</option>
</select>
<br/>
<input type="checkbox" name="Course" value="Btech" id="ch1"/>

<label for="ch1">Btech</label>

<input type="checkbox" name="Course" value="Mtech"

checked="checked" id="ch2"/>

<label for="ch2">Mtech</label>
<br />
<input type="radio" name="Gender" value="Male" checked="checked"

id="r1"/>

<label for="r1">Male</label>
<input type="radio" name="Gender" value="Female" id="r2"/>

<label for="r2">Female</label>
</form>
<p><tt id="results"></tt></p>
<script>
function showValues() {
var str = $("form").serialize();
$("#results").text(str);
}
$(":checkbox, :radio").click(showValues);
$("select").change(showValues);
showValues();
</script>
</body>
</html>

OUTPUT

When you will fill the form , the query would be like :

Download Source Code

Click here to see demo

Ads