Home Tutorial Jquery jQuery 'serialize' Ajax shorthand method


Share on Google+Share on Google+
jQuery 'serialize' Ajax shorthand method
Posted on: August 6, 2010 at 12:00 AM
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


Related Tags for jQuery 'serialize' Ajax shorthand method :

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.

Posted on: August 6, 2010

Recommend the tutorial

Advertisements Advertisements