admin管理员组

文章数量:1022712

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>
  • javascript
  • html
Share Improve this question edited Jan 23, 2014 at 14:54 jennous 539 bronze badges asked Jan 23, 2014 at 14:43 h9lpq0uh9lpq0u 2253 silver badges5 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 2

The 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 } );
    } );
} );

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>
  • javascript
  • html
Share Improve this question edited Jan 23, 2014 at 14:54 jennous 539 bronze badges asked Jan 23, 2014 at 14:43 h9lpq0uh9lpq0u 2253 silver badges5 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 2

The 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 } );
    } );
} );

本文标签： javascriptHTML Form reset does not restore disabled propertiesStack Overflow

版权声明：本文标题：javascript - HTML Form reset does not restore disabled properties - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1745514512a2153977.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。