How do I get the value of a textbox using jQuery
You can use various methods to get current value of an input element in jQuery.
// use the id to select the element.
$("#textfield").val();
// use to select with DOM element.
$("input").val();
// use type="text" with input to select the element
$("input:text").val();
jQuery val() method is used to get the value of an element. This function is used to set or return the value. Return value gives the value attribute of the first element. The val() method is mostly used with HTML form elements.
<input type="text" id="textfield">
txtVal = $("#textfield").val()
Browser View
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
function getValue()
{
txtVal = $("#textfield").val()
alert(txtVal);
}
</script>
</head>
<body>
<input type="text" id="textfield">
<button type="button" id="btn" onclick="getValue()">Get Textbox Value</button>
</body>
</html>
Using JavaScript
If you want to use straight JavaScript to get the value, here is how:
document.getElementById('textfield').value
Using DOM element
The following method shows how you can use this one directly on your input element.
$(document).ready(function(){
$("#textfield").keyup(function(){
alert(this.value);
});
});
Set the value in an input text box | jQuery
You can use various methods to set current value of an input element in jQuery.
// use to add "text content" to the DOM element.
$("input").val("text content");
// use the id to add "text content" to the element.
$("#textfield").val("text content");
// use type="text" with input to add "text content" to the element
$("input:text").val("text content");
Browser View
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">
function setValue()
{
txtVal = document.getElementById('textfield').value
$("#setTextfield").val(txtVal);
}
</script>
</head>
<body>
<input type="text" id="textfield">
<button type="button" id="btn" onclick="setValue()">Set Textbox
Value</button><br><br>
<input type="text" id="setTextfield">
</body>
</html>
Related Topics
- Get Selected Dropdown Value on Change Event | jQuery
- How to submit a form using ajax in jQuery
- How can I get the ID of an element using jQuery
- Open Bootstrap modal window on Button Click Using jQuery
- How to select an element with its name attribute | jQuery
- How to get the data-id attribute using jQuery
- How to disable/enable submit button after clicked | jQuery
- How to replace innerHTML of a div using jQuery
- Change the selected value of a drop-down list using jQuery
- How to get the value of a CheckBox with jQuery
- How to wait 'X' seconds with jQuery?
- How to detect enter key press on keyboard | jQuery
- How to allow numbers only in a Text Box using jQuery.
- How to dynamically create a div in jQuery?