Assume you have input element:

<input id="aaa" type="text" value="unchanged" />

Then launch js script:

var e = document.getElementById("aaa");
e.value = "changed";
alert(e.defaultValue + "/" + e.value);

Result will be "unchanged/changed". Unfortunately, when your input element is hidden:

<input id="aaa" type="hidden" value="unchanged" />

...the same js script seem not to be working any more. Result is "changed/changed". Is this a proper way? If so, why only hidden form elements act different?

Assume you have input element:

<input id="aaa" type="text" value="unchanged" />

Then launch js script:

var e = document.getElementById("aaa");
e.value = "changed";
alert(e.defaultValue + "/" + e.value);

Result will be "unchanged/changed". Unfortunately, when your input element is hidden:

<input id="aaa" type="hidden" value="unchanged" />

...the same js script seem not to be working any more. Result is "changed/changed". Is this a proper way? If so, why only hidden form elements act different?

• javascript
• dom

• What browser are you working with? – Daniel A. White Commented Mar 16, 2011 at 0:29
• from my testing, @Pointy answer sums up the situation correctly – cc young Commented Aug 30, 2011 at 7:28

2 Answers 2

The "defaultValue" property is only maintained in a way you apparently expect for "text", "file", and "password" fields.

Here is the relevant portion of the DOM spec.

I suspect the reason for this is that user activity on its own cannot change the value of hidden elements. If you want to preserve the initial values, run something at "load" or "ready" to stash the value somewhere.

For hidden input elements, defaultValue isn't actually implemented. The reason why you get the same result ast .value is because the browser your using is just defaulting.

See here for a discussion of this with Firefox.