jQuery, detecting actual input text value

Question

I'm running into an issue where the value grabbed by jQuery, and what's actually in the input text field, are different.

A form with a variety of inputs are populated when the page loads with information from our database. Thus, the input text fields all have a value.

When the form is submitted, I have a function that runs first to check for text inputs. This is a portion of that function:

$("form#accountSettingsForm input").each(function(){
var input = $(this);
var value = input.attr("value");
}

Lets say the input value is 12 when the page had initially loaded. If I delete the 12 in the textbox and leave the field blank, and submit the form, the above code retrieved "value" is still 12, not empty. How can I detect what's actually the textbox's value? Thanks in advance.

"Wall of text" questions tend to get ignored. I'd suggest attempting to state your question clearly, and removing as much non-essential info as possible. As it stands it's unclear what you're asking. — Madbreaks, Jul 14 '16 at 20:09
`$(this).val()` works, see https://jsfiddle.net/barmar/4t9Lqh53/ — Barmar, Jul 14 '16 at 20:12
See https://jsfiddle.net/barmar/4t9Lqh53/1/ for an example using the `.each()` loop to get all the inputs. — Barmar, Jul 14 '16 at 20:16
Others have already stated using `$(this).val` and that should do the job. What i'm suggesting is to practice some debugging and narrow down the problem. Go ahead and add an "id" attribute to the input that is causing the bug and doing some debugging such as `$("#my_input").val()`. This way, it eliminates any other sorts of problems such as multiple inputs, etc... — Phu Phan, Jul 14 '16 at 20:20
`input.attr('value')` is fundamentally different than `input.prop('value')` or `input.val()`. It's the same reason as [this answer I gave here](http://stackoverflow.com/a/38270495/1541563). It's about the difference between an element attribute and a property. — Patrick Roberts, Jul 14 '16 at 20:31

score 1 · Accepted Answer · answered Jul 14 '16 at 20:20

This is a situation where there's a difference between the value attribute and the value property. The attribute comes from the HTML, the property is from the dynamic state of the DOM. To get the current value of an input after the user has modified it, use the jQuery .val() method.

$("#accountSettingsForm").submit(function() {
  $(this).find("input").each(function() {
    var input = $(this);
    var value = input.val();
    console.log(this.name + " = " + value);
  });
  return false;
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="accountSettingsForm">
  Input 1:
  <input name="field1" type="text">
  <br>Input 2:
  <input name="field2" type="text">
  <br>
  <input name="submit" type="submit">
</form>

I knew it was something simple. Thanks to you and everyone else, but especially for clarifying about the attribute and property. — Pete_1, Jul 14 '16 at 20:30

score 1 · Answer 2 · edited May 23 '17 at 11:51

The following appears to work well. If you want to regularly remember/store the value, register for the on('input') event. With this, you get an event every time the user types in the textbox:

$("#accountSettingsForm :input").on('input', function() {        
    console.log($(this).val());
});

As far as I can tell, the $(this).val() method of access works fine.

Here's a JSFiddle: https://jsfiddle.net/uz8k7rjp/

And the original post where I got this method: JQuery: detect change in input field

jQuery, detecting actual input text value

2 Answers2