JavaScript高级程序设计52.pdf
表单脚本
表单的基础知识
在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 ...
随机推荐
- MongoDB笔记(四)基本管理命令
MongoDB命令帮助系统 基本命令及实例 一基本命令 二基本DDL和DML 三启动与终止 四安全管理 五数据备份恢复与迁移管理 六远程连接管理 MongoDB是一个NoSQL数据库系统:一个数据 ...
- linux进程间通信--无名管道
管道 只能用于具有亲缘关系的进程之间通信是一个半双工的通信模式, 具有固定的写读端和写端,管道可以看成一种特殊的文件,对它可以使用普通的read.write等操作 管道的创建: #include &l ...
- Linux之C编译器gcc和makefile使用简介
使用gcc编译程序是,其过程主要分为四个阶段:预处理,编译,汇编,连接 程序清单: #include<stdio.h> #include<stdlib.h> int main( ...
- 【转】CHAR CHARACTER VARCHAR NCHAR NVARCHAR NVARCHAR2区别
http://blog.csdn.net/lhl6688/article/details/44156823?ref=myread oracle提供了五种字符数据类型:char.nchar.varcha ...
- MAC 终端快捷建
常用的快捷键: Ctrl + d 删除一个字符,相当于通常的Delete键(命令行若无所有字符,则相当于exit:处理多行标准输入时也表示eof) Ctrl + h 退格删 ...
- sass进阶篇总结一
一.@if 指令: @if 指令是一个 SassScript,它可以根据条件来处理样式块,如果条件为 true 返回一个样式块,反之 false 返回另一个样式块.在 Sass 中除了 @if 之,还 ...
- 一个小程序[Socrates]中学到的Perl点滴
1. 抓取网页源文件,只要三行代码 use LWP::Simple; $url='http://music.baidu.com/top/dayhot'; $page=get($url) or die ...
- 阻止CSS样式被缓存
<link href="/stylesheet.css?<?php echo time(); ?>" rel="stylesheet" typ ...
- [转]left join,right join,inner join区别
left join(左联接) 返回包括左表中的所有记录和右表中联结字段相等的记录 right join(右联接) 返回包括右表中的所有记录和左表中联结字段相等的记录inner join(等值连接) 只 ...
- Improved Semantic Representations From Tree-Structured Long Short-Term Memory Networks(1)
今天和陈驰,汪鑫讨论了一下,借此记录一下想法. 关于这篇论文,要弄清的地方有: 1.LSTMtree到底是从上往下还是从下往上学的,再确认一下 2.关于每个节点的标注问题 3.label的值到底该怎么 ...