Share on Google+Share on Google+

jQuery 'serialize' Ajax shorthand method

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.


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

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

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

<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"


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

<label for="r2">Female</label>
<p><tt id="results"></tt></p>
function showValues() {
var str = $("form").serialize();
$(":checkbox, :radio").click(showValues);


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

Download Source Code

Click here to see demo



Posted on: August 6, 2010 If you enjoyed this post then why not add us on Google+? Add us to your Circles

Share this Tutorial Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.


Advertisement null