（转载）http://www.blogjava.net/junglesong/archive/2008/03/02/183263.html

使用JavaScript操作表单

获取表单的引用

在开始对表单进行编程前，必须先获取表单<form>的引用.有以下方法可以来完成这一操作。
1)采用典型的DOM树中的定位元素的方法getElementById()，只要传入表单的id即可获得表单的引用:
var vform=document.getElementById(“form1”);

2)还可以用document的forms集合,并通过表单在form集合中的位置或者表单的name特性来进行引用:
var oform=document.forms[0];
var oform=document.forms[“formZ”];

访问表单字段

每个表单字段,不论它是按钮,文本框还是其它内容,均包含在表单的elements集合中.可以用它们的name特性或者它们在集合中的位置来访问不同的字段:
Var oFirstField=oForm.elements[0];
Var oTextBox1=oForm.elements[“textBox1”];
此外还可以通过名字来直接访问字段,如:
Var oTextBox1=oForm.textbox1;
如果名字中有标记,则可以使用方括号标记:
Var oTextBox1=oForm[“text box 1”];

最常见的访问表单字段的方法

最简单常用的访问表单元素的方法自然是document.getElementById(),举例如下:
<input type="text" name="count"
      value="" />
在JS中取得此元素内容的代码为:
var name=document.getElementById("name").value
这种方法无论表单元素处于那个表单中甚至是不在表单中都能凑效,一般情况下是我们用JS访问表单元素的首选.
鉴于document.getElementById比较长,你可以用如下函数代替它:
function $(id){
     return document.getElementById(id);
}
把这个函数放在共有JS库中,在jsp页面通过如下方法引用它:
<head>
<title>"記賬系统"添加资源页面</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="web/js/check.js" type="text/javascript"></script>
<link rel="stylesheet" rev="stylesheet" href="web/css/style.css"
 type="text/css" />
</head>
此后你就可以直接使用$访问表单元素中的内容:
var name=$("name").value;

表单字段的共性

以下是所有表单字段(除了隐藏字段)
Disabled可以用来获取或设置表单控件是否被禁用.
Form特性用来指向字段所在的表单.
Blur()方法使表单字段失去焦点.
Focus()方法使表单字段获得焦点.
当字段失去焦点是,发生blur事件,执行onblur事件处理程序.
当字段获取焦点时,发生focus事件,执行onfocus事件处理函数.

当页面载入时将焦点放在第一个字段

在body代码中如此书写:
<body onload=“focusOnFirstElm()”>
JS函数如下书写:
Fucntion focusOnFirstElm(){
     document.forms[0].elements[0].focus();
}
如果第一个字段不是隐藏字段此方法就是凑效的,如果是的话把elements的下标改成非隐藏字段的下标即可.

控制表单只被提交一次

由于Web的响应问题，用户有可能会点击多次提交按钮从而创建重复数据或是导致错误，我们可以使用JS对提交按钮进行设置以让表单只被提交一次。
<input type=“submit” value=“提交” onclick=“this.disabled=true；this.form.submit()”/>
这里在点击提交按钮时执行了两句JS代码，一次是this.disabled=true；这是让提交按钮被禁用；一次是this.form.submit()这是提交这个按钮所在的表单。

检查用户在表单元素中的按键

为控件添加 onkeydown事件处理，然后在函数查看keyCode，就能知道用户的按键，代码如下：
<input type="text" name="test"
value="" onkeydown="testkey(this,event)"/>
JS代码如下：
function testkey(obj,event){
     alert(event.keyCode);
}

这种技巧在改善用户体验如按回车键提交表单时很常用。

（转载）使用JavaScript操作表单的更多相关文章

  1. （转载）Javascript操作表单之间的数据传递

    (转载)http://www.aspxhome.com/javascript/skills/200710/214825.htm 今天有朋友问我关于用JAVASCRIPT来进行页面各表单之间的数据传递的 ...

  2. javascript操作表单

    表单元素除了可以运用上述所有DOM相关操作外,为了简化,还有一系列自己的属性和方法. 表单除了支持鼠标,键盘,更改和html时间之外,还支持一些表单特有的事件,如focus,change,blur等等 ...

  3. Javascript学习笔记四——操作表单

    Javascript学习笔记 大多网页比如腾讯,百度云之类的需要登陆,用户输入账号密码就可以登陆,那么浏览器是如何获取用户的输入的呢?今天就记录一下操作表单. 操作表单与操作DOM是差不多的,表单本身 ...

  4. JavaScript正则、错误处理、操作表单

    一.正则表达式:用单个字符串描述或者匹配符合特定语句规则的字符串 一些字符序列组合在一起,可以简单也可以复杂模式的,可以去搜索,可以去替换 二.语法: /表达式/修饰符(可选) var para=/i ...

  5. JavaScript表单处理（上）

    为了分担服务器处理表单的压力,JavaScript提供了一些解决方案,从而大大打破了处处依赖服务器的局面.  发文不易,转载请亲注明出处,谢谢! 一．表单介绍 在HTML中,表单是由<form& ...

  6. JQuery：各种操作表单元素方法小结

    来源:http://www.ido321.com/1220.html 表单元素无处不在,已然成了Web应用不可或缺的一个部分.对表单最最最常见的操作就是获取表单元素的值或者更改表单元素的值.那在JQu ...

  7. 前端 ----jQuery操作表单

    05-使用jQuery操作input的value值   表单控件是我们的重中之重,因为一旦牵扯到数据交互,离不开form表单的使用,比如用户的注册登录功能等 那么通过上节知识点我们了解到,我们在使用j ...

  8. JavaScript 表单验证 案例

    JavaScript 表单验证 案例 版权声明:未经授权,严禁转载!   编写 HTML 文件,搭建主体界面 <html> <head> <meta charset=&q ...

  9. JavaScript 表单验证正则表达式大全

    JavaScript 表单验证正则表达式大全[转载] 匹配中文字符的正则表达式: [u4e00-u9fa5] 评注:匹配中文还真是个头疼的事,有了这个表达式就好办了 匹配双字节字符(包括汉字在内):[ ...

随机推荐

  1. UITextField文本字段控件的位置

    如果需要更改默认的UITextField清除按钮.左右视图等等控件的位置,可以通过如下设置: // 控制清除按钮的位置 (默认 width = 15 = height) -(CGRect)clearB ...

  2. objective-c ios webkit 本地存储local-storage

    我有一个Cocoa / Objective-C的应用程序,它嵌入了一个WebKit的web视图.我需要打开的数据库支持和本地存储.我知道这是可以做到-我有它在Safari中工作-但我无法找到如何设置这 ...

  3. jfinal不能正确加载html网页，总是报错的解决方法

    今天自学jfinal,遇到一个很奇怪的问题,render("/index.html");总是报错. 仔细看错误日志,才发现原来是因为html网页放到了WEB-INF文件夹下面了,所 ...

  4. css层叠顺序

    优先级: 1.添加!important规则的分组享有最高优先级:会将所有不带!important的规则 例如:#id{border:6px solid black!important}高于#id{bo ...

  5. [jquery] jQuery点滴[持续更新]

    001.查看jquery的版本. $(function(){ console.log($()); //jquery console.log($().jquery); }); 002.(new Func ...

  6. 02_Jquery_01_id选择器

    首先建立建立一个JavaWeb项目工程,导入jquery-1.5.1.js. (一)选择器--打印文本内容 [index.jsp] <%@ page language="java&qu ...

  7. RIME输入法

    RIME输入法 1.可以输入汉语拼音. (1) RIME内置的「地球拼音」可以在选择完字之后按下「Shift+Enter」键,直接输入汉语拼音,并且是带声调的. (2) 自己配置汉语拼音方案. 2.五 ...

  8. 删除Windows右键不用的选项

    1.使用QQ电脑管家或者360的,一般都有小工具. 2.管理注册表 █以WindowsXP(SP2)为例,有些右键菜单中的选项你并不常用,或者有些软件已被删除,但其仍然占据着右键菜单.要删除这些无用的 ...

  9. 九度OJ 1076 N的阶乘 -- 大数运算

    题目地址:http://ac.jobdu.com/problem.php?pid=1076 题目描述: 输入一个正整数N,输出N的阶乘. 输入: 正整数N(0<=N<=1000) 输出: ...

  10. js清空前后空格

    function trim(sValue){                var lastValue=this.replace(/(^\s*)|(\s*$)/g,"");     ...