jQuery Form Plugin

The jQuery Form Plugin allows you to easily and unobtrusively upgrade HTML forms to use AJAX

View on GitHub

Form Fields

This page describes and demonstrates the Form Plugin’s fieldValue and fieldSerialize methods.

fieldValue

fieldValue allows you to retrieve the current value of a field. For example, to retrieve the value of the password field in a form with the id of ‘myForm’ you would write:

var pwd = $('#myForm :password').fieldValue()[0];

This method always returns an array. If no valid value can be determined the array will be empty, otherwise it will contain one or more values.

fieldSerialize

fieldSerialize allows you to serialize a subset of a form into a query string. This is useful when you need to process only certain fields. For example, to serialize only the text inputs of a form you would write:

var queryString = $('#myForm :text').fieldSerialize();

Demonstration

Enter a jQuery expression into the textbox below and then click 'Test' to see the results of the fieldValue and fieldSerialize methods. These methods are run against the test form that follows.

jQuery expression: (ie: textarea, [@type='hidden'], :radio, :checkbox, etc)
[Successful controls](https://www.w3.org/TR/html5/forms.html#constructing-form-data-set) only
Test Form
<input type="hidden" name="Hidden" value="secret">
<input name="Name" type="text" value="MyName1">
<input name="Password" type="password">
<select name="Multiple" multiple="multiple">
<select name="Single">
<input type="checkbox" name="Check" value="1">
<input type="checkbox" name="Check" value="2">
<input type="checkbox" name="Check" value="3">
<input type="checkbox" name="Check2" value="4">
<input type="checkbox" name="Check2" value="5">
<input type="checkbox" name="Check3">
<input type="radio" name="Radio" value="1">
<input type="radio" name="Radio" value="2">
<input type="radio" name="Radio" value="3">
<input type="radio" name="Radio2" value="4">
<input type="radio" name="Radio2" value="5">
<textarea name="Text" rows="2" cols="20"></textarea>
<input type="reset" name="resetButton" value="Reset">
<input type="submit" name="sub" value="Submit">

By default, fieldValue and fieldSerialize only function on ‘successful controls’. This means that if you run the following code on a checkbox that is not checked, the result will be an empty array.

// value will be an empty array if checkbox is not checked:
var value = $('#myUncheckedCheckbox').fieldValue();
// value.length == 0

However, if you really want to know the ‘value’ of the checkbox element, even if it’s unchecked, you can write this:

// value will hold the checkbox value even if it's not checked:
var value = $('#myUncheckedCheckbox').fieldValue(false);
// value.length == 1