上次遇到要將有數據的表單實現重置功能，在網上找了好久才找到一個，也不知道是那位仁兄的了，考慮到可能比較難找，這里貼出來供大家參考，也方便自己復習。
下面是JS代碼：
function clearForm() {
var formObj = document.forms[0];
var formEl = formObj.elements;
for (var i=0; i<formEl.length; i++)
{
var element = formEl[i];
if (element.type == 'submit') { continue; }
if (element.type == 'reset') { continue; }
if (element.type == 'button') { continue; }
if (element.type == 'hidden') { continue; }
if (element.type == 'text') { element.value = ''; }
if (element.type == 'textarea') { element.value = ''; }
if (element.type == 'checkbox') { element.checked = false; }
if (element.type == 'radio') { element.checked = false; }
if (element.type == 'select-multiple') { element.selectedIndex = -1; }
if (element.type == 'select-one') { element.selectedIndex = -1; }
}
}
接下來是form：
<form method="post" action="">
<input type="text" value="解決方案" size="30" /> <br />
<textarea name="" rows="3" cols="30">textarea</textarea> <br />
a<input type="checkBox" name="a" value="a" />
b<input type="checkBox" name="a" value="b" checked="checked" />
c<input type="checkBox" name="a" value="c" checked="checked" />
d<input type="checkBox" name="a" value="d" />
e<input type="checkBox" name="a" value="e" /> <br />
2<input type="radio" name="b" value="2" />
3<input type="radio" name="b" value="3" checked="checked" /><br />
test1:<select name="" multiple="multiple">
<option value="11111111">11111111</option>
<option value="22222222" selected="selected">22222222</option>
<option value="33333333" selected="selected">33333333</option>
<option value="44444444">44444444</option>
<option value="55555555">55555555</option>
</select>
<br /><br />
test2:<select name="">
<option value="11">11</option>
<option selected="selected">22</option>
<option value="33">33</option>
<option value="44">44</option>
<option value="55">55</option>
</select>
<br /><br />
<input type="submit" value="Submit" />
<input type="reset" value="Reset" />
<input type="button" value="Button" />
<input type="button" value="Javascript Clear" onclick="clearForm()" />
</form>
試試吧，讓我們一起來感謝那位仁兄！！
posted on 2008-11-06 12:56
老丁 閱讀(903)
評論(0) 編輯 收藏 所屬分類:
js相關