1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > form 表单元素重置(reset)解决方案

form 表单元素重置(reset)解决方案

时间:2019-12-01 16:06:17

相关推荐

form 表单元素重置(reset)解决方案

有初始值的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>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。