在web项目的开发中,查询功能不可或缺。在查询表单中一般都会有两个按钮,一个是用来提交表单的查询按钮,一个是清除查询条件的清除按钮。如果查询条件较少,自己手动写个清除表单各控件输入值的js方法也未为不可,但如果查询条件多大十几个,清除各类控件输入值的代码也几乎千篇一律,看起来未免累赘,所以如果有一个公用方法供调用当然最好。在此需注意的一点是,重置按钮与清除按钮的功能是截然不同的,重置按钮是把表单中各控件的值设为默认值,而请除按钮是把值清空。
1. 因为表单中各元素值的清除方法略有差异,所以必须通过元素的type属性来获取元素的类型
<form name="userForm" method="post">
<input type="text" name="username"/>
<input type="password" name="passwd"/>
<input type="radio" name="sex" value="0"/>
<input type="radio" name="sex" value="1"/>
<input type="radio" name="group" value="js"/>
<input type="radio" name="group" value="java"/>
<input type="checkbox" name="apple" value="apple1"/>
<input type="checkbox" name="apple" value="apple2"/>
<input type="checkbox" name="banana" value="banana"/>
<input type="checkbox" name="egg" value="egg"/>
<select name="country">
<option value="">请选择</option>
<option value="cn">中国</option>
<option value="en">英国</option>
<option value="us">美国</option>
</select>
<select name="loveGirl" multiple="true">
<option value="">请选择</option>
<option value="pjl">潘金莲</option>
<option value="dj">妲己</option>
<option value="cx">慈禧</option>
</select>
<input type="file" name="uploadFile"/>
<textarea name="content" rows="4" cols="20" ></textarea>
<input type="reset" value="重置"/>
<input type="button" name="clear" value="清除" onclick="clearForm('userForm');return false;"/>
</form>
<script type="text/javascript">
function clearForm(form)
{
var formObj = document.getElementsByName(form)[0];
if(formObj == undefined)
{
return;
}
for(var i=0; i<formObj.elements.length; i++)
{
if(formObj.elements[i].type == "text")
{
formObj.elements[i].value = "";
}
else if(formObj.elements[i].type == "password")
{
formObj.elements[i].value = "";
}
else if(formObj.elements[i].type == "radio")
{
formObj.elements[i].checked = false;
}
else if(formObj.elements[i].type == "checkbox")
{
formObj.elements[i].checked = false;
}
else if(formObj.elements[i].type == "select-one")
{
formObj.elements[i].options[0].selected = true;
}
else if(formObj.elements[i].type == "select-multiple")
{
for(var j = 0; j < formObj.elements[i].options.length; j++)
{
formObj.elements[i].options[j].selected = false;
}
}
else if(formObj.elements[i].type == "file")
{
//formObj.elements[i].select();
//document.selection.clear();
// for IE, Opera, Safari, Chrome
var file = formObj.elements[i];
if (file.outerHTML) {
file.outerHTML = file.outerHTML;
} else {
file.value = ""; // FF(包括3.5)
}
}
else if(formObj.elements[i].type == "textarea")
{
formObj.elements[i].value = "";
}
}
}
</script>
2. 在清除表单中file元素的值时用到了outerHMTL属性,其用法同我们经常用到的innerHTML类似,它们之间的区别如下:
innerHTML 设置或获取位于对象起始和结束标签内的 HTML
outerHTML 设置或获取对象及其内容的 HTML 形式
innerText 设置或获取位于对象起始和结束标签内的文本
outerText 设置(包括标签)或获取(不包括标签)对象的文本
3. 最后奉上纳兰性德的一首词-画堂春
<div id="一生一代一双人,争教两处销魂。相思相望不相亲,天为谁春">
<div id="浆向蓝桥易乞,药成碧海难奔。若容相访饮牛津,相对忘贫">
分享到:
相关推荐
js实现form表单自动回显功能
javascript实现仿京东注册表单,能够实现表单验证,正则匹配,表单验证追踪,随机验证码生成,密码强弱校验等功能。
如下所示: form表单ID:postform 设置表单请求url document.postform.action = SaveReturnInfo...以上就是小编为大家带来的js 提交form表单和设置form表单请求路径的实现方法全部内容了,希望大家多多支持软件开发网~
JavaScript实现的可视化表单设计器源码。实现的可视化表单设计器。基于Vue的可视化表单设计器,让表单开发简单而高效。 特性如下: 可视化配置页面 提供栅格布局,并采用flex实现对齐 一键预览配置的效果 一键生成...
submit是button的一个特例,也是button的一种,它...下面是实现方法: 使用button按钮实现submit提交,需要在button标签中的使用onclick方法,然后在JavaScript中实现具体,代码如下: <head> [removed] functio
javascript弹出层表单提交代码,就是点击按钮后,弹出一个form表单让你填写,等你填好后再提交
主要介绍了JavaScript获取网页表单action属性的方法,涉及javascript操作表单属性的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
本文实例讲述了JavaScript获取表单内所有元素值的方法。分享给大家供大家参考。具体如下: 下面的JS代码可以遍历指定表单中的所有元素,并输出元素的值 <!DOCTYPE html> <html> <body> <form id=...
本文实例讲述了JS提交form表单。分享给大家供大家参考,具体如下: 一、javascript 页面加裁时自动提交表单: Form表单: <form method="post" id="myform" action="a.php"> <input type="submit" value=...
超强大的JS表单验证及使用方法教程: 真实姓名只允许中文; 英文名只允许英文字母; 非法的Url; 密码不符合安全规则; 两次输入的密码不一致; 信箱格式不正确; QQ号码不存在; 身份证号码不正确; 电话号码不正确...
js 实现 验证表单项必须填写! 值得下载看看!资源免费,大家分享!!
js实现表单、邮箱、手机号码验证插件
JS实现的表单验证和强大的身份证
JavaScript中使用表单实现留言功能
table列点击排序功能JS实现,表单table显示的时候,点击表单列名实现升序以及降序功能!
js实现的定时提交表单,一般在在线考试系统中使用
//增加的函数 begin function queryFun(){ var type = $("#artType").val(); var hasInputed = "1";//表示输入了要搜索 的信息 if($("#query").val()=="选手姓名/编号"){ //表示没有输入要搜索的值 ...
原生js实现表单拖拽功能,具有单行文本框,多行文本框,日期,单选框,多选框,下拉框,文件上传
主要介绍了JS实现表单中点击小眼睛显示隐藏密码框中的密码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考价值,需要的朋友可以参考下