jQuery .val() gets and sets value
Syntax for .val() (getter)
.val()
gets the current value of the first element in the set of matched elements.
The return value a string containing the value of the element, or an array of strings if the element can have multiple values.
Syntax .val() (setter)
.val() setter sets the value of each element in the set of matched elements.
.val(value)
value: A string of text or an array of strings to set as the value property of each matched element.val(function)
function: A function returning the value to set
Its return value is the jQuery object, for chaining purposes.
Set value for form input element
The following code sets value for a form input element.
<html>
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){<!-- w w w. jav a2 s. c om-->
$("label + input").css("color", "blue").val("Labeled!")
});
</script>
</head>
<body>
<body>
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Age:</label>
<input name="age" />
</fieldset>
</form>
</body>
</html>
Get value
The following code uses
.val() function to get the
input value of the first matched element
<html>
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){<!-- www . j a v a 2 s .c om-->
function displayVals() {
var singleValues = $("#single").val();
$("p").html(singleValues);
}
$("select").change(displayVals);
});
</script>
</head>
<body>
<body>
<p></p>
<select id="single">
<option>Single</option>
<option>java2s.com</option>
</select>
</body>
</html>
Set value for input elements
The following code sets value for text field.
<html>
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){<!--from w ww .j av a2 s .com-->
$("input").removeAttr("disabled").focus().val("editable now");
});
</script>
</head>
<body>
<body>
<button>Enable</button>
<input type="text" disabled="disabled" value="data"/>
</body>
</html>
Set the value attribute
We can use .val() to set the
value attribute of every matched element.
<html>
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){<!-- www . ja v a2 s . co m-->
$("button").click(function () {
var text = $(this).text();
$("input").val(text);
});
});
</script>
</head>
<body>
<body>
Press button to fill the text box.
<div>
<button>A</button>
<button>B</button>
<button>C</button>
</div>
<input type="text" value="click a button" />
</body>
</html>
Set multiple value for select
<!--from w w w . j av a 2s.c om-->
<html>
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#multiple").val(["Multiple2", "Multiple3"]);
});
</script>
</head>
<body>
<body>
<select id="multiple" multiple="multiple">
<option>Multiple</option>
<option>Multiple2</option>
<option>Multiple3</option>
</select>
</body>
</html>
Set value to form input field
<html>
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){<!-- w w w .j av a 2 s .c o m-->
$("label + input").css("color", "red").val("value")
});
</script>
</head>
<body>
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Address:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
</body>
</html>
Set value for form elements
checks, or selects, all the radio buttons, checkboxes, and select options
<html>
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){<!--from w w w.j a v a 2 s .com-->
$("#single").val("Single2");
$("#multiple").val(["Multiple2", "Multiple3"]);
$("input").val(["check1","check2", "radio1" ]);
});
</script>
<style>
.selected { color:red; }
.highlight { background:yellow; }
</style>
</head>
<body>
<body>
<select id="single">
<option>1</option>
<option>2</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>
Get input text from Text Box
<html>
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){<!-- w w w . java2s . c o m-->
alert($("input").val());
});
</script>
</head>
<body>
<body>
<button>Do</button>
<form>
<input type="text" />
</form>
</body>
</html>