上次遇到要将有数据的表单实现重置功能,在网上找了好久才找到一个,也不知道是那位仁兄的了,考虑到可能比较难找,这里贴出来供大家参考,也方便自己复习。
下面是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
老丁 阅读(885)
评论(0) 编辑 收藏 所属分类:
js相关