Accessing form elements by name with jQuery
There are a variety of ways to access elements with jQuery including by the name property of form elements (the name="" part of <input name="foo">). This can be useful so you don't have to assign an id to each and every form element as well as a name which is needed to pass the form value to the next page.
Here's a snippet of a form for the following examples with first_name and last_name fields in a form.
<form ... > .... <input type="text" name="first_name" value="" /> <input type="text" name="last_name" value="" /> .... </form>
Selecting by name
To select the "first_name" text input form element do this:
For example to display the value in an alert window do this:
alert( $("input[name=first_name]").val() );
To speed up the process so your jQuery code doesn't have to traverse the entire DOM looking for the element you could define the <form> itself with an ID (e.g. <form id="myform">) and do this:
alert( $("#myform input[name=first_name]").val() );
Prior to jQuery 1.3 you could do this:
However the @ syntax was deprecated in jQuery 1.2 and removed in jQuery 1.3, so don't use it when using jQuery 1.2 and up.
- jQuery Form Selectors (Friday, January 1st 2010)
- Clear a form with jQuery (Friday, June 19th 2009)
- How to check and uncheck a checkbox with jQuery (Friday, November 14th 2008)
- How to get and set form element values with jQuery (Thursday, November 13th 2008)