Get started with jquery

Getting a form value with jQuery

To get a form value with jQuery use the val() function. Let's say we have a form like this, using an id for each form element:

view source print ?

1	<input name="foo" id="foo" type="text">

2

3	<select name="foo" id="bar">

4	<option value="1">one</option>

5	<option value="2">two</option>

6	<option value="3">three</option>

7

</select>

We can display an alert for the values of "foo" and "bar" as easily this:

view source print ?

1	window.alert( $('#foo').val() );

2	window.alert( $('#bar').val() );

If we're using the name only and not specifying an id, the jQuery to get the form values would be this:

view source print ?

1	window.alert( $('[name=foo]').val() );

2	window.alert( $('[name=bar]').val() );

If you have a group of radio buttons and want to get the selected button, the code is slightly different because they all have the same name. Using the above code examples will show the value for the first radio button on the form with that name. To find out the value of the checked one, do this instead:

HTML:

view source print ?

1	<input type="radio" name="baz" value="x">

2	<input type="radio" name="baz" value="y">

3	<input type="radio" name="baz" value="z">

jQuery:

view source print ?

1	window.alert($('input[name=baz]:checked').val());

Setting a form value with jQuery

You can set the form values with jQuery using the same val() function but passing it a new value instead. Using the same example forms above, you'd do this for the text input and select box:

view source print ?

1	$('#foo').val('this is some example text');

2	$('#bar').val('3');

3

OR

4	$('[name=foo]').val('this is some example text');

5	$('[name=bar]').val('3');

Using the above for a radio button will change the actual value of the radio button rather than changing the one that is selected. To change the radio button that is selected you'd do this:

view source print ?

1	$('input[name="baz"]')[0].checked = true;

[0] would set the first one checked, [1] would set the second one checked and so on.

Working demos

For working demos of the above examples (and more) please see my demos for getting and setting form values with jQuery, how to check and uncheck a checkbox with jQuery, and clear a form with jQuery posts.

Related posts:

• Demos for getting and setting form values with jQuery (Thursday, April 22nd 2010)
• Clear a form with jQuery (Friday, June 19th 2009)
• Dynamically get and set an elements content with jQuery (Sunday, January 11th 2009)
• Adding, removing and checking if an element has a CSS class with jQuery (Tuesday, December 16th 2008)
• How to check and uncheck a checkbox with jQuery (Friday, November 14th 2008)
• Clearing the default value of text input with Javascript (Tuesday, June 17th 2008)