View Latest Questions and Answers|Ask Questions?|Tutorials

 
 

Home Tutorial Jquery jQuery 'serialize' Ajax shorthand method

 
 

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.

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

Related Tags for jQuery 'serialize' Ajax shorthand method :

«Previous Index Next»

Ask Questions?

If you are facing any programming issue, such as compilation errors or not able to find the code you are looking for.

Ask your questions, our development team will try to give answers to your questions.

Tutorial Topics
 

 

 

Services

Home Privacy Policy
© All Rights are Reserved for Rose India