js清空表单数据的两种方式(遍历+reset)

方法1：遍历页面元素

/*
清空FORM表单内容 id：表单ID*/
function ClearForm(id) {
var objId = document.getElementById(id);
if (objId == undefined) {
return;
}
for (var i = 0; i < objId.elements.length; i++) {
if (objId.elements[i].type == "text") {
objId.elements[i].value = "";
}
else if (objId.elements[i].type == "password") {
objId.elements[i].value = "";
}
else if (objId.elements[i].type == "radio") {
objId.elements[i].checked = false;
}
else if (objId.elements[i].type == "checkbox") {
objId.elements[i].checked = false;
}
else if (objId.elements[i].type == "select-one") {
objId.elements[i].options[0].selected = true;
}
else if (objId.elements[i].type == "select-multiple") {
for (var j = 0; j < objId.elements[i].options.length; j++) {
objId.elements[i].options[j].selected = false;
}
}
else if (objId.elements[i].type == "textarea") {
objId.elements[i].value = "";
}
//else if (objId.elements[i].type == "file") {
// //objId.elements[i].select();
// //document.selection.clear();
// // for IE, Opera, Safari, Chrome
// var file = objId.elements[i];
// if (file.outerHTML) {
// file.outerHTML = file.outerHTML;
// } else {
// file.value = ""; // FF(包括3.5)
// }
//}
}
}

方法2：使用 reset 按钮

页面中增加

<!--用来清空表单数据-->
<input type="reset" name="reset" style="display: none;" />

触发 reset 事件

$("input[type=reset]").trigger("click");
赞 (0)

相关推荐

  • 利用JS轻松实现获取表单数据

    利用JS轻松实现获取表单数据

    接触过Angularjs的都知道,ng支持双向绑定,我们可以轻轻松松的通过ngModel将我们的值绑定到界面,当修改了值提交表单的时候不需要再重新通过ID去重新抓取输入框信息了.那对于我们开发前台网站,不用ng一类的MVVM框架,只引用了Jquery,那么在处理表单的时候该怎么做呢. 一. 原始做法 <div id="form"> <select id='select1'> <option value="">--请选择--<

  • js下利用userData实现客户端保存表单数据

    事实上,我们可以利用微软DHTML默认行为中的userData行为来实现这个功能. 因为很多网友问到这样的问题,整理了一下,并提供了三个示例.下面将就该行为的使用做一个介绍: UserData 行为(userData Behavior): 1.说明: userData行为通过将数据写入一个UserData存储区(UserData store)来保存数据,userData可以将数据以XML格式保存在客户端计算机上,如果你用的是 Windows 2000 或者 Windows XP,是保存在C:\D

  • JSP 重置按钮清空传入的表单数据实例

    参考: jquery 表单 清空 $(':input','#myform') .not(':button, :submit, :reset, :hidden') .val('') .removeAttr('checked') .removeAttr('selected'); 这个js是可以实现清空表单中填写及传入的值的,但要注意: 1.jq实现,此<input />不能放在form表单内!: 2.直接写在onclick属性中即可

  • javascript定时保存表单数据的代码

    (忘记是不是两家邮箱都有这个功能). 那这个功能是怎么做的呢? 定时,我们知道怎么弄,但保存呢?也许我们会通过隐藏域等手段来存放数据.但是,这个却有个缺点:那就是刷新页面后,数据将会丢失. 而此时,就该轮到我们很少关注,而且估计有不少人不知道的UserData 行为(userData Behavior)登场了: 而这个UserData是什么?怎么用?,我将在文章最后转载一篇介绍它的文章. 现在,我直接上例子,所谓无代码,无真相嘛: 复制代码 代码如下: <!DOCTYPE html PUBLIC

  • javascript检查表单数据是否改变的方法

    有的时候,需要检查用户是否修改了一个表单中的内容,则可以使用下面的技巧,其中如果修改了表单的内容则返回true,没修改表单的内容则返回false.代码如下: 复制代码 代码如下: function formIsDirty(form) { for (var i = 0; i < form.elements.length; i++) { var element = form.elements[i]; var type = element.type; if (type == "checkbox&

  • js检测离开或刷新页面时表单数据是否更改的方法

    本文实例讲述了js检测离开或刷新页面时表单数据是否更改的方法.分享给大家供大家参考,具体如下: function formIsDirty(form) { for (var i = 0; i < form.elements.length; i++) { var element = form.elements[i]; var type = element.type; if (type == "checkbox" || type == "radio") { if (

  • jquery ajax 如何向jsp提交表单数据

    jquery ajax 如何向jsp提交表单数据

    AJAX越来越火了,作为一个WEB程序开发者要是不会这个感觉就要落伍,甚至有可能在求职的时候屡被淘汰.我也是一个WEB程序开发者,当然我也要 "随波逐流"一把,不然饭碗不保啊! 之前实现AJAX使用Javascript脚本一个一个敲出来的,很繁琐.学习Jquery之后就感觉实现AJAX并不是那么的困难了,当然除了 Jquery框架外还有其它的优秀框架这里我就着重说下比较流行的Jquery.Jquery AJAX提交表单有两种方式,一是url参数提交数据,二是form提交(和平常一样在后

  • 一个检测表单数据的JavaScript实例

    一个检测表单数据的JavaScript实例,很简单,很实用,感兴趣的朋友可以看看 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>每天一个JavaScript实例-检测表单数据</title> <style> [role

  • 深入分析JSON编码格式提交表单数据

    以JSON编码格式提交表单数据是HTML5对WEB发展进化的又一大贡献,以前我们的HTML表单数据是通过key-value方式传输的服务器端,这种形式的传输对数据组织缺乏管理,形式十分原始.而新出现的JSON格式提交表单数据方法,将表单里的所有数据转化的具有一定规范的JSON格式,然后传输的服务器端.服务器端接收到的数据是直接可以使用的合格JSON代码. 如何声明以JSON格式提交表单 大家应该对如何用表单上传一个文件的写法很熟悉,它需要在HTML中form标记上添加 enctype="mult

  • js清空表单数据的两种方式(遍历+reset)

    方法1:遍历页面元素 /* 清空FORM表单内容 id:表单ID*/ function ClearForm(id) { var objId = document.getElementById(id); if (objId == undefined) { return; } for (var i = 0; i < objId.elements.length; i++) { if (objId.elements[i].type == "text") { objId.elements[

  • jquery ajax提交表单数据的两种方式

    之前实现AJAX使用Javascript脚本一个一个敲出来的,很繁琐.学习Jquery之后就感觉实现AJAX并不是那么的困难了,当然除了Jquery框架外还有其它的优秀框架这里我就着重说下比较流行的Jquery.Jquery AJAX提交表单有两种方式,一是url参数提交数据,二是form提交(和平常一样在后台可以获取到Form表单的值).在所要提交的表单中,如果元素很多的话建议用第二种方式进行提交,当然你要是想练练"打字水平"的话用第一种方式提交也未尝不可,相信开发者都不想费白劲吧!

  • Java 中 Form表单数据的两种提交方式

    1 GET - 从指定的服务器中获取数据 1.1 GET方法 使用GET方法时,查询字符串(键值对)被附加在URL地址后面一起发送到服务器,例如:http://localhost:8080//customer/customer_info?res=json&mt=0&custId=1 1.2 特点 (1) GET请求能够被缓存 (2) GET请求会保存在浏览器的浏览记录中 (3) 以GET请求的URL能够保存为浏览器书签 (4) GET请求有长度限制(不能多于1024字节) (5) GET请

  • Angualrjs 表单验证的两种方式(失去焦点验证和点击提交验证)

    AngularJS提供了表单验证,但是验证的过程交互体验很不好,比如重设密码,重复密码的时候一键入就会提示密码不正确,现整理了两种方法,仅供借鉴. 一,点击提交验证 <form action="" class="form-horizontal col-md-9" name="reset_pwd" ng-submit="resetPwd()"> <div class="form-group"

  • JS实现Tab栏切换的两种方式案例详解

    面向过程的写法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=devic

  • react中使用forEach或map两种方式遍历数组

    react中使用forEach或map两种方式遍历数组

    目录 使用forEach或map两种方式遍历数组 forEach map 循环遍历数组时map和forEach的区别 forEach情况 map 情况 使用forEach或map两种方式遍历数组 之前写代码,从后台提取数据并渲染到前台,由于有多组数据,用map遍历会相对方便一点,但是 map不能遍历array数组,只能遍历object对象. 所以如果遇到这样的问题可以采用forEach试一下 forEach import React,{Component} from 'react'; let l

  • jquery ajax提交表单数据的两种实现方法

    之前实现AJAX使用Javascript脚本一个一个敲出来的,很繁琐.学习Jquery之后就感觉实现AJAX并不是那么的困难了,当然除了Jquery框架外还有其它的优秀框架这里我就着重说下比较流行的Jquery.Jquery AJAX提交表单有两种方式,一是url参数提交数据,二是form提交(和平常一样在后台可以获取到Form表单的值).在所要提交的表单中,如果元素很多的话建议用第二种方式进行提交,当然你要是想练练"打字水平"的话用第一种方式提交也未尝不可,相信开发者都不想费白劲吧!

  • JS实现图片预览的两种方式

    考虑到用户体验, 网页的图片上传数据库前,先预览是很有必要的一个步骤,第一可以给用户带来安全感,第二防止图片文件有问题而提交到数据库,占用存储资源. 那么要实现预览有两种方式:一种是用window.URL.createObjectURl方法对选择的图片数据(可以勉强理解为input的value)生成一个blob对象路径,第二种是用获取 FileReader读取器. 那么无论那种方法,首先都得得到文件数据,获得文件数据是从files集合中获取. 方式一: 代码如下: <input type=fil

  • java实现图的邻接表存储结构的两种方式及实例应用详解

    java实现图的邻接表存储结构的两种方式及实例应用详解

    前言 本篇来谈一谈图的邻接表实现的两种方式,首先我们明确一点"学会图的邻接表实现的关键点在于":你所建立的图的邻接表的对象是什么! 首先我们看一下<算法导论>中关于图的邻接表的定义: 图G=(V,E)的邻接表表示有一个包含 |V| 个列表的数组Adj所组成,其中每个列表对应于V中的一个顶点,对于每一个u∈V,邻接表Adj[u]包含所有满足条件(u,v)∈E的顶点v,亦即,Adj[u]包含图G中所有和顶点u相邻的顶点.(或者他也可能指向这些顶点的指针),每个邻接表中的顶点一般

  • js实现轮播图的两种方式(构造函数、面向对象)

    本文实例为大家分享了js实现轮播图的具体代码,供大家参考,具体内容如下 1.构造函数 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type='text/css'> *{ margin:0; padding:0;} #wrap{ width:500px; height:360px; margin:1

随机推荐