1128

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

1

13 Answers 13

1854
//Get var bla = $('#txt_name').val(); //Set $('#txt_name').val(bla); 
Sign up to request clarification or add additional context in comments.

Comments

626

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 

Comments

97

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.

Comments

45

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

Comments

25

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

Comments

16

I think this function is missed here in previous answers:

.val( function(index, value) ) 

Comments

15

You can get the value like this:

this['inputname'].value 

Where this refers to the form that contains the input.

Comments

10

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.

Comments

5

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

Comments

3

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.

Comments

3

Try this. It will work for sure.

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

Comments

0

You can try

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

where the name of the input field is quantity

Comments

-1

Shortest

txt_name.value 

txt_name.onkeyup = e=> alert(txt_name.value);
<input type="text" id="txt_name" />

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.