表单脚本
表单的基础知识
在HTML中,表单是由<form>元素表示的,在Javascript对应的是HTMLFormElement类型,它继承自HTMLElement,因此具有与其他HTML元素相同的默认属性,HTMLFormElement也有它自己独有的属性和方法
acceptCharset:服务器能够处理的字符集;等价于HTML中accept-charset特性
action:接受请求的URL;等价于HTML的action特性
elements:表单中所有控件的集合(HTMLCollection)
enctype:请求的编码类型;等价于HTML中enctype特性
length:表单中控件的数量
method:要发送的HTTP请求类型,通常是“get”或“post”;等价于HTML中method特性
name:表单的名称;等价于HTML的name特性
reset():将所有表单重置为默认值
submit():提交表单
target:用于发送请求和接收响应的窗口名称;等价于HTML的target特性
取得<form>元素引用的方式有好几种
var form=document.getElementById("form1");
var firstForm=document.form[0];
var myForm=document.form["form2"];
提交表单
点击提交按钮或图像按钮,就会提交表单
使用<input>或<button>都可以定义提交按钮,将其type特性设置为“submit”即可
使用<input>定义图像按钮,type特性设置为“image”
<input type="submit" value="Submit Form">
<button type="submit">Submit Form</button>
<input type="image" src="graphic.gif">
以这种方式提交表单时,浏览器在将请求发送给服务器前会触发submit事件,有机会验证表单数据,阻止默认的行为
var form=document.getElementById("myForm");
EventUtil.addHandler(form,"submit",function(event){
event=EventUtil.getEvent(event);
EventUtil.preventDefault(event);
});
调用submit()方法提交表单不会触发submit事件,要在调用此方法之前验证表单数据
var form=document.getElementById("myForm");
form.submit();
解决重复提交表单的两个方法:第一次提交表单后就禁用提交按钮,或者利用onsubmit事件处理程序取消后续的表单提交操作
重置表单
使用<input>或<button>都可以定义重置按钮,将其type特性设置为“reset”即可
<input type="reset" value="Submit Form">
<button type="reset">Submit Form</button>
会触发reset事件
调用reset()方法也会触发reset事件
var form=document.getElementById("myForm");
form.reset();
表单字段
每个表单都有elements属性,是表单中所有元素的集合,其中包含着表单中所有的字段,例如<input>、<textarea>、<button>和<fieldset>,可以按照位置和name特性来访问它们
var form=document.getElementById("myForm");
var field1=form.elements[0];
var field2=form.elements["textbox1"];
var fieldCount=form.elements.length;
如果多个表单控件都使用一个name,elements[name]返回一个NodeList,是一个集合
共有的表单字段属性
除了<fieldset>元素以外,所有的表单字段都拥有相同的一组属性
disabled:布尔值,表示当前字段是否被禁用
form:指向当前字段所属表单的指针;只读
name:当前字段的名称
readOnly:布尔值,表示当前字段是否只读
tabIndex:表示当前字段的切换(tab)序号
type:当前字段的类型,如“checkbox”、“radio”等等
value:表示当前字段被提交给服务器的值,对于文字字段来说,这个属性是只读的,包含文件在计算机中的路径
除了form只读,其他可修改
//避免多次提交表单
EventUtil.addHandler(form,"submit",function(event){
event=EventUtil.getEvent(event);
var target=EventUtil.getTarget(event);
var btn=target.elements["submit-btn"];
btn.disabled=true;
});
以上代码在表单提交过一次以后马上禁用它,由于执行时差问题,不能用onclick事件处理程序来处理重复提交表单问题
<input>和<button>元素的type可以修改,<select>元素的type属性只读
JavaScript高级程序设计52.pdf的更多相关文章
-
JavaScript高级程序设计61.pdf
JSON对象 早期的JSON解析器就是使用JavaScript的eval()函数,ECMAScript5对解析JSON的行为做出了规定,定义了全局对象JSON. JSON对象有2个方法:stringi ...
-
JavaScript高级程序设计60.pdf
错误处理 try-catch语句 try{ //可能会导致错误的代码 }catch(error){ //在错误发生时如何处理 } error是一个包含着错误信息的对象,它有一个message属性,保存 ...
-
JavaScript高级程序设计58.pdf
15章 使用Canvas绘图 略 16章 HTML5脚本编程 HTML5规范了新的HTML标记和JavaScript API,以便简化创建动态Web界面的工作 跨文档消息传递 简称XDM,指来自不同域 ...
-
JavaScript高级程序设计57.pdf
表单序列化 首先了解一下浏览器如何将数据发送给服务器 对表单字段的名称和值进行URL编码,使用和号(&)分隔 不发送禁用的表单字段 只发送勾选的复选框和单选按钮 不发送type为“reset” ...
-
JavaScript高级程序设计55.pdf
输入模式 HTML5为文本字段新增了pattern属性,这个属性的值是一个正则表达式,用于匹配文本框中的值 例如,只想在允许在文本字段中输入数值 <input type="text&q ...
-
JavaScript高级程序设计54.pdf
过滤输入 对于一些浏览器,可以使用正则表达式里的text()测试用户按下的按键,Firefox和safari(3.1版本之前)会对向上向下.退格键和删除键触发keypress事件,在Firefox中, ...
-
JavaScript高级程序设计53.pdf
共有的表单字段方法 每个表单字段都有两个方法:focus()和blur(),其中focus()用于将浏览器焦点设置到表单字段,激活表单字段.可以侦听页面的load事件 EventUtil.addHan ...
-
JavaScript高级程序设计50.pdf
hashchange事件 HTML5新增了hashchange事件,以便在URL的参数列表(及URL中“#”号后面的所有字符串)发生变化时通知开发人员,之所以新增这个事件,是因为在Ajax应用中,开发 ...
-
JavaScript高级程序设计49.pdf
HTML5事件 contextmenu事件 contextmenu事件是冒泡的,可以将事件处理程序指定到document,这个事件的目标是用户操作的元素,在兼容DOM的浏览器中使用event.prev ...
随机推荐
-
几种常见的Shell
Unix/Linux上常见的Shell脚本解释器有bash.sh.csh.ksh等,习惯上把它们称作一种Shell.我们常说有多少种Shell,其实说的是Shell脚本解释器. bash bash是L ...
-
基于SOUI开发的应用展示
本页面列出基于SOUI开发的产品 欢迎使用SOUI的朋友提供资源:setoutsoft#qq.com #->@ 千万级平台后台在线监测客户端 1, 主页:用于显示管理服务端在线情况,左侧栏包括 ...
-
基于NPOI的报表引擎——ExcelReport
前言 其实现在说ExcelReport是报表引擎还为时尚早,但该组件我既然要决心维护下去,这便算是初衷吧! 1.现在,ExcelReport能为你做什么呢? 如果,你有导出数据到Excel的需求,Ex ...
-
测试Swift语言代码高亮-使用highlight.js
func &( left:OCBool, right: OCBool)->OCBool{ if left{ return right } else{ return false } }
-
linux系统下sd卡的备份与恢复
linux系统下sd卡的备份与恢复 现在各种的开发板都是从sd卡上面启动的,因此大修改工作之前很有必要备份一下. 备份 在linux系统下用读卡器读取sd卡 用df -h命令看分区的路径 一般都是/d ...
-
TopFreeTheme精选免费模板【20130703】
今天我们给大家分享13个最新的主题模板,5款WordPress主题,5款Joomla模板,3款OpenCart主题. BowThemes – BT Folio v1.0 Template for Jo ...
-
用I/O口模拟IIC总线协议遇到的一些问题
最近做的一个项目,是基于IIC总线通信的传感器系统.由于另外一个传感器使用的是类IIC协议,而不是标准IIC,所以MCU不能与其通信,最后没有办法,只有通过I/O口模拟的方式实现IIC的总线通信.具体 ...
-
第五十二篇、 OC获取视频的第一帧图片thumbnailImage
获取视频的第一帧图片 有时候我们拍摄完视频后,希望获取一张图片当作这个视频的介绍,这个图片thumbnailImage可以从视频的第一帧获取到. 我们的思路是先获取视频的URL,然后初始化一个MPMo ...
-
eKing Cloud基础云平台演进之路
出口转内销.首发于公司微信公众号,作者本人,现转载到此.本来写得比较技术,还算有点干货,但是结果被编辑咔咔咔,就只剩下下面这些内容. 大型企业如何开启自己的快速上云之路? 2017-12-08 易建科 ...
-
ElasticSearch实战-编码实践
1.概述 前面在<ElasticSearch实战-入门>中给大家分享如何搭建这样一个集群,在完成集群的搭建后,今天给大家分享如何实现对应的业务功能模块,下面是今天的分享内容,目录如下所示: ...