使用JavaScript操作表单
关键字: 使用javascript操作表单
下面讲述的是使用javascript对表单进行简单基础的操作：
1：获取表单的引用
在开始对表单进行编程前，必须先获取表单<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 οnlοad=“focusOnFirstElm()”>
JS函数如下书写:
Fucntion focusOnFirstElm(){
document.forms[0].elements[0].focus();
}
如果第一个字段不是隐藏字段此方法就是凑效的,如果是的话把elements的下标改成非隐藏字段的下标即可.
控制表单只被提交一次
由于Web的响应问题，用户有可能会点击多次提交按钮从而创建重复数据或是导致错误，我们可以使用JS对提交按钮进行设置以让表单只被提交一次。
<input type=“submit” value=“提交” οnclick=“this.disabled=true；this.form.submit()”/>
这里在点击提交按钮时执行了两句JS代码，一次是this.disabled=true；这是让提交按钮被禁用；一次是this.form.submit()这是提交这个按钮所在的表单。
检查用户在表单元素中的按键
为控件添加 onkeydown事件处理，然后在函数查看keyCode，就能知道用户的按键，代码如下：
<input type="text" name="test"
value="" οnkeydοwn="testkey(this,event)"/>
JS代码如下：
function testkey(obj,event){
alert(event.keyCode);
}
2：
node.innerHTML+="<div style='text-align:left;'><input id='checkbox"+i+"' type='checkbox'name='"+filelist[i]+"'/><a οnclick='frm_fileupload.downloadFileFromDB(/""+filremote+"/",/""+downloadclassname+"/");' href='#'>"+shortname+"</a></div>";
访问表单字段
每个表单字段,不论它是按钮,文本框还是其它内容,均包含在表单的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);
}
<input maxlength="2147483647" name="x" size="20" type="text">+<input maxlength="2147483647" name="y" size="20" type="text">= <input maxlength="2147483647" name="sum" readonly="65535" size="20" type="text"> <input maxlength="2147483647" size="20" type="button" 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 οnlοad=“focusOnFirstElm()”>
JS函数如下书写:
Fucntion focusOnFirstElm(){
document.forms[0].elements[0].focus();
}
如果第一个字段不是隐藏字段此方法就是凑效的,如果是的话把elements的下标改成非隐藏字段的下标即可.
控制表单只被提交一次
由于Web的响应问题，用户有可能会点击多次提交按钮从而创建重复数据或是导致错误，我们可以使用JS对提交按钮进行设置以让表单只被提交一次。
<input type=“submit” value=“提交” οnclick=“this.disabled=true；this.form.submit()”/>
这里在点击提交按钮时执行了两句JS代码，一次是this.disabled=true；这是让提交按钮被禁用；一次是this.form.submit()这是提交这个按钮所在的表单。
检查用户在表单元素中的按键
为控件添加 onkeydown事件处理，然后在函数查看keyCode，就能知道用户的按键，代码如下：
<input type="text" name="test"
value="" οnkeydοwn="testkey(this,event)"/>
JS代码如下：
function testkey(obj,event){
alert(event.keyCode);
}
3：
1 | var selectId=document.getElemengById('selectId'); |
清空select的项
1 | selectId.options.length = 0; |
如果留下第一行的话就是
1 | selectId.options.length = 1; |
向select选项中 加入一个Option
1 | var varOption = new Option(objOptionText,objOptionValue); |
2 | selectId.options[selectId.options.length] = varOption; |
从select选项中 删除一个Option
1 | for(var i=0;i<selectId.options.length;i++) |
3 | if(selectId.options[i].value == objOptionValue) |
5 | selectId.options.remove(i); |
设置select中text=”paraText”的第一个Option为选中
1 | for(var i=0;i<selectId.options.length;i++) |
3 | if(selectId.options[i].text == objOptionText) |
5 | selectId.options[i].selected = true; |
设置select中value=”paraValue”的Option为选中
1 | selectId.value = objOptionValue; |
得到select的当前选中项的value
1 | var currSelectValue = selectId.value; |
得到select的当前选中项的text
1 | var currSelectText = selectId.options[selectId.selectedIndex].text; |
得到select的当前选中项的Index
1 | var currSelectIndex = selectId.selectedIndex; |
4. 当表单提交或重置时向客户端进行确认操作
- linenum
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <script type="text/javascript">
- //<![CDATA[
- function fCfm(msg){
- if(confirm(msg))return true;
- return false;
- } // shawl.qiu script
- //]]>
- </script>
- <form name="form1" id="form1" method="get" action=""
- οnsubmit="return fCfm('现在提交数据吗?');"
- οnreset="return fCfm('现在重置表单域所有内容吗?');" >
-
- <input name="textfield" type="text" value="tbx default value" />
- <br />
- <textarea name="textarea">txa default value</textarea>
- <br />
- <input type="submit" name="Submit" value="Submit" />
- <input type="reset" name="Reset" value="Reset" />
- </form><br />
- <a href="?">back</a>
5. 列出表单域中所有元素及其重要属性
- linenum
- <script type="text/javascript">
- //<![CDATA[
- function fListFmEle(obj){
- try{ w.close(); } catch(e){}
-
- w=open('', 'popup', 'width=500, height=500, left=200, top=100, scrollbars')
- w.document.write('<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />');
-
- for(var i=0; i<obj.length; i++){
- w.document.write('obj name: ',obj[i].name.fontcolor('red'),
- '<br/>obj type: ',obj[i].type.fontcolor('red'),
- '<br/>obj.value: ', obj[i].value.fontcolor('blue'),
- '<p/>');
- }
-
- w.document.οnclick=function(){ w.close(); }
- w.focus();
- } // shawl.qiu script
- //]]>
- </script>
- <a href="#" οnclick="fListFmEle(document.fm);">list form elements</a><p/>
- <form name="fm" id="fm" method="post" action="">
- <input name="textfield" type="text" value="tbx value" /><br />
- <input type="radio" name="RadioGroup1" value="radio" />Radio<br />
- <input type="radio" name="RadioGroup1" value="radio" />Radio<br />
- <input name="cbx" type="checkbox" id="cbx" value="checkbox" />
- <input name="cbx1" type="checkbox" id="cbx1" value="checkbox" />
- <input name="cbx2" type="checkbox" id="cbx2" value="checkbox" /><br />
- <select name="select">
- <option value="v">opt</option>
- <option value="v1">opt1</option>
- </select><br />
- <select name="sle1" size="2" multiple id="sle1">
- <option value="v">sle</option>
- <option value="v1">sle1</option>
- </select><br />
- <textarea name="textarea">txa value</textarea><br />
- <input type="submit" value="Submit" />
- <input type="reset" value="Reset" />
- </form>
6：js操作select控件的几种方法发布：dxy 字体：[增加 减小] 类型：转载
几种js操作select控件的方法，这里基本是整理的比较全了，另外脚本之家特给大家准备了一些相关的文章。让你更深入的了解javascript下select的操作。
-
-
1判断select选项中 是否存在Value="paraValue"的Item
2向select选项中 加入一个Item
3从select选项中 删除一个Item
4删除select中选中的项
5修改select选项中 value="paraValue"的text为"paraText"
6设置select中text="paraText"的第一个Item为选中
7设置select中value="paraValue"的Item为选中
8得到select的当前选中项的value
9得到select的当前选中项的text
10得到select的当前选中项的Index
11清空select的项
======================================================================
js 代码
// 1.判断select选项中 是否存在Value="paraValue"的Item
function jsSelectIsExitItem(objSelect, objItemValue) {
var isExit = false;
for (var i = 0; i < objSelect.options.length; i++) {
if (objSelect.options[i].value == objItemValue) {
isExit = true;
break;
}
}
return isExit;
}
// 2.向select选项中 加入一个Item
function jsAddItemToSelect(objSelect, objItemText, objItemValue) {
//判断是否存在
if (jsSelectIsExitItem(objSelect, objItemValue)) {
alert("该Item的Value值已经存在");
} else {
var varItem = new Option(objItemText, objItemValue);
objSelect.options.add(varItem);
alert("成功加入");
}
}
// 3.从select选项中 删除一个Item
function jsRemoveItemFromSelect(objSelect, objItemValue) {
//判断是否存在
if (jsSelectIsExitItem(objSelect, objItemValue)) {
for (var i = 0; i < objSelect.options.length; i++) {
if (objSelect.options[i].value == objItemValue) {
objSelect.options.remove(i);
break;
}
}
alert("成功删除");
} else {
alert("该select中 不存在该项");
}
}
// 4.删除select中选中的项
function jsRemoveSelectedItemFromSelect(objSelect) {
var length = objSelect.options.length - 1;
for(var i = length; i >= 0; i--){
if(objSelect[i].selected == true){
objSelect.options[i] = null;
}
}
}
// 5.修改select选项中 value="paraValue"的text为"paraText"
function jsUpdateItemToSelect(objSelect, objItemText, objItemValue) {
//判断是否存在
if (jsSelectIsExitItem(objSelect, objItemValue)) {
for (var i = 0; i < objSelect.options.length; i++) {
if (objSelect.options[i].value == objItemValue) {
objSelect.options[i].text = objItemText;
break;
}
}
alert("成功修改");
} else {
alert("该select中 不存在该项");
}
}
// 6.设置select中text="paraText"的第一个Item为选中
function jsSelectItemByValue(objSelect, objItemText) {
//判断是否存在
var isExit = false;
for (var i = 0; i < objSelect.options.length; i++) {
if (objSelect.options[i].text == objItemText) {
objSelect.options[i].selected = true;
isExit = true;
break;
}
}
//Show出结果
if (isExit) {
alert("成功选中");
} else {
alert("该select中 不存在该项");
}
}
// 7.设置select中value="paraValue"的Item为选中
function check(){
var c = document.all.objSelect;
for (var i=0;i<c.options.length ;i++ ){
if (c.options(i).value==paraValue){
c.selectedIndex =i;
}
}
}
// 8.得到select的当前选中项的value
var currSelectValue = document.all.objSelect.value;
// 9.得到select的当前选中项的text
var currSelectText = document.all.objSelect.options[document.all.objSelect.selectedIndex].text;
// 10.得到select的当前选中项的Index
var currSelectIndex = document.all.objSelect.selectedIndex;
// 11.清空select的项
document.all.objSelect.options.length = 0;
详细出处参考：http://www.jb51.net/article/23747.htm
9701
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
