防止重复提交:
第一种方法:
<form id="myForm" name="yourForm">
姓名:<input type="text" name="user"/>
<input id="sub" type="submit" value="提交"/>
</form>
addEvent(window,‘load‘,function(){
var fm=document.getElementById(‘myForm‘);
//阻止提交
addEvent(fm,‘submit‘,function(evt){
preDef(evt);
//模拟延迟
alert(‘提交‘);
//这种方法,只限于通过提交按钮防止重复提交的,
//document.getElementById(‘sub‘).disabled=true; //第一次提交后,将按钮禁用
setTimeout(function(){
fm.submit();
},5000);
})
})
第二种方法:
<form id="myForm" name="yourForm">
姓名:<input type="text" name="user"/>
<input id="sub" type="submit" value="提交"/>
</form>
addEvent(window,‘load‘,function(){
var fm=document.getElementById(‘myForm‘);
var flag=false;
//阻止提交
addEvent(fm,‘submit‘,function(evt){
preDef(evt);
//模拟延迟
if(flag==true) return;
flag=true; //表示我提交过一次了
alert(‘提交‘);
setTimeout(function(){
fm.submit();
},5000);
})
})
--------------------------------------------------------------
不常用,用户体验比较差:
addEvent(window,‘load‘,function(){
var fm=document.getElementById(‘myForm‘);
//reset事件,reset()方法
addEvent(fm,‘reset‘,function(){
alert(‘Lee‘);
});
addEvent(document,‘click‘,function(){
fm.reset();
})
})
--------------------------------------------------------------
获取表单控件(HTMLDOM):
<form id="myForm" name="yourForm">
姓名:<input type="text" name="user"/>
<input id="sub" type="submit" value="提交"/>
</form>
addEvent(window,‘load‘,function(){
var fm=document.getElementById(‘myForm‘);
// alert(fm.elements); //表单控件集合,HTMLCollection
// alert(fm.elements.length); //推荐使用
// alert(fm.elements[0]); //[object HTMLInputElement]
// alert(fm.elements[‘user‘]); //也可以获取第0个元素
//PS:表单控件是什么?form里面的input submit textarea select 这些叫做表单控件,其实就是表单元素标签
//PS:通过表单结合获取第一个元素,非表单控件会被忽略掉
})
--------------------------------------------------------------
<form id="myForm" name="yourForm">
<p>111</p>
姓名:<input type="text" name="user"/>
<input type="radio" name="sex" value="男" checked="checked"/>男
<input type="radio" name="sex" value="女"/>女
<input id="sub" type="submit" value="提交"/>
<strong>123</strong>
</form>
addEvent(window,‘load‘,function(){
var fm=document.getElementById(‘myForm‘);
var sexList=fm.elements[‘sex‘];
// alert(sexList); //[object RadioNodeList]
// alert(sexList[0]);
// alert(sexList[0].value); //男
// alert(sexList[0].name); //sex
// sexList[1].disabled=true; //禁用
// alert(sexList[0].form); //得到从属的form对象,得到父类 [object HTMLFormElement]
// alert(sexList[0].type); //radio
sexList[0].type=‘checkbox‘; //还可以改为复选框,但不推荐使用此属性修改
})
<form id="myForm" name="yourForm">
姓名:<input type="text" name="user"/>
<input id="sub" type="submit" value="提交"/>
</form>
addEvent(window,‘load‘,function(){
var fm=document.getElementById(‘myForm‘);
var user=fm.elements[‘user‘];
user.focus(); //将焦点移入
user.blur(); //将焦点移出
})
addEvent(window,‘load‘,function(){
var fm=document.getElementById(‘myForm‘);
var user=fm.elements[‘user‘];
// user.focus(); //将焦点移入
// user.blur(); //将焦点移出
// addEvent(user,‘focus‘,function(){
// alert(‘Lee‘);
// })
// addEvent(user,‘blur‘,function(){
// alert(‘blur‘);
// })
addEvent(user,‘change‘,function(){
alert(‘change‘);
})
})