2

If I have a text input and have set a default value in the HTML, is there anyway to access the original value after jquery has changed the current value using .val()?

It was my understanding that jQuery should be changing the value property and not the value attribute?

Edit: Note I'm not asking how I could store the default value to retrieve it later (e.g. in data or in a var) I'm interested in why jQuery is modifying the attribute of the input field (and in turn the defaultValue) and not just the property.

For this example:

<input id="me" type="hidden" value="starting value" />

<script>
var $field = $('#me');
console.log($field.val());
console.log($field.prop('defaultValue'));
console.log($field.val('new value'));
console.log($field.val());
console.log($field.prop('defaultValue'));
console.log($field.attr('value'));
console.log($field.prop('value'));
</script>

We see:

starting value
starting value
[input#me, context: document, selector: "#me", jquery: "2.1.0", constructor: function, toArray: function…]
new value
new value
new value
new value

Fiddle:

http://jsfiddle.net/jLsqmxg7/1/

Pez Cuckow
  • 14,048
  • 16
  • 80
  • 130
  • 1
    You could just save the default value as a variable before you change it. – NinjaBearMonkey Nov 07 '14 at 15:36
  • I'm aware that it would be possible to store it, I'm wondering why jQuery behaves in this way and if there's a "jquery" work around. – Pez Cuckow Nov 07 '14 at 15:37
  • 3
    This http://stackoverflow.com/questions/6003819/properties-and-attributes-in-html and this might help you http://stackoverflow.com/questions/5874652/prop-vs-attr/5876747#5876747 – j08691 Nov 07 '14 at 15:39
  • Possibly linked, but they don't explain why the value attribute is being modified in this case rather than the property. If anything, the links reinforce that the .value should be 'new value' and the `.getAttribute('value')` should still be 'starting value' – Pez Cuckow Nov 07 '14 at 15:42
  • I'd love the downvoter to explain how I could make the question clearer! – Pez Cuckow Nov 07 '14 at 15:45
  • 2
    I don't know the answer to your question but I felt it was valid and presented well, and it doesn't seem to have been answered already, so I gave you an upvote. Hope you get an answer from someone more familiar with jQuery. – lukevp Nov 07 '14 at 15:49
  • 1
    I think this is already answered here: http://stackoverflow.com/questions/5874652/prop-vs-attr Specifically: Where both a property and an attribute with the same name exists, usually updating one will update the other, but this is not the case for certain attributes of inputs, such as value and checked: for these attributes, the property always represents the current state while the attribute (except in old versions of IE) corresponds to the default value/checkedness of the input (reflected in the defaultValue / defaultChecked property). – Kolban Nov 07 '14 at 16:14

1 Answers1

2

jQuery "val" setter always change both the attribute and the property. They do this to not confuse the developer with a ambiguous behavior. If you really want to change only the property and let the tag attribute with the same value do this:

var $input = $("<input>", {value: 'original'}); // Using the jQuery constructor to create a input :)
$input[0].value = "foo"; // Changing the value property of this HTMLInputElement instance

console.log($input.val()); // foo
console.log($input.prop('value')); // foo
console.log($input.attr('value')); // original

With this, you're changing only the HTMLInputElement value property, not the tag attribute. So, was I say, this turns the code a little confunsing.

Rubens Pinheiro
  • 490
  • 5
  • 11