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

Canaveral

use this code: var value=$('#txt_Name').val(); You can also set the value using jquery. please look at this post at: coding-issues.blogspot.in/2013/10/… – Nilsanilsen

Answer 1

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

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

Parve

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 

Eluviation

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.

Kenosis

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

Retarded

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

Prostomium

Answer 6

I think this function is missed here in previous answers:

.val( function(index, value) ) 

Russophobe

Answer 7

You can get the value like this:

this['inputname'].value

Where this refers to the form that contains the input.

Polston

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.

Erena

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

Candelabra

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.

Menagerie

Answer 11

Try this. It will work for sure.

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

Homebrew

Answer 12

You can try

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

where the name of the input field is quantity

Fazio

Answer 13

Shortest

txt_name.value

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

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

Initiatory