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

<body>
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">www.dotnetcurry.com<br />
<
input type=checkbox value="DevCurry">www.devcurry.com<br />
<
input type=checkbox value="SqlServerCurry">www.sqlservercurry.com
<br /><br />
Select Box <br />
<
select id="selectbox">
<
option>SelectOne</option>
<
option>SelectTwo</option>
<
option>SelectThree</option>
</
select>
<
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>
</
body>

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:radio").val(["RadioTwo"]);
$("input:checkbox").val(["DotNetCurry", "DevCurry"]);
$("#selectbox").val("SelectTwo");
$("#btnGet").removeAttr('disabled');
});

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() {
chk.push($(this).val());
});

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

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



Will you give this article a +1 ? Thanks in advance




About The Author

Suprotim Agarwal, ASP.NET Architecture MVP works as an Architect Consultant and provides consultancy on how to design and develop Web applications.

Suprotim is also the founder and primary contributor to DevCurry, DotNetCurry and SQLServerCurry. He has also written an EBook 51 Recipes using jQuery with ASP.NET Controls.

Follow him on twitter @suprotimagarwal

comments

2 Responses to "Get and Set Form Element Values using jQuery"
  1. babysitternannylist com said...
    January 18, 2011 at 11:38 PM

    very informative article on jquery

  2. enorl76 said...
    January 11, 2013 at 7:39 AM

    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"])

 

Copyright © 2009-2014 All Rights Reserved for DevCurry.com by Suprotim Agarwal | Terms and Conditions