js操作form表单

  • 获取form表单对象
    • 使用id:var fm=document.getElementById(“fm”);
    • 使用name属性:var frm=document.frm;—-少见
    • 获取form下的所有表单元素对象集合：fm.elements
  • form表单的常用方法
    • 表单对象.submit();—-提交表单数据。
  • form的属性操作：
    • 表单对象名.action=”新的值”—-动态的改变数据的提交路径
    • 表单对象名.method=”新的值”—-动态的改变提交方式（get/post)
  • js表单元素的通用属性
    • 只读模式:
      • readonly=”readonly”—-不可以更改，但是数据可以提交
    • 关闭模式：
      • disabled=”disabled”—-不可以进行任何的操作，数据不会提交。 
        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        14
        15
        16
        17
        18
        19
        20
        21
        22
        23
        24
        25
        26
        27
        28
        29
        30
        31
        32
        33
        34
        <html>
        	<head>
        		<title>js操作form表单</title>
        		<meta charset="UTF-8"/>
        		<script type="text/javascript">
        			//
        			function testForm(){
        				//获取form表对象
        					var fm=document.getElementById("fm");
        					//alert(fm);
        				//使用form表单的name属性值来获取
        					var frm=document.frm;
        					//alert(frm===fm);
        				//获取form表单元素对象集合
        					//alert(fm.elements.length);
        				//form表单的常用方法
        					//fm.submit();很重要
        					fm.reset();
        				//form的属性操作
        					fm.action="http://www.baidu.com/s";
        			}
        		</script>
        	</head>
        	<body>
        		<h3>js操作form表单</h3>
        		<input type="button" name="" id="" value="测试操作form" onclick="testForm()" />
        		<hr />
        		<form action="#" method="get" id="fm" name="frm">
        		<b>用户名：</b><input type="text" name="uname" id="uname" value="只读" readonly="readonly"/><br /><br />
        			密码： <input type="password" name="pwd" id="pwd" value=""  disabled="disabled"/><br /><br />
        			<input type="submit" name="" id="" value="登录" />
        		</form>
        	</body>
        </html>

        js操作多选框单选框

  • 单选框：被选中状态下在js中checked属性值为true,未选中状态为false;
  • 下拉框：被选择的option对象在js中selected属性值为true，未选中为false
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    <html>
    	<head>
    		<title>操作表单元素</title>
    		<meta charset="UTF-8"/>
    		<!--声明js代码域-->
    		<script type="text/javascript">
    			//多选框操作
    				function testCheckBox(){
    					//获取所有的多选元素对象数组
    						var favs=document.getElementsByName("fav");
    					//遍历数组
    						for(var i=0;i<favs.length;i++){
    							if(favs[i].checked){
    								alert(favs[i].value+":"+favs[i].checked);
    							}
    						}
    				}
    				//全选
    				function testCheckBox2(){
    					var favs=document.getElementsByName("fav");
    					for(var i=0;i<favs.length;i++){
    						favs[i].checked=true;
    					}
    				}
    				//反选
    				function testCheckBox3(){
    					var favs=document.getElementsByName("fav");
    					for(var i=0;i<favs.length;i++){
    						favs[i].checked=!favs[i].checked;
    					}
    				}
    			//操作下拉框
    				function testSel(){
    					//获取下拉框对象
    						var sel=document.getElementById("address");
    						//alert(sel.value);
    					//获取option对象集合
    					var os=sel.options;
    					for(var i=0;i<os.length;i++){
    						if(os[i].selected){
    							
    						alert(os[i].value+":"+os[i].text);
    						}
    					}
    				}
    				
    				
    				
    		</script>
    	</head>
    	<body>
    		<h3>操作表单元素</h3>
    		<hr />
    		<b>操作多选框</b><br /><br />
    		<input type="checkbox" name="fav" id="fav" value="1" />远走高飞<br />
    		<input type="checkbox" name="fav" id="fav" value="2" />当<br />
    		<input type="checkbox" name="fav" id="fav" value="3" />李白<br />
    		<input type="checkbox" name="fav" id="fav" value="4" />杜甫<br />
    		<input type="checkbox" name="fav" id="fav" value="5" />see you again<br />
    		<input type="checkbox" name="fav" id="fav" value="6" />fade<br /><br /><br />
    		<input type="button" name="" id="" value="播放" onclick="testCheckBox()"/>
    		<input type="button" name="" id="" value="全选" onclick="testCheckBox2()"/>
    		<input type="button" name="" id="" value="反选" onclick="testCheckBox3()"/>
    		<hr />
    		<select name="" id="address" onchange="testSel()">
    			<option value="0">--请选择--</option>
    			<option value="1" >北京</option>
    			<option value="2">上海</option>
    			<option value="3">广州</option>
    		</select>	
    	</body>
    </html>