jQuery in Action
274
CHAPTER 9
Prominent, powerful, and practical plugins
This results in
text=some%20text&dropdown=Three&cb=cb.2&radio=radio.2&
textarea=Lorem%20ipsum%20dolor%20sit%20amet%2C%20conse
ctetuer%20adipiscing%20elit.
Notice that all successful form controls have their names and values collected,
and the query string created using this data has been
and the query string created using this data has been
URL
-encoded.
Clicking the Serialize Fields button executes the command
$('#testForm input').fieldSerialize()
The wrapped set created by this selector includes only a subset of the form's con-
trols: those of type
trols: those of type
input
. The resulting query string, which includes only the
wrapped control elements that are successful, is as follows:
text=some%20text&cb=cb.2&radio=radio.2
One reason that we might want to serialize form controls into a query string is to
use as the submission data for an Ajax request. But wait! If we want to submit a
form via Ajax rather than through the normal process, we can turn to yet more
features of the Form Plugin. But before we get to that, let's examine a few com-
mands that allow us to manipulate the form controls' values.
use as the submission data for an Ajax request. But wait! If we want to submit a
form via Ajax rather than through the normal process, we can turn to yet more
features of the Form Plugin. But before we get to that, let's examine a few com-
mands that allow us to manipulate the form controls' values.
9.1.2 Clearing and resetting form controls
The Form Plugin provides two commands to affect the values of a form's controls.
The
The
clearForm()
command clears all fields in a wrapped form, whereas the
resetForm()
command resets the fields.
"Ummm, what's the difference?" you ask.
When
When
clearForm()
is called to clear form controls, they are affected as follows:
Text, password, and text area controls are set to empty values.
<select>
elements have their selection unset.
Check boxes and radio buttons are unchecked.
When
resetForm()
is called to reset controls, the form's native
reset()
method is
invoked. This reverts the value of the controls to that specified in the original
HTML
markup. Controls like text fields revert to the value specified in their
value
attribute, and other control types revert to settings specified by
checked
or
selected
attributes.
Once again, we've set up a lab page to demonstrate this difference. Locate the
file chapter9/form/lab.reset.and.clear.html, and display it in your browser. You
should see the display shown in figure 9.2.
should see the display shown in figure 9.2.