js 操作form表单
葛承教
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>
类似资料：