Get the value in an input text box
Get the value in an input text box
Question
What are the ways to get and render an input value using jQuery?
Here is one:
$(document).ready(function() {
$("#txt_name").keyup(function() {
alert($(this).val());
});
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<input type="text" id="txt_name" />Accepted Answer
//Get
var bla = $('#txt_name').val();
//Set
$('#txt_name').val(bla);
Popular Answer
You can only select a value with the following two ways:
// First way to get a value
value = $("#txt_name").val();
// Second way to get a value
value = $("#txt_name").attr('value');
If you want to use straight JavaScript to get the value, here is how:
document.getElementById('txt_name').value
Read more... Read less...
There is one important thing to mention:
$("#txt_name").val();
will return the current real value of a text field, for example if the user typed something there after a page load.
But:
$("#txt_name").attr('value')
will return value from DOM/HTML.
You can get the value attribute directly since you know it's an <input> element, but your current usage of .val() is already the current one.
For the above, just use .value on the DOM element directly, like this:
$(document).ready(function(){
$("#txt_name").keyup(function(){
alert(this.value);
});
});
You have to use various ways to get current value of an input element.
METHOD - 1
If you want to use a simple .val(), try this:
<input type="text" id="txt_name" />
Get values from Input
// use to select with DOM element.
$("input").val();
// use the id to select the element.
$("#txt_name").val();
// use type="text" with input to select the element
$("input:text").val();
Set value to Input
// use to add "text content" to the DOM element.
$("input").val("text content");
// use the id to add "text content" to the element.
$("#txt_name").val("text content");
// use type="text" with input to add "text content" to the element
$("input:text").val("text content");
METHOD - 2
Use .attr() to get the content.
<input type="text" id="txt_name" value="" />
I just add one attribute to the input field. value="" attribute is the one who carry the text content that we entered in input field.
$("input").attr("value");
METHOD - 3
you can use this one directly on your input element.
$("input").keyup(function(){
alert(this.value);
});
I think this function is missed here in previous answers:
.val( function(index, value) )
You can get the value like this:
this['inputname'].value
Where this refers to the form that contains the input.