hidden表单值无法重置的缺陷

来源：互联网发布：宝马编程是什么意思编辑：程序博客网时间：2024/06/12 21:48

在项目开发过程中发现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表单进行重置，使其恢复默认值

0 0