有初始值的form表单在点击默认的Reset按钮时,表单元素并不能清空,而是恢复初始值,相信这并不是我们期望的,本文介绍的是用javascript解决这一问题的方法。
--------------------------------------------------------------
点此浏览示例文件
--------------------------------------------------------------
Javascript:
<script language="JavaScript" type="text/javascript"> <!-- // 说明:有初始值的 form 表单元素重置(reset)解决方案 // 整理: function clearForm(formName) {var formObj = document.forms[formName];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; }} } //--> </script>
示例:
HTML:
<form method="post" action="" name="testForm"><input type="text" value="text" 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('testForm')" /> </form>