Advertisement
Advertisement


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" />

2020/06/27
1
1017
6/27/2020 9:44:39 PM

Accepted Answer

//Get
var bla = $('#txt_name').val();

//Set
$('#txt_name').val(bla);
2017/01/31
1667
1/31/2017 8:10:33 AM


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.

2014/12/13

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);
  });
});
2010/11/03

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);
});
2017/07/06

You can get the value like this:

this['inputname'].value

Where this refers to the form that contains the input.


I think this function is missed here in previous answers:

.val( function(index, value) ) 
2020/04/16

Source: https://stackoverflow.com/questions/4088467
Licensed under: CC-BY-SA with attribution
Not affiliated with: Stack Overflow
Email: [email protected]