和风细雨

世上本无难事,心以为难,斯乃真难。苟不存一难之见于心,则运用之术自出。

使用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);
}

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

posted on 2008-03-02 15:23 和风细雨 阅读(2252) 评论(2)  编辑  收藏 所属分类: JavaScript

评论

# re: 使用JavaScript操作表单 2008-06-04 20:17 eeeeeeeeeee

eeeeeeeeeeeee  回复  更多评论   

# re: 使用JavaScript操作表单 2008-06-26 22:21 314696063

写得很好,,请问你一个问题 ,如果我晓得一个表格中表单元素,我怎么求出这个元素是在表格中的哪一行的哪一列呢,里面有隐藏值的,,怎么去得到呢,比如说:document.forms[0].elements[0];
我怎么知道document.forms[0].elements[0]。他在表格中是属于哪个行和列的呢?????????

顶!  回复  更多评论   


只有注册用户登录后才能发表评论。


网站导航: