js 操作form表单

拼搏现实的明天。 2021-07-24 12:21 478阅读 0赞

js 操作form表单
    
    	**获取表单对象**
    		除了document.getElemetById("xx"); 等常规获取方式
    		仅限于form的方式
    			document.name值
    				<form action="" method="get" id="fm" name="frm"></form>
    				var frm=document.frm
    	
    	**获取form下的所有表单元素对象集合**
    		只对表单元素有效(input、textarea、select)，其他标签无效
    		
    	**form对象常用方法**
    		form对象名.submit();  实现submit按钮功能提交数据，默认为一直提交;
    		form对象名.submit(function(event){ event.preventDefault()..再写自己的ajax请求})；
    		使得数据只提交一次
    		
    		form对象名.reset();  将form表单内的内容全部重置为初始状态
    		
    		from对象名.serialize()
       		 在表单为ajax的post请求中get请求自动获取,将表单元素input、textarea和select属性中的name和value，以及被选中的多选框、单选框
        	 若选中则value为on,未选中则跳过，所有name和value按照键值对,以url中的参数格式&分割，写成字符串 
            1、 button无效
        
    		from对象名.serializeArray(); 同serialize()，不过是将每对name和value存进对象中然后再放进数组里
    
    	
    	**form属性操作**
    		form.action="xx";  提交地址
    		form.method="xx";  提交方法
    	
    	**表单属性**
    		disabled="disabled"  无法点击,也不会提交
    		readonly="readonly"  只读
    		onSubmit='回调',设置按钮属性type='submit',能触发回调事件

代码示例：

<html>
    	<head>
    		<meta charset="utf-8">
    		<title>js 操作form</title>
    		<script type="text/javascript">
    			function t1()
    			{ 
    			// var fm=document.getElementById("fm");
    			// alert(fm);
    				/*form表单特殊操作*/
    				var frm=document.frm;
    			// alert(frm);
    				
    				/*获取form表单对象集合*/
    				alert(frm.elements.length);
    				/*常用方法*/
    				fm.submit();
    				fm.reset();
    				fm.action="http://www.baidu.com";
    				fm.method="get";
    			}
    			
    			
    			
    		</script>
    	</head>
    	<body>
    		<input type="button" name="" id="" value="测试form" onclick="t1()" />
    		<hr />
    		<form action="" method="get" id="fm" name="frm">
    			
    			
    		<b>用户名</b>:<input type="text" name="wd" id="uname" value="" readonly="readonly"/><br />
    		密码: 	<input type="password" name="pwd" id="pwd" value="" disabled="disabled"/><br />
    		<input type="submit" name="" id="" value="登录" />
    		<input type="submit" name="" id="" value="登录" />
    		<select name="" id="">
    			<option value="">a</option>
    			<option value="">b</option>
    		</select>
    		</form>
    	</body>
    </html>