在項目開發過程中發現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表單進行重置，使其恢復默認值
