get value from textbox does not work

Question

For my javascript code I tried the 2 alternative solutions in Get the value in an input text box, answer 2 from RJD22, pls see code below. Option A works fine, but option B doesnt; the console shows 'undefined' when I enter a figure (or even some text).

Any idea why B does not work? I could use option A but I want to validate that the form field has been filled in, and from the val() description (http://api.jquery.com/val/) I cannot see what val() returns when no value has been filled in.

Thnx for any comments in advance.

html code:

</label> <input id="usage" type="text" name="usage">

javascript code:

this.usage = $("#usage").val(); //OPTION A:  WORKS

this.usage = $("#usage").attr("value"); //OPTION B: DOESNT WORK

console.log(this.usage);

score 2 · Accepted Answer · answered Aug 07 '13 at 11:46

2

val() returns '' (empty string) when no value has been entered. You should use val() instead of prop or attr.

Fiddle.

answered Aug 07 '13 at 11:46

Icarus

63,293
14
100
115

score 0 · Answer 2 · edited May 23 '17 at 12:20

0

attr is used to get the actual attribute from the HTML. I think you should use prop.

You can read about the difference between attr and prop here: .prop() vs .attr()

edited May 23 '17 at 12:20

Community

1
1

answered Aug 07 '13 at 11:41

Daniel A. White

187,200
47
362
445

score 0 · Answer 3 · answered Aug 07 '13 at 11:56

You can use the following ways:

var currentValue = $('#usage').prop("value");

or

var currentValue =$('#usage').val();

In attr('value') you're specifically saying you're looking for the value of an attribute named value. It is preferable to use val() as this is jQuery's out of the box feature for extracting the value out of form elements.

get value from textbox does not work

3 Answers3