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

Answer 1

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

//Set
$('#txt_name').val(bla);

Answer 2

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 

Answer 3

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.

Answer 4

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);
  });
});

Answer 5

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);
});

Answer 6

I think this function is missed here in previous answers:

.val( function(index, value) ) 

Answer 7

You can get the value like this:

this['inputname'].value

Where this refers to the form that contains the input.

Answer 8

To get the textbox value, you can use the jQuery val() function.

For example,

$('input:textbox').val() – Get textbox value.

$('input:textbox').val("new text message") – Set the textbox value.

Answer 9

You can simply set the value in text box.

First, you get the value like

var getValue = $('#txt_name').val();

After getting a value set in input like

$('#txt_name').val(getValue);

Answer 10

For those who just like me are newbies in JS and getting undefined instead of text value make sure that your id doesn't contain invalid characters.

Answer 11

Try this. It will work for sure.

var userInput = $('#txt_name').attr('value')

Answer 12

You can try

let quantity = $('input[name = quantity]').val()

where the name of the input field is quantity

Answer 13

Shortest

txt_name.value

txt_name.onkeyup = e=> alert(txt_name.value);

<input type="text" id="txt_name" />