获取表单常见方法:
1.添加id特性
var form=document.getElementById("form1");
2.通过document.forms可以取得页面中所有的表单
var firstForm=document.forms[0];//取得页面中的第一个表单
表单提交:
<!--通用表单提交按钮-->
<input type="submit" value="Submit" Form>
<!--自定义提交按钮-->
<button type="submit">Submit Form</button>
<!--图片按钮-->
<img type="image" src="img.jpg">
只要表单中存在上面列出的任何一种按钮,那么在相应表单控件拥有焦点的情况下,按回车键就可以提交表单。
在JavaScript中,以编程的方式调用submit()方法也可以提交表单。
var form=document.getElementById("form1");
form.submit();
重置表单:
<!--通用重置按钮-->
<input type="reset" value="Submit Form">
<!--自定义重置按钮-->
<button type="reset">Reset Form</button>
在重置表单中,所有的表单字段都会恢复到页面刚加载完毕时的初始状态。如果某个字段的初始值为空,就会恢复为空;而带有默认值的字段,也会恢复为默认值。
通过JavaScript来重置表单
var form=document.getElementById("form1");
form.reset();
跨浏览器的事件对象和事件处理程序:
var EventUtil={
addHandler:function(element,type,handler){
if(element.addEventListener){
element.addEventListener(type,handler,false);
}else if(element.attachEvent){
element.attachEvent("on"+type,handler);
}else{
element["on"+type]=handler;
}
},
getEvent:function(event){
return event?event:window.event;
},
getTarget:function(event){
return event.target||event.srcElement;
},
preventDefault:function(event){
if(event.preventDefault){
event.preventDefault;
}else{
event.returnValue=false;
}
},
removeHandler:function(element,type,handler){
if(element.removeEventListener){
element.addEventListener(type,handler,false);
}else if(element.detachEvent){
element.detachEvent("on"+type,handler);
}else{
element["on"+type]=null;
}
}
}
解决表单重复提交的方法:
1.在第一次提交表单后禁用提交按钮
//避免多次提交表单
EventUtil.addHandler(form,"submit",function(event){
event=EventUtil.getEvent(event);
var target=EventUtil.getTarget(event);
//取得提交按钮
var btn=target.element["submit-btn"];
//禁用它
btn.disabled=true;
});
2.利用onsubmit事件处理程序取消后续的表单提交操作。
共有表单字段方法:focus()和blur()
自动把焦点移动到相应字段:
<input type="type" autofocus>
为了保证上面的代码设置autofocus的浏览器中正常运行,必须先检测是否设置了该属性,如果设置了,就不用再调用focus()了。
EventUtil.addhandler(window,"load",function(event){
var element=document.forms[0].elements[0];
if(element.autofocus!==true){
element.focus();
}
})
选取select事件选择的文本
function getSelectedText(textbox){
if(typeof textbox.selectionStart=="number"){
return textbox.value.substring(textbox.selctionStart,textbox.selctionEnd);
}else if(document.selection){
return document.selection.createRange().text;
}
}
过滤输入:
只允许用户输入数值
EventUtil.addHandler(textbox,"keypress",function(event){
event=EventUtil.getEvent(event);
var target=EventUtil.getTarget(event);
var charCode=EventUtil.getCharCode(evnet);
if(!/\d/.test(String.formCharCode(charCode))&&charCode>9&&!event.ctrlkey){
EventUtil.preventDefault(event);
}
});
自动切换焦点:
html
<input type="text" name="tel1" id="txtTel1" maxlength="3">
<input type="text" name="tel2" id="txtTel2" maxlength="3">
<input type="text" name="tel3" id="txtTel3" maxlength="4">
js
(function(){
function tabForward(event){
event=EventUtil.getEvent(event);
var target=EventUtil.getTarget(event);
if(target.value.length==target.maxLength){
var form=target.form;
for(var i=0,len=form.elements.length;i<len;i++){
if(form.element[i]==target){
if(form.elements[i+1]){
form.elements[i+1].focus();
}
return;
}
}
}
}
var textbox1=document.getElementById("txtTel1");
var textbox2=document.getElementById("txtTel2");
var textbox3=document.getElementById("txtTel3");
EventUtil.addHandler(textbox1,"keyup",tabForward);
EventUtil.addHandler(textbox2,"keyup",tabForward);
EventUtil.addHandler(textbox3,"keyup",tabForward);
})()
表单序列化:
浏览器怎样将数据发送给服务器
1.对表单字段的名称和值进行URL编码,使用和号(&)分隔
2.不发送禁用的表单字段
3.只发送勾选的复选框和单选按钮
4.不发送type为"reset"和"button"的按钮
5.多选选择框中的每个选中的值单独一个条目
6.在单击提交按钮提交表单的情况下,也会发送提交按钮;否则,不发送提交按钮。也包括type为"image"的元素
7.元素的值,就是选中的元素的value特性的值。如果元素没有value特性,则是元素的文本值。
function serialize(form){
var parts=[],field=null,i,len,j,optLen,option,optValue;
for(i=0,len=form.elements.length;i<len;i++){
field=form.elements[i];
switch(field.type){
case "select-one":
case "select-multiple":
if(field.name.length){
for(j=0,optlen=field.options.length;j<optLen;j++){
option=field.options[j];
if(option.selected){
optValue="";
if(option.hasAttribute){
optValue=(option.hasAttribute("value")?option.value:option.text);
}else{
optValue=(option.hasAttribute["value"].specified?option.value:option.text);
}
parts.push(encodeURIComponent(field.name)+"="+encodeURIComponent(optValue));
}
}
}
break;
case undefined:
case "file":
case "submit":
case "reset":
case "button":
break;
case "radio":
case "checkbox":
if(!field.checked){
break;
}
defalut:
if(field.name.length){
parts.push(encodeURIComponent(field.name)+"="+encodeURIComponent(field.value));
}
}
}
return parts.join("&");
}