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
Tweet
About The Author
3 comments:
very informative article on jquery
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"])
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
Post a Comment