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
– Madbreaks, Commented Jul 14, 2016 at 20:09
See jsfiddle.net/barmar/4t9Lqh53/1 for an example using the .each() loop to get all the inputs. — Barmar
– Barmar, Commented Jul 14, 2016 at 20:16

Barmar · Accepted Answer · 2016-07-14 20:20:46Z

1

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>

answered Jul 14, 2016 at 20:20

Barmar

789k57 gold badges555 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Pete_1 Over a year ago

I knew it was something simple. Thanks to you and everyone else, but especially for clarifying about the attribute and property.

Community · Accepted Answer · 2017-05-23 11:51:26Z

1

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

edited May 23, 2017 at 11:51

CommunityBot

11 silver badge

answered Jul 14, 2016 at 20:27

John Alexander

463 bronze badges

Collectives™ on Stack Overflow

jQuery, detecting actual input text value

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related