Get value of an input text box with JavaScript/jQuery

This post will discuss how to get the value of an input text box in JavaScript and jQuery.

1. Getting the value of an input text box with JavaScript

We can get or set the value of the input text box by using its value property. The value property represents the current value of the input text box. The complete code for getting the value of an input text box with JavaScript looks like this:

JS

document.getElementById('submit').onclick = function() {

var value = document.getElementById('name').value;

alert(value);

}

HTML

</div>

<button id="submit">Get Value</button>

Edit in JSFiddle

2. Getting the value of an input text box with jQuery

We can get or set the value of the input text box by using its val() method. The val() method gets or sets the value of an element. The val() method can take no arguments, in which case it returns the current value of the first element in the set. Alternatively, it can take a value as an argument, in which case it sets the value of each element in the set to that value. The complete code for getting the value of an input text box with jQuery looks like this:

JS

$(document).ready(function() {

$('#submit').click(function() {

var value = $('#name').val();

alert(value);

})

});

HTML

</div>

<button id="submit">Get Value</button>

Edit in JSFiddle

Note, don’t use the .attr() method to get the text box value as .attr('value') returns the value of the text box from the DOM during page load, but not the real-time value of the text box when the current value is changed.

That’s all about getting the value of an input text box in JavaScript and jQuery.

Get value of an input text box with JavaScript/jQuery

1. Getting the value of an input text box with JavaScript

JS

HTML

2. Getting the value of an input text box with jQuery

JS

HTML

Share this: