hidden表单值无法重置的缺陷

在项目开发过程中发现form表单控件中的hidden表单组件无法被form自带的reset函数重置未默认值所以针对hidden组件进行以下测试代码如下 :

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Test</title>
</head>

<body>
    <form id="form1" action="">
        <input id="hidden1" type="hidden" value="DefaultValue">
        <input id="text1" type="text">
        <button  type="button" onclick="changeHiddenValue()">改变hidden表单的值</button>
        <button  type="button" onclick="getHiddenValue()">获取hidden表单的值</button>
        <button  type="button"  onclick="getHiddenValueAttribute()">获取hidden表单中默认的value属性的值</button>
        <button  type="button"  onclick="resetHidden()">重置hidden表单</button>
        <button  type="reset">重置</button>
    </form>
    <script>
        (function(){ 
            getHiddenValue();
        })();

        function changeHiddenValue(){ 
            var text = document.getElementById('text1');
            var hidden = document.getElementById('hidden1');
            hidden.value = text.value
        }
        function getHiddenValue(){ 
            var text = document.getElementById('text1');
            var hidden = document.getElementById('hidden1');
            text.value = hidden.value;
        }
        function resetForm(){ 
            var form = document.getElementById("form1");
            form.reset();
            getHiddenValue();
        }
        function getHiddenValueAttribute(){ 
            var text = document.getElementById('text1');
            var hidden = document.getElementById('hidden1');
            alert(hidden.getAttribute("value"));
            text.value = hidden.getAttribute("value");
        }
    </script>
</body>

</html>

测试结果是，form表单自带的reset方法以及type的reset的button均存在无法重置hidden表单的值的bug；故进行form重置时要对hidden表单进行特殊处理，使其恢复默认值

如何解决这个缺陷

其实可以依赖各种不同的form插件等插件内部的form表单的reset方法其实已经针对这个缺陷进行了一定程度的修复
jquery.form.js是一个全面支持表单的jQuery插件
其中包含了以下方法

  • clearForm(includeHidden)
  • clearFields(includeHidden)
  • clearInputs(includeHidden)

其中内部勉强可以将hidden表单清空,但是依旧无法对hidden表单进行重置，使其恢复默认值

posted @ 2016-09-26 15:37  ~hello ~world  阅读(372)  评论(0)  编辑  收藏  举报