提交表单

用户单击提交按钮或图像按钮时,就会提交表单。使用<input>和<button>都可以定义提交按钮,只要将其type特性的值设置为"submit"即可,而图像按钮则是通过将<input>的
type特性设置为"image"来定义。

<input type="submit" vlaue="Submit Form"> --通用提交按钮
<button type="submit">Submit Form</button> --自定义提交按键
<input type="image" src="graphic.gif"/> --图像按钮

只要表单中存在上面列出的任何一种按钮,那么在相应的表单控件拥有焦点的情况下,按回车键就可以提交表单。(textarea是一个例外,在文本区中回车会换行。)
在JavaScript中,以编程方式调用submit()方法也可以提交表单。而且,这种方式无需表单包含提交按钮,任何时候都可以正常提交表单。

var from=document.getElementById("myForm");
//提交表单
form.submit();

在以调用submit()方法的形式提交表单时,不会觖submit事件,因此要记得在调用此方法之前先验证表单数据。

重置表单

在用户单击重置按键时,表单会被重置。使用type特性值为"reset"的<input>或<button>都可以创建重置按钮。如下面所示:

<input type="reset" vlaue="Reset Form"> --通用提交按钮
<button type="reset">Reset Form</button> --自定义提交按键

通过脚本重置

var from=document.getElementById("myForm");
//提交表单
form.reset();

表单字段

var form=document.getElementById("form1");
//取得表单中的第g个字段
var field1=from.elements[0];
//取得名为"textbox1"的字段
var field2=form.elements["textbox1"];
//取得表单中包含的字段的数量
var fieldCount=form.elements.length;

如果有多个表单控件都在使用一个name(如单选按钮),那么就会返回以该name命名的一个NodeList.

共有的表单字段方法

每个表单字段都有两个方法:focus(获得焦点)和blur(失去焦点);

自动切换焦点

为了增强易用性,同时加快数据输入,可以在前一个文本框中的字符达到最数量后,自动将焦点切换到下一个文本框。可以通过下列代码实现:

( function(){
function tabForward(event){
event=EventUtil.getEvent(event);
var target=EventUtil.getTarge(event);
if(target.value.length==target.maxLength){
var form=target.form;
for(var i=0;len=form.elements.length;i<len;i++){
if(form.elements[i]==target){
if(form.elements[i+1]){
form.elements[i+1].focus();
}
return;
}
}
}
}
var textbox1=document.getElementById("txtTel1");
var textbox2=document.getElementById("txtTel2");
var textbox3=document.getElementById("txtTel3"); EventUtil.addHandler(textbox1,"keyup",tabForward);
EventUtil.addHandler(textbox2,"keyup",tabForward);
EventUtil.addHandler(textbox3,"keyup",tabForward); }
)();

JavaScript高级程序设计学习笔记--表单脚本的更多相关文章

  1. javascript高级程序设计学习笔记

    javascript高级程序设计,当枕头书已经好久了~zz  现在觉得自己在js的开发上遇到了一些瓶颈,归根究底还是基础太薄弱,所以重新刷一遍js高程希望有更新的认识. 一.javascript简介 ...

  2. javascript 高级程序设计 学习笔记

    <!--<script> // 异步请求封装 IE6即以上浏览器 // ajax(url,fnSucc,selectID,fnFaild) //url 请求地址 //fnSucc 异 ...

  3. JavaScript高级程序设计---学习笔记(一)

    今天,2017.3.17开始利用课余时间仔细学习<JavaScript高级程序设计>,将需要掌握的知识点记录下来,争取把书里的所有代码敲一遍并掌握. 1.标识符命名最好是第一个字母小写,剩 ...

  4. JavaScript高级程序设计学习笔记第十四章--表单

    1.在 HTML 中,表单是由<form>元素来表示的,而在 JavaScript 中,表单对应的则是 HTMLFormElement 类型. HTMLFormElement 继承了 HT ...

  5. JavaScript高级程序设计---学习笔记(三)

    函数表达式 定义函数的方式有两种:一种是函数声明,另一种是函数表达式. 关于函数声明,它的一个重要特征就是函数声明提升,意思是在执行代码之前会先读取函数声明所以可以把函数声明放在调用它的语句后面. 而 ...

  6. JavaScript高级程序设计学习笔记之事件

    1.事件流 事件流描述的是从页面中接收事件的顺序. 事件冒泡 IE的事件流叫做事件冒泡(event bubbling),即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播 ...

  7. JavaScript高级程序设计学习笔记--DOM

    DOM(文档对象模型)是针对HTML和XML文档的一个API(应用程序接口). Document类型 文档的子节点 虽然DOM标准规定Document节点的子节点可以是DocumentType,Ele ...

  8. JavaScript高级程序设计学习笔记--函数表达式

    关于函数声明,它的一个重要特征就是函数声明提升,意思是在执行代码之间会读取函数声明,意思是在执行代码之前会先读取函数声明.这就意味着可以把函数声明放在调用它的语句 后面. sayHi(); funct ...

  9. Javascript高级程序设计学习笔记一

    看完w3school的javascript的概念,有点基础,开始红皮书的路程,今晚总结前二章的心得. 第一章:javascript简介 重点是javascript的实现是由 ECMAScript(核心 ...

随机推荐

  1. swift上传头像

    很久没有写博客了,今天特地写了这个,也是一边仿照别人写的demo,注释部分都是需要的.需要的同学可以参考一下. @IBAction func headImageBtnPage(){  //上传头像 / ...

  2. WPF实现Twitter按钮效果

    最近上网看到这个CSS3实现的Twitter按钮,感觉很漂亮,于是想用WPF来实现下. 实现这个效果,参考了CSS3 原文地址:http://www.html5tricks.com/css3-twit ...

  3. Batsing的网页编程规范(HTML/CSS/JS/PHP)

    特别注意!!!我这里的前端编程规范不苟同于Bootstrap的前端规范. 因为我和它的目的不同,Bootstrap规范是极简主义,甚至有些没有考虑到兼容性的问题. 我的规范是自己从编程实践中总结出来的 ...

  4. 【Chrome】新建Chrome插件,新建,事件行为,本地存储

    源:walkingq 1,新建:静态网站+manifest.json:[注:mainifest_version是chrome 18以后新增key] manifest.json 截图 2,事件行为: 3 ...

  5. 你真的理解Java的按引用传递吗?

    首先我们来看下面这段代码: public class Test1 { String a = "123"; public static void change(Test1 test) ...

  6. logging 模块误用导致的内存泄露

    首先介绍下怎么发现的吧, 线上的项目日志是通过 logging 模块打到 syslog 里, 跑了一段时间后发现 syslog 的 UDP 连接超过了 8W, 没错是 8 W. 主要是 logging ...

  7. c++/java/python priority_que实现最大堆和最小堆

    #include<iostream>#include<vector>#include<math.h>#include<string>#include&l ...

  8. bzoj2179: FFT快速傅立叶

    #include <iostream> #include <cstdio> #include <cstring> #include <algorithm> ...

  9. python的正则表达式

    1 元字符: 1.1 . .除了换行符以外的任何单个字符 1.2 ^ ^只匹配起始字符 temp1=re.findall('^morra','nsudi werwuirnmorra') temp2=r ...

  10. <<< web里面Servlet高级应用的基础介绍

    Servlet中的页面跳转?两种方式,实现跳转:内部跳转(请求转发).外部跳转(重定向)内部跳转(请求转发)特点:在服务器内部完成页面之间的跳转:请求只有一次:浏览器地址不会改变.request.ge ...