Get and Set Form Element Values using jQuery

One of the most frequently asked questions about jQuery is to Get or Set values of HTML Form elements. The jQuery val() method lets you get and set values of form elements.

Note: jQuery uses the val() method to both get and set values of form elements. If you pass a new value to the val() method, it sets the value for that element. If you do not pass a value to the val() method, it returns the current value of that element. Let us see some examples:

Assuming you have a HTML page with the following form elements

TextBox <br />
input id="txtBox" type="text" />
br /><br />
Radio Button <br />
input type="radio" name="rad" value="RadioOne"/> RadioOne
<input type="radio" name="rad" value="RadioTwo"/> RadioTwo
<br /><br />
Check Box <br />
input type=checkbox value="DotNetCurry"><br />
input type=checkbox value="DevCurry"><br />
input type=checkbox value="SqlServerCurry">
<br /><br />
Select Box <br />
select id="selectbox">
br /><br /><br />
input id="btnSet" type="button" value="Set Values" />
input id="btnGet" type="button" value="Get Values"
disabled="disabled" />

p id="para"></p>

As you can see, we have a page with a TextBox, RadioButton, CheckBox and a Select/DropDown. We also have two buttons to Set and Get the values of these form elements.

Set Form Values using jQuery

Use the following code to set form values using jQuery

$("#btnSet").click(function () {
$("#txtBox").val("Some text for TextBox");
$("input:checkbox").val(["DotNetCurry", "DevCurry"]);

The code is self explanatory. We have used the val() method to set values of the TextBox, RadioButton, CheckBox and Select respectively. Observe that we have checked two out of three checkboxes.

Get Form Values using jQuery

Use the following code to get form values using jQuery

$("#btnGet").click(function () {
// first get the multiple selected checkbox items
var chk = [];
$("input:checkbox:checked").each(function() {

$("#txtBox").val() + "<br/>" +
$("input:radio[name=rad]:checked").val() + "<br/>" +
chk.join(",") + "<br/>" +

As you can see, we have used the val() method to get values from the TextBox, RadioButton, CheckBox and Select/DropDown respectively. The values are printed in a paragraph(para).

Note: In case of the CheckBox, since there are multiple checked checkboxes, we are looping through all checkboxes, pushing the value into an array(chk) and then using the join method of the array, to have a separated string of values.

Stage 1: When the page loads

Stage 2: When the ‘Set Values’ button is clicked

Stage 3: When the ‘Get Values’ button is clicked

See a Live Demo

If you liked this article, there are plenty of other jQuery Tips here

About The Author

Suprotim Agarwal
Suprotim Agarwal, Developer Technologies MVP (Microsoft Most Valuable Professional) is the founder and contributor for DevCurry, DotNetCurry and SQLServerCurry. He is the Chief Editor of a Developer Magazine called DNC Magazine. He has also authored two Books - 51 Recipes using jQuery with ASP.NET Controls. and The Absolutely Awesome jQuery CookBook.

Follow him on twitter @suprotimagarwal.


babysitternannylist com said...

very informative article on jquery

enorl76 said...

very informative, however a bit simplistic with the radios.

you'd need to show how to deal with multiple radio groups, i'm assuming by using $("input:radio[name='rad']").val(["RadioTwo"])

Unknown said...

Hi, The information given here is very useful. I could get the value of a radio button from URL to my page, but one problem is as we are not using id of the button, how to differentiate two set of radio button. i.e at a time two radio buttons from different options should get selected. Please help