jQuery serializeForm
What:
A plugin for jQuery that makes serializing input elements easy. Once serialized you can send the elements back to the server with AJAX.
Why:
There is a big problem with jQuery’s built in $.serialize() method. It only uses the input elements name attribute. In practice I found that the name attribute is rarely used, most people use the id attribute instead. The only exception is the radio input, then you have to use the name attribute. This plugin will attempt to use the id attribute first, if it’s blank, it’ll use the name attribute instead.
This plugin will also ignore .Net SessionState controls (any element who’s id starts with __). This probably isn’t necessary, but it make dialogs easier to serialize.
Note: You have to call $.serializeForm() on the parent element, not on the control itself.
How to use:
function updateInfo()
{
$.post( "/post.aspx", $("body").serializeForm() );
}
<body> Name: <input id="userName" type="text" /> Age: <input id="userAge" type="text" class="numeric" /> Sex: <radio name="userSex" value="male" /> Male <radio name="useSex" value="female"/> Female Description: <textarea id="userDescription"></textarea> <button onclick="updateInfo()" type="button">Update</button> </body>
Returns to Server:
If you use $.post()
userName=Chris&userAge=26&userSex=male&Description=A%20programmer%20and%20a%20Writer
Get it
jquery.serializeForm.pack.js (538 bytes)
jquery.serializeForm.js Source (2,602 bytes)
Source
//
// Created By Chris Richards 2008
// Last Update: October 2009
//
// Seralize a input elements into a key/value pair for AJAX Transport. ($.post)
// The key is the element id (except for radio buttons which use name.)
// TextAreas are encoded with encodeURIComponent
//
// .Net SessionState controls (ids that start with __) are excluded from the result.
//
jQuery.fn.serializeForm = function(){
//Create an object to hold the data, this is the same type of object that is expected by $.post
var formparams = {};
//Loop over each element we have
this.each(function(){
//We only care about input controls
jQuery("input, select, textarea", this).each(function()
{
//Local Varaibles
var jObj = jQuery(this); //Refrence to the jQuery object
var name = jObj.attr("id"); //The ID of the element.
name = "" != name ? name: jObj.attr("name"); //If the ID isn't valid, use the name attribute
var data = jObj.val(); //The value of the element
var type = jObj.attr("type"); //Type of input control
//
// Check for inputs that use the checked paramiter
//
if( "checkbox" == type )
{
if( this.checked ) {
formparams[name] = "true";
} else {
formparams[name] = "false";
}
}
else if ("radio" == type )
{
//Radio buttons only care about the checked one
if( this.checked )
{
formparams[name] = data;
}
}
//
// These inputs are straightforward
//
else {
//Ignore ASP.NET Crap
if(! name.match(/__.+/) ) {
//Do we already have a value for this?
if( formparams[name] === undefined ) {
//Add it to our list, encodeURI for TextAreas
if( "textarea" == type ) {
//encodeURI for TextAreas
formparams[name] = encodeURIComponent( data ); //Add it
} else {
formparams[name] = data; //Add it
}
} else {
//Append it, encodeURI for anything we have to append.
formparams[name] += "," + encodeURIComponent( data );
}
}
}
});
});
//Return the completed object.
return formparams;
};
You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
