When some elements in a HTML form are initially disabled, but get enabled and their value changed afterwards, if user clicks the form's reset button, the values of those elements get restored to their initial values, but they're still enabled although they were disabled originally. Why is it so, and how can I ensure that form reset resets those elements to be disabled?
JSfiddle here: /
Code example here:
<html>
<head>
<script>
function enableDisable()
{
var bo1 = document.getElementById("a");
var bo2 = document.getElementById("b");
if (bo1.value == 1)
bo2.disabled = true;
else
bo2.disabled = false;
}
</script>
</head>
<body>
<form name="form" action="dummy">
<select id="a" onchange="enableDisable();">
<option value="1">1</option>
<option value="2">2</option>
</select>
<select disabled id="b">
<option value="1">1</option>
<option value="2">2</option>
</select>
<input type="submit" value="submit" />
<input type="reset" value="reset" />
</form>
</body>
</html>
When some elements in a HTML form are initially disabled, but get enabled and their value changed afterwards, if user clicks the form's reset button, the values of those elements get restored to their initial values, but they're still enabled although they were disabled originally. Why is it so, and how can I ensure that form reset resets those elements to be disabled?
JSfiddle here: http://jsfiddle/d872N/
Code example here:
<html>
<head>
<script>
function enableDisable()
{
var bo1 = document.getElementById("a");
var bo2 = document.getElementById("b");
if (bo1.value == 1)
bo2.disabled = true;
else
bo2.disabled = false;
}
</script>
</head>
<body>
<form name="form" action="dummy">
<select id="a" onchange="enableDisable();">
<option value="1">1</option>
<option value="2">2</option>
</select>
<select disabled id="b">
<option value="1">1</option>
<option value="2">2</option>
</select>
<input type="submit" value="submit" />
<input type="reset" value="reset" />
</form>
</body>
</html>
2 Answers
Reset to default 2The reset() method only restores a form elements default values and will not change the disabled state.
Read some documentation here https://developer.mozilla/en-US/docs/Web/API/HTMLFormElement.reset
I would suggest that you need to write your own reset method which calls HTMLFormElement.reset() and then resets the disabled state.
e.g.
New JavaScript code:
var hardReset = function(){
document.forms["form"].reset();
document.getElementById("b").setAttribute("disabled","disabled");
};
New HTML:
<input type="button" value="reset" onclick="hardReset();" />
Please see an update of your jsFiddle
A form element's disabled status, like other form-only attributes such as pattern, required, etc, is not part of the form's input data, which is the only aspect of form state which the reset method affects.
I came up against a similar problem a while back and decided to build a tool which would save states of DOM elements to revert them at will, thus keeping the DOM 'versioned'.
It's called a jQuery plugin called reverter and may help you out:
$( function form(){
// Save state on load
var initial = $( 'form *' ).mit( { attributes : 'disabled' } );
$( 'form' ).on( 'reset', function(){
// Revert it on reset!
$( 'form *' ).revert( { changeset : initial } );
} );
} );