13

OOPS, Since the "name" field was at the top it was the one I was testing with, and it turned out that was the only one with an issue. Must have something to do with using "name" as the name...

For some reason the input tags in my form are not updating the value attribute when they are changed view the actual element (not JavaScript). The data posted to the server is the original value of the "value" attribute, not the text in the textbox.

The textareas in the form work fine, and I have checked javascript fired "onchange" and I can't find any... Help please!

Here is the HTML:

<form action="" method="post">
<div id="group-1" class="group case">
  <a class="heading open">heading</a>
  <input name="editform[0][class]" value="case" type="hidden">
  <input name="editform[0][id]" value="2" type="hidden">
  <div class="field">
    <label>Name</label>
    <input class="text" name="editform[0][name]" value="Mike Escarcaga" type="text" >
  </div>
  <div class="field">
    <label>Title</label>
    <input class="text" name="editform[0][title]" value="General Manager" type="text" >
  </div>
  <!-- repeated for each field -->
  <div class="field" >
    <label >Text</label>
    <textarea class="ltext" name="editform[0][text]" >
      Blah HTML, and more blah...
    </textarea>
  </div>
</div>
<!-- repeated for each group in the form (editform[1], editform[2], etc.) -->
</form>
Spencer Alger
  • 918
  • 2
  • 9
  • 22
  • 1
    Can you post your Javascript code? – Vivin Paliath Nov 02 '11 at 19:13
  • Incorrectly tagged with javascript – Spencer Alger Nov 02 '11 at 19:17
  • Do you mean in the values aren't changing in your 'view source' view? Or you get the old value out of the inputs after changing them via javascript? – Marc B Nov 02 '11 at 19:20
  • I created a [fiddle for this](http://jsfiddle.net/4VVLD/) - what I see in Firefox on Linux, using Firebug, is the `defaultValue` never changes (as expected) but the `value` does change - however in Firebug I must select a different node then select the input field node again to see the changed value. (testing with the "Name" field) Can't test with a post to the server, of course, without setting a lot more up. – Stephen P Nov 02 '11 at 19:22
  • @MarcB, I was using Chrome's inspector, which is a lot like Firebug. I get the old values in the post after changing them with my keyboard and the html textbox. – Spencer Alger Nov 02 '11 at 19:26
  • @StephenP: weird I see the same thing in my form with Chrome, the javascript element.value property is correct... wtf? – Spencer Alger Nov 02 '11 at 19:28

3 Answers3

29

The value attribute contains the default value for an input, not the live value.

The DOM value property contains a live value.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • 1
    Hmm, okay, but the value in the text box is not what's getting sent in the post. The value of the attribute "value" is. – Spencer Alger Nov 02 '11 at 19:21
  • 8
    +1 because it lead me to the answer, and in case anyone else has the problem I did, I was using the jQuery "attr()" method to get the value, and it was always the original/default. I needed to use the "prop()" method to get the active DOM value. – Sako73 Apr 04 '13 at 13:45
  • 4
    Or the `.val()` method, which I tend to favour for text inputs. – Rory O'Keeffe Jul 01 '15 at 15:01
  • 3
    For me .val() is also giving me the initial value and .prop('value') is also giving me the initial value. Anyone know why is that? The only thing different in my case is that the textbox is in modal popup 'Y', and 'Y' is again in modal popup 'X'. And the javascript code is called on a button click which is in 'Y' – Arth Thakkar Aug 20 '19 at 09:41
8

I agree with @Quentin. The DOM contains the live value and the HMTL input contains the default value for an input. To change the default value of the input, set an element's defaultValue property:

document.getElementById("myText").defaultValue = "Goofy";
ggorlen
  • 44,755
  • 7
  • 76
  • 106
Mr Talha
  • 705
  • 7
  • 13
  • It seems this allows to update both the live value and the value attribute at the same time. Can this be used as a replacement to `el.value = 'foo'` in such case or is there any issue doing that? (for instance, it is handy if you want a mutation observer to intercept value change) – Max Jun 01 '23 at 11:33
0

Note that the browser parses the HTML tag element and creates a corresponding DOM node object.

  • "Initial/starting/default value" of input:
    • ONLY the initial value of value attribute of input's HTML tag element.
    • defaultValue property of input's DOM node object.
  • "Current value" of input:
    • value attribute of input's HTML tag element
    • value property of input's DOM node object.

See also: What is the difference between properties and attributes in HTML?

user2340939
  • 1,791
  • 2
  • 17
  • 44