From jQuery JavaScript Library
« Back to Attributes
val( )
Get the input value of the first matched element.
A value is returned for all input elements, including selects and textareas. For multiple selects an array of values is returned.
For selects and checkboxes, see the :selected and :checked selectors, for example:
$('select.foo option:selected').val(); // get the value from a dropdown select
$('select.foo').val(); // get the value from a dropdown select even easier
$('input:checkbox:checked').val(); // get the value from a checked checkbox
$('input:radio[name=bar]:checked').val(); // get the value from a set of radio buttons
For older versions of jQuery use the fieldValue function of the Form Plugin. Examples:| Name | Type |
|---|
Get the single value from a single select and an array of values from a multiple select and display their values.
function displayVals() {
var singleValues = $("#single").val();
var multipleValues = $("#multiple").val() || [];
$("p").html("<b>Single:</b> " +
singleValues +
" <b>Multiple:</b> " +
multipleValues.join(", "));
}
$("select").change(displayVals);
displayVals();
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
function displayVals() {
var singleValues = $("#single").val();
var multipleValues = $("#multiple").val() || [];
$("p").html("<b>Single:</b> " +
singleValues +
" <b>Multiple:</b> " +
multipleValues.join(", "));
}
$("select").change(displayVals);
displayVals();
});
</script>
<style>
p { color:red; margin:4px; }
b { color:blue; }
</style>
</head>
<body>
<p></p>
<select id="single">
<option>Single</option>
<option>Single2</option>
</select>
<select id="multiple" multiple="multiple">
<option selected="selected">Multiple</option>
<option>Multiple2</option>
<option selected="selected">Multiple3</option>
</select>
</body>
</html>
Find the value of an input box.
$("input").keyup(function () {
var value = $(this).val();
$("p").text(value);
}).keyup();
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("input").keyup(function () {
var value = $(this).val();
$("p").text(value);
}).keyup();
});
</script>
<style>
p { color:blue; margin:8px; }
</style>
</head>
<body>
<input type="text" value="some text"/>
<p></p>
</body>
</html>
val( val )
Set the value attribute of every matched element.
In jQuery 1.2, this is also able to set the value of select elements, but selecting the appropriate options.
Arguments:| val | String | |
|---|
| The value to set on the matched element. |
Examples:| Name | Type |
|---|
Set the value of an input box.
$("button").click(function () {
var text = $(this).text();
$("input").val(text);
});
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("button").click(function () {
var text = $(this).text();
$("input").val(text);
});
});
</script>
<style>
button { margin:4px; cursor:pointer; }
input { margin:4px; color:blue; }
</style>
</head>
<body>
<div>
<button>Feed</button>
<button>the</button>
<button>Input</button>
</div>
<input type="text" value="click a button" />
</body>
</html>
val( val )
Checks, or selects, all the radio buttons, checkboxes, and select options that match the set of values.
Arguments:| val | Array<String> | |
|---|
| The set of values to check/select. |
Examples:| Name | Type |
|---|
Set a single select and a multiple select .
$("#single").val("Single2");
$("#multiple").val(["Multiple2", "Multiple3"]);
$("input").val(["check1","check2", "radio1" ]);
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("#single").val("Single2");
$("#multiple").val(["Multiple2", "Multiple3"]);
$("input").val(["check1","check2", "radio1" ]);
});
</script>
<style>
body { color:blue; }
</style>
</head>
<body>
<select id="single">
<option>Single</option>
<option>Single2</option>
</select>
<select id="multiple" multiple="multiple">
<option selected="selected">Multiple</option>
<option>Multiple2</option>
<option selected="selected">Multiple3</option>
</select><br/>
<input type="checkbox" name="checkboxname" value="check1"/> check1
<input type="checkbox" name="checkboxname" value="check2"/> check2
<input type="radio" name="r" value="radio1"/> radio1
<input type="radio" name="r" value="radio2"/> radio2
</body>
</html>
