javascript 基础知识

获取表单

Js代码  

1. document.forms[0]   
2. document.forms["mainForm"]     
3. <form name="mainForm"></form>  

document.forms[0]
document.forms["mainForm"]  
<form name="mainForm"></form>

表单中元素

Js代码  

1. document.forms[0].elements["element1"]   
2. document.mainForm.element1;   
3. <input name="element1" />  

document.forms[0].elements["element1"]
document.mainForm.element1;
<input name="element1" />

每个表单元素都支持form属性

Js代码  

1. this.form //指向元素所在的表单  

this.form //指向元素所在的表单

访问文本域

Js代码  

1. myform.elements["textfield"].value;  

myform.elements["textfield"].value;

复选框

Js代码  

1. myform.elements["chkbox"][i].checked? "checked":"not checked";  

myform.elements["chkbox"][i].checked? "checked":"not checked";

单选框

Js代码  

1. f.elements["radiobutton"][i].value;   
2. f.elements["radiobutton"][i].checked?"checked":"not checked";  

f.elements["radiobutton"][i].value;
f.elements["radiobutton"][i].checked?"checked":"not checked";

列表框

Js代码  

1. var index = f.elements["selectionlist"].selectedIndex;   
2. //selectedIndex: 当前所选中列表项的索引（从0开始），“-1”表示未选值   
3. //options: 所有列表项组成的数组。   
4. //options[index] 选中的node   
5.   
6. //对于每一个option   
7. //selected属性，为true时表示被选中。   
8. //value 选中的发送数据   
9. //text 显示的文字   
10.   
11. //获取列表框当前选择的值   
12. f.elements["selectionList"].options[f.elements["selectionList"].selectedIndex].value   
13.   
14. //动态添加列表元素   
15. for(var i=0;i<links.length; i++){   
16.      elements["urls"].options[elements["urls"].options.length]=new Option(links[i].title, links[i].url);   
17. }  

var index = f.elements["selectionlist"].selectedIndex;
//selectedIndex: 当前所选中列表项的索引（从0开始），“-1”表示未选值
//options: 所有列表项组成的数组。
//options[index] 选中的node

//对于每一个option
//selected属性，为true时表示被选中。
//value 选中的发送数据
//text 显示的文字

//获取列表框当前选择的值
f.elements["selectionList"].options[f.elements["selectionList"].selectedIndex].value

//动态添加列表元素
for(var i=0;i<links.length; i++){
     elements["urls"].options[elements["urls"].options.length]=new Option(links[i].title, links[i].url);
}

禁用表单元素

Js代码  

1. f.elements["password"].disabled = true; //变灰   
2. f.elements["password"].readOnly= true; //不变色   
3. <input type="text" οnfοcus="this.blur();" />  

f.elements["password"].disabled = true; //变灰
f.elements["password"].readOnly= true; //不变色
<input type="text" οnfοcus="this.blur();" />

防止表单提交

Html代码  

1. <form onsubmit="return checkform(this);">  

<form οnsubmit="return checkform(this);">

防止重复提交

Html代码  

1. <input type="submit" value="submit" onclick="this.disable=true;" />  

<input type="submit" value="submit" οnclick="this.disable=true;" />

设置焦点

Js代码  

1. document.forms[0].elements["textField"].focus();  

document.forms[0].elements["textField"].focus();

选中表单域中的文本

Js代码  

1. var field = f.elements["textField"];   
2. if(field.createTextRange){//IE   
3.      var range = field.createTextRange();   
4.      range.moveStart("character",0);   
5.      range.moveEnd("character",field.value.length-1);   
6.      range.select();   
7. }else if(field.setSelectionRange){//Other brower   
8.      field.setSelectionRange(0.field.value.length);   
9. }   
10. field.focus();  

var field = f.elements["textField"];
if(field.createTextRange){//IE
     var range = field.createTextRange();
     range.moveStart("character",0);
     range.moveEnd("character",field.value.length-1);
     range.select();
}else if(field.setSelectionRange){//Other brower
     field.setSelectionRange(0.field.value.length);
}
field.focus();

获取元素的表单域类型

Js代码  

1. element.type   
2. //所有元素的type属性都可以返回相应的表单域类型: button, checkbox, password, radio, reset, select-one, select-multiple, submit, text, textarea