javascript学习3---Js表单操作
2013-08-23 13:55
344 查看
1.鼠标经过自动选择文本:
Onmouseover=”this.focus()”
Onfocus=”this.select()”
2.对单选按钮的设置
Function getChice(){
Var oform = document.froms[myForm1];
Var aChoices = oform.camera;
For(var i=1;i<aChoices.length;i++){
If(aChoices[i].checked)
Break;
alert(“你目前使用的相机是:”+ aChoices[i].value);
}
}
3.对多选框的设置
<input type=”button” value=”全选” onclick=”changeBoxes(1);”/>
<input type=”button” value=”不选” onclick=”changeBoxes(0);”/>
<input type=”button” value=”反选” onclick=”changeBoxes(-1);”/>
Function changeBoxes(action){
Var oform = document.forms[myForm1];
Var ocheckBox = oform.hobby;
For(var i=1;i<aChoices.length;i++){
If(action<0){
ocheckBox[i].checked=!ocheckBox[i].checked;
}else{
ocheckBox[i].checked=action; }
}
4.对下拉菜单的设置
1 length 表示选项<option>个数
2 selected 布尔值,表示选项<option>是否选中
3
SelectedIndex 被选中的序号,如果没有被选中的则为-1,对于多选下拉菜单而言,返回被选中的是第一个序号。从0开始的。
4 text 选项的文本
5 value 选项的value值
6 type 下拉菜单的类型。单选返回select-one,多选返回select-multiple
7 options 获取选项的数组,例如oSelectBox.options[2]表示下拉菜单oSelectBoxd的第3项
一般情况下,下拉菜单有多选和单选,如果只有单选,则直接用SelectedIndex ,直接获得被选中的项,但是有多选的话就只能遍历真个列表了。如果是多选和单选的混合,为了效率,先判断是单选还是多选,如果是单选直接获得SelectedIndex ,这样省的遍历整个列表,提高效率。
Js部分主要代码如下:
<script language=”javascript”>
Function getSelectValue(Box){
Var oForm=document.forms[myForm1];
Var oSelectBox = oForm.elements[Box];//根据参数获取下拉菜单
If(oSelectBox.type==”select-one”){//判断是多选还是单选
Var ichoice = oSelectBox.oSelectBox.selectedIndex;//获取选中
Alert(“你选中的是”+ ichoice);
}else{
Var achoices = new Array();
//遍历整个下拉菜单
For(var i=1;i<achoices.length;i++){
If(oSelectBox.option[i].selected)//如果被选中
achoices.push(oSelectBox.option[i].text);//压入数组
Alert(“你选中的是”+ achoices.join());//输出结果
}
}
</script>
下拉菜单的操作在大多数情况下还有添加,替换,删除选项的功能
1. 增加需要new一个option如下:
Var oOption = new Option(text,value,defaultSelected,selected);
后两项默认值为0,如果不希望选中则可以忽略。添加时通常把第length项直接设置为选中。代码如下:
<script language=”javascript”>
Function AddOption(Box){
Var oForm = document.forms[“myForm1”];
Var oBox = oForm.elements[Box];
Var oOption = new Option(“乒乓球”,”pingpang”);//new一个Option
oBox.options[oBox.options.length]=oOption;//添加到下拉菜单
}
</script>
2. 如果下拉菜单的序号是已经存在的选项,添加时会自动替换原来的选项,如:
oBox.options[iNum]=oOption; //替换第iNum个选项
3. 删除选项,就是把某项值赋为null。如下代码:
oBox.options[iNum]=null; //删除achoices第iNum个选项
5.提交表单:
提交表单 可以直接用控件submit,也可以用submit()函数。
a. Var oForm= document.forms[“myForm1”];
oForm.submit();
b.<input type=”button” value=”submit” onclick=”document.form[myForm1].submit();”/>
c.<input type=”submit” value=”submit”>
有很多时候防止重复提交,则这样写,如下:
<input type=”button” value=”submit” onclick=”this.disabled=true;this.form.submit();”/>
Onmouseover=”this.focus()”
Onfocus=”this.select()”
2.对单选按钮的设置
Function getChice(){
Var oform = document.froms[myForm1];
Var aChoices = oform.camera;
For(var i=1;i<aChoices.length;i++){
If(aChoices[i].checked)
Break;
alert(“你目前使用的相机是:”+ aChoices[i].value);
}
}
3.对多选框的设置
<input type=”button” value=”全选” onclick=”changeBoxes(1);”/>
<input type=”button” value=”不选” onclick=”changeBoxes(0);”/>
<input type=”button” value=”反选” onclick=”changeBoxes(-1);”/>
Function changeBoxes(action){
Var oform = document.forms[myForm1];
Var ocheckBox = oform.hobby;
For(var i=1;i<aChoices.length;i++){
If(action<0){
ocheckBox[i].checked=!ocheckBox[i].checked;
}else{
ocheckBox[i].checked=action; }
}
4.对下拉菜单的设置
1 length 表示选项<option>个数
2 selected 布尔值,表示选项<option>是否选中
3
SelectedIndex 被选中的序号,如果没有被选中的则为-1,对于多选下拉菜单而言,返回被选中的是第一个序号。从0开始的。
4 text 选项的文本
5 value 选项的value值
6 type 下拉菜单的类型。单选返回select-one,多选返回select-multiple
7 options 获取选项的数组,例如oSelectBox.options[2]表示下拉菜单oSelectBoxd的第3项
一般情况下,下拉菜单有多选和单选,如果只有单选,则直接用SelectedIndex ,直接获得被选中的项,但是有多选的话就只能遍历真个列表了。如果是多选和单选的混合,为了效率,先判断是单选还是多选,如果是单选直接获得SelectedIndex ,这样省的遍历整个列表,提高效率。
Js部分主要代码如下:
<script language=”javascript”>
Function getSelectValue(Box){
Var oForm=document.forms[myForm1];
Var oSelectBox = oForm.elements[Box];//根据参数获取下拉菜单
If(oSelectBox.type==”select-one”){//判断是多选还是单选
Var ichoice = oSelectBox.oSelectBox.selectedIndex;//获取选中
Alert(“你选中的是”+ ichoice);
}else{
Var achoices = new Array();
//遍历整个下拉菜单
For(var i=1;i<achoices.length;i++){
If(oSelectBox.option[i].selected)//如果被选中
achoices.push(oSelectBox.option[i].text);//压入数组
Alert(“你选中的是”+ achoices.join());//输出结果
}
}
</script>
下拉菜单的操作在大多数情况下还有添加,替换,删除选项的功能
1. 增加需要new一个option如下:
Var oOption = new Option(text,value,defaultSelected,selected);
后两项默认值为0,如果不希望选中则可以忽略。添加时通常把第length项直接设置为选中。代码如下:
<script language=”javascript”>
Function AddOption(Box){
Var oForm = document.forms[“myForm1”];
Var oBox = oForm.elements[Box];
Var oOption = new Option(“乒乓球”,”pingpang”);//new一个Option
oBox.options[oBox.options.length]=oOption;//添加到下拉菜单
}
</script>
2. 如果下拉菜单的序号是已经存在的选项,添加时会自动替换原来的选项,如:
oBox.options[iNum]=oOption; //替换第iNum个选项
3. 删除选项,就是把某项值赋为null。如下代码:
oBox.options[iNum]=null; //删除achoices第iNum个选项
5.提交表单:
提交表单 可以直接用控件submit,也可以用submit()函数。
a. Var oForm= document.forms[“myForm1”];
oForm.submit();
b.<input type=”button” value=”submit” onclick=”document.form[myForm1].submit();”/>
c.<input type=”submit” value=”submit”>
有很多时候防止重复提交,则这样写,如下:
<input type=”button” value=”submit” onclick=”this.disabled=true;this.form.submit();”/>
相关文章推荐
- javascript学习3---Js表单操作
- Javascript入门学习第七篇 js dom实例操作第1/2页
- 关于javascript操作表单提交JS报错的一点总结
- 【JS学习笔记】04 JavaScript 表单验证
- js学习笔记11----表单操作
- javaScript学习笔记(1)——js表单提交验证
- JS学习笔记1——不要使用JavaScript内置的parseInt()和Number()函数,利用map和reduce操作实现一个string2int()函数
- JavaScript学习笔记二十五:操作表单
- Javascript入门学习第七篇 js dom实例操作第1/2页
- JavaScript学习——使用JS完成注册页面表单校验
- javascript学习笔记--js对html对象的原生操作
- JavaScript学习——使用JS完成全选和全不选操作
- 2016.06.17廖雪峰JS__学习笔记(操作表单)__P13
- JS学习-操作表单
- 20180301:JavaScript的初步学习,JS的数据类型与变量,函数,DOM操纵HTML,BOM操作浏览器
- 廖雪峰js教程学习——操作表单
- 学习vue.js表单控件绑定操作
- 学习JavaScript 的必备 (一),让您对js的 function, javascript内置对象,this概念及之间的关系不再迷惑。(希望能置为推荐篇,为更多的js初学者关注)
- javascript 学习一:js语法基础
- Javascript学习------js 简单模拟时钟