jQuery Field Plug-in (v0.7)

This plugin greatly expands the ability to retrieve and set values in forms beyond jQuery's standard val() method (and Mike Alsup's Form Plug-in's fieldArray() method) by allowing you to interact with all types of form field elements (except input[type="file"], which is a read-only element.) It works the same way for text elements as it does for radio, checkbox and select elements.

The plug-in was built on the concept that you want to manipulate the fields like their traditional variables. Selectors should be written to query a specific field object (i.e. elements that would be linked together via a common name attribute, for example $("input[name='myRadioButton']").)

Elements that return multiple values are either separated by a comma or returned as an array based on which methods you invoke.

For elements that allow more than one option to be select (select and checkbox elements) you can specify a comma delimited list or an array of values to mark multiple options as being selected.

Download

Download the plug-in:
jquery.field.js
jquery.field.min.js

Interactive Examples

Choice a selector below and click the getValue() or setValue() buttons to test the functionality on those field elements.

jQuery selector:


Field Plug-in Test

input[type="text"]

input[type="password"]

input[type="hidden"]

input[type="radio"]

input[type="checkbox"]

select[type="select-one"]

select[type="select-multiple"]

textarea

input[type="button"]

input[type="submit"]

input[type="reset"]

$.limitSelection() Examples
You can not select more than 3 of the following items:
You can only select 2 options from the following:

NOTE: If a user has selected more than desired number of selections the first X number of items in the option array will be selected. While not ideal, there's no good way to track users who selected multiple options via a click-drag or [SHIFT]+click.

$.createCheckboxRange() Examples

The createCheckboxRange() allows you to create a Gmail-like checkbox range selector. By clicking on a checkbox element and then [SHIFT] clicking on an additional checkbox element, the entire range of checkbox elements between the first and second elements clicked with be checked or unchecked (based upon the status of the first checkbox clicked.) A callback function is used to highlight the <label> when the status of the elements "checked" status changes.





You can change the default key binding by changing the checkboxRangeKeyBinding default setting using either the $.Field.setDefaults() method or with the command:
$.Field.setProperty("checkboxRangeKeyBinding", "ctrlKey"); (click to change behavior.)

Field Navigation Methods

The Field plug-in contains several methods that will help you automatically navigate to the next form element. jQuery honors the tabIndex of your form elements (within the form object itself.)

This example shows how the tabIndex is honored within the parent form object. Type in a single character to auto-advance to the next field in the tabIndex (or use the [TAB] key to view the native behavior.)

The below examples show off how you can you can easily configure a field set to move from one element to the next when the maxlength of characters has been reached.

() -

Syntax Examples

* The tabIndex navigation methods attempt to follow the spec for tabbing through elements. This means that elements that have a specified tabIndex take priority over elements that do not specify an index. Disabled items are skipped altogether. The major exception is that the methods will only move within the parent form object.