jQuery val() function is used to get the current value of the first element in the set of matched elements or set the value of every matched element.
Try it Yourself - Copy paste code in Online HTML Editor to see the result
Try it Yourself - Copy paste code in Online HTML Editor to see the result
Try it Yourself - Copy paste code in Online HTML Editor to see the result
Try it Yourself - Copy paste code in Online HTML Editor to see the result
Example 1
Get the single value from a single select and an array of values from a multiple select and display their values.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>val demo</title>
<style>
p {
color: red;
margin: 4px;
}
b {
color: blue;
}
</style>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</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>
<script>
function displayVals() {
var singleValues = $("#single").val();
var multipleValues = $("#multiple").val() || [];
// When using jQuery 3:
// var multipleValues = $( "#multiple" ).val();
$("p").html("<b>Single:</b> " + singleValues +
" <b>Multiple:</b> " + multipleValues.join(", "));
}
$("select").change(displayVals);
displayVals();
</script>
</body>
</html>
Example 2
Find the value of an input box.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>val demo</title>
<style>
p {
color: blue;
margin: 8px;
}
</style>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
<input type="text" value="some text">
<p></p>
<script>
$("input")
.keyup(function() {
var value = $(this).val();
$("p").text(value);
})
.keyup();
</script>
</body>
</html>
Example 3 - Set the value of an input box
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>val demo</title>
<style>
button {
margin: 4px;
cursor: pointer;
}
input {
margin: 4px;
color: blue;
}
</style>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
<div>
<button>Feed</button>
<button>the</button>
<button>Input</button>
</div>
<input type="text" value="click a button">
<script>
$("button").click(function() {
var text = $(this).text();
$("input").val(text);
});
</script>
</body>
</html>
Example 4
Set a single select, a multiple select, checkboxes and a radio button:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>val demo</title>
<style>
body {
color: blue;
}
</style>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</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
<script>
$("#single").val("Single2");
$("#multiple").val(["Multiple2", "Multiple3"]);
$("input").val(["check1", "check2", "radio1"]);
</script>
</body>
</html>
Comments
Post a Comment