下面讲述的是使用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”];
获取和设置文本域的内容
例：求和
function getSum(){
//获取表单对象
var theForm=document.forms["myForm2"];
//计算和，并赋值给第3个文本框
theForm.elements["sum"].value=eval(theForm.elements["x"].value)+eval(theForm.elements["y"].value);
}
+=
最常见的访问表单字段的方法
最简单常用的访问表单元素的方法自然是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;
获取表单值并将值付给数组
var list=document.getElementsByTagName("input");
var strData="";
//对表单中所有的input进行遍历
for(var i=0;i<list.length && list[i];i++)
{
//判断是否为文本框
if(list[i].type=="text")
{
strData +=list[i].value;
alert(strData);
}
}
表单字段的共性
以下是所有表单字段(除了隐藏字段)
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);
}
这种技巧在改善用户体验如按回车键提交表单时很常用。
相关推荐
主要特色： 完全响应式； 完美键盘操作支持； 可定制的输入标签：select, radio, checkbox 以及 file； 自定义的日期选择器 本地化支持 表单验证的代码示例：
javascript 操作表单select的常用步骤，删除，添加，修改 用代码实现，一看就明白理解用法
主要介绍了JavaScript获取网页表单action属性的方法,涉及javascript操作表单属性的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
javascript 表单事件处理方法是指在表单中使用 javascript 语言来处理用户的输入信息，并对其进行验证和处理的方法。这些方法可以帮助开发者更好地控制表单的行为，提高用户体验和数据安全。 1. 访问表单对象的常用...
在上篇文章给大家介绍了js操作表单实例讲解(下)的相关知识，本文接着给大家介绍Javascript操作表单实例讲解（下），具体详情如下所示： 一、文本域 <input type=text /> —————————– 操作文本域的值...
JavaScript 1.8.5 英文第八章 DOM操作HTML表单
* 表单可以使用JavaScript来实现数据的验证 * 表单可以使用JavaScript来实现数据的提交 该资源涵盖了JavaScript的基础知识点，包括基本概念、函数、对象、时间对象、文字对象、图片应用和表单应用等内容。这些建议...
用JavaScript操作表单和操作DOM是类似的，因为表单本身也是DOM树。下面通过本文给大家介绍JavaScript操作表单的相关知识，感兴趣的朋友一起看看吧
主要介绍了JavaScript操作表单实例讲解(上)的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
表单验证； 网页特效； Web游戏 服务器脚本开发等。 JavaScript的编写环境：文本编辑器 JavaScript的执行平台：Web浏览器 JavaScript的执行方式：解释执行（由上而下） JavaScript的版本：JavaScript1.0...
然后构建了JavaScript工具包，包括动态操作标记、使用CSS和DOM修改页面风格、验证表单、处理图像等；接着通过一个完整的案例研究阐明了如何使用多种JavaScript 技术协同工作；最后单独设计一章来讲述第三方示例，...
在 Web 开发中，JavaScript 操作键盘的 Enter 事件是一种常见的交互方式，例如，在登录页面中，按下 Enter 键 submitting 表单。在多浏览器环境下，实现这种交互方式需要特殊处理。本文将介绍如何使用 JavaScript ...
然后构建了javascript工具包，包括动态操作标记、使用CSS和DOM修改页面风格、验证表单、处理图像等；接着通过一个完整的案例研究阐明了如何使用多种javascript 技术协同工作；最后单独设计一章来讲述第三方示例，...
jQuery是一个流行的JavaScript库，可用于在网页上进行各种操作，包括表单验证。 1、将基于Jquery的表单验证的调查问卷分为四个部分：FrontPage.html、write.html、end.html、style.css。 1、硬件要求：计算机一台 2...
然后构建了JavaScript工具包，包括动态操作标记、使用CSS和DOM修改页面风格、验证表单、处理图像等；接着通过一个完整的案例研究阐明了如何使用多种JavaScript 技术协同工作；最后单独设计一章来讲述第三方示例，...
本文介绍了JavaScript中表单操作以及表单域，下面我们来一起学习一下吧
DHTML&javascript 使用手册 动态 HTML (DHTML) 对象模型参考 DHTML 对象 DHTML 属性 DHTML 方法 DHTML 事件 DHTML 集合 HTML 参考 HTML 元素 HTML 字符集 样式表(CSS)参考 CSS 属性参考 CSS 长度单位参考...
本文档总结了107个常用的Javascript语句，涵盖了Javascript的基础知识点，包括输出语句、注释、HTML文档结构、DOM顺序、表单元素的获取、字符串操作、数字操作、比较操作符、变量声明、判定语句、循环结构、函数定义...