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