表单处理[2]

防止重复提交：

第一种方法：
<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');
})
})