Why does the reset button on html forms not reset hidden fields?

Asked 16/6, 2011 at 6:12 Answered 14/10, 2022 at 15:24

I discovered something surprising:

<html>
<head>
<script type="text/javascript">
function f()
{
document.getElementById("h").value++;
document.getElementById("x").value++;
}
</script>
</head>
<body>

<form>
<input type="hidden" name="hidden" id="h" value="5"/>
<input type="text" id="x" value="5"/>
<input name='clear' type='reset' id='clear' value='Clear'>
</form>

<button type="button" onclick="f()">Increment</button>
<button type="button" onclick="alert(document.getElementById('h').value)">Show hidden</button>

</body>
</html>

Trying this in Firefox 4.0.1, clicking clear always resets the text input to 5, but never resets the hidden field.

I (and others) did not expect this behavior at all: we expected the hidden value to get reset too!

Can anyone point to either documentation or specs that explain why the hidden input is treated differently by the reset button?

Explanations as to why such behavior is desirable are also welcome.

Furtado answered 16/6, 2011 at 6:12 Comment(3)

What's the value of the hidden field after the reset? – Dejecta 16/6, 2011 at 6:22

@Oltarus the same as it was before the reset. E.g. if I click the "Increment" button 5 times it becomes 10, and stays 10 after clicking reset. – Furtado 16/6, 2011 at 6:36

#2560116 w3.org/Bugs/Public/show_bug.cgi?id=8506 – Wilberwilberforce 16/6, 2011 at 6:45

FWIW, I think I can put together the full story from the answers and comments.

Usage rationale: The clear button is intended for clearing user input, and since hidden inputs are not directly accessible by the user, it doesn't make sense to allow the user to reset the hidden input's value.

Documentation and behavior: The bug report that AR pointed out is explicit about what is happening: The hidden field's value's mode is default, as is intended in the specs.
Particularly, this means that changing the value (as in the sample code in the question) changes the default value, and the reset button resets input fields to the default value, hence there is no change.
The behavior for the text input is different (even though its value is also changed programmatically) because its value's mode is not default but value, which means that there is a distinction between the default value of the input and the current value.

Furtado answered 23/6, 2011 at 4:17 Comment(0)

The user can't see or modify the hidden field, therefore it wouldn't make any sense for them to be able to clear it by pressing a button.

Haro answered 16/6, 2011 at 6:16 Comment(0)

When clicking on reset, the browser goes and check the default value in the DOM tree, not in the HTML page.

Your Javascript modifies the DOM. You should try to replace your RESET button with a custom button that calls a Javascript that does two things:

reset normally.
set the hidden field to 5.

Dejecta answered 16/6, 2011 at 6:45 Comment(2)

Interesting, so document.getElementById("x").value++; doesn't update the value in the DOM for the text input. – Furtado 16/6, 2011 at 6:55

@Furtado Hmm, I didn't see that. Forget about the reason, I'm not 100% sure of it. But the solution works. – Dejecta 16/6, 2011 at 7:1

I came here because I bumped into this same issue. However, upon further reflection it is (usually) a very desired behavior.

The hidden field is most commonly used for storing information that was sent by the server when the page loaded.

Although, it can also be used by the script to enter some runtime-calculated entries, resetting hidden fields can cause trouble when not intended.

Weissberg answered 19/3, 2019 at 17:24 Comment(0)

It's a bit of a fudge, but if you want a hidden input that will reset using the formElement.reset() function, give it a display: none style instead.

<input type="text" name="myHiddenInput" value="default value" style="display: none">

Albemarle answered 14/10, 2022 at 15:24 Comment(0)

Recommended topics

Hot tags