js表单中选择框值的获取及表单的序列化
本文特意为js表单中选择框值的获取及表单的序列化做了下总结，写成了一个对象，分享给大家，欢迎大家学习。
varformUtil={
//获取单选按钮的值，如有没有选的话返回null
//elements为radio类的集合的引用
getRadioValue:function(elements){
varvalue=null;//null表示没有选中项
//非IE浏览器
if(elements.value!=undefined&&elements.value!=''){
value=elements.value;
}else{
//IE浏览器
for(vari=0,len=elements.length;i<len;i++){
if(elements[i].checked){
value=elements[i].value;
break;
}
}
}
returnvalue;
},
//获取多选按钮的值，如有没有选的话返回null
//elements为checkbox类型的input集合的引用
getCheckboxValue:function(elements){
vararr=newArray();
for(vari=0,len=elements.length;i<len;i++){
if(elements[i].checked){
arr.push(elements[i].value);
}
}
if(arr.length>0){
returnarr.join(',');
}else{
returnnull;//null表示没有选中项
}
},
//获取下拉框的值
//element为select元素的引用
getSelectValue:function(element){
if(element.selectedIndex==-1){
returnnull;//没有选中的项时返回null
};
if(element.multiple){
//多项选择
vararr=newArray(),options=element.options;
for(vari=0,len=options.length;i<len;i++){
if(options[i].selected){
arr.push(options[i].value);
}
}
returnarr.join(",");
}else{
//单项选择
returnelement.options[element.selectedIndex].value;
}
},
//序列化
//form为form元素的引用
serialize:function(form){
vararr=newArray(),
elements=form.elements,
checkboxName=null;
for(vari=0,len=elements.length;i<len;i++){
field=elements[i];
//不发送禁用的表单字段
if(field.disabled){
continue;
}
switch(field.type){
//选择框的处理
case"select-one":
case"select-multiple":
arr.push(encodeURIComponent(field.name)+"="+encodeURIComponent(this.getSelectValue(field)));
break;
//不发送下列类型的表单字段
caseundefined:
case"button":
case"submit":
case"reset":
case"file":
break;
//单选、多选和其他类型的表单处理
case"checkbox":
if(checkboxName==null){
checkboxName=field.name;
arr.push(encodeURIComponent(checkboxName)+"="+encodeURIComponent(this.getCheckboxValue(form.elements[checkboxName])));
}
break;
case"radio":
if(!field.checked){
break;
}
default:
if(field.name.length>0){
arr.push(encodeURIComponent(field.name)+"="+encodeURIComponent(field.value));
}
}
}
returnarr.join("&");
}
};
一个简单的demo：
<formaction="test_php.php"id="form1"name="form1"method="post"enctype="multipart/form-data"> 姓名：<inputname="name"type="text"tabindex="1"/><br> 性别：<inputname="sex"type="radio"value="男"/>男 <inputname="sex"type="radio"value="女"/>女<br> 爱好： <inputname="hobby"type="checkbox"value="篮球"/>篮球 <inputname="hobby"type="checkbox"value="足球"/>足球 <inputname="hobby"type="checkbox"value="乒乓球"/>乒乓球 <inputname="hobby"type="checkbox"value="羽毛球"/>羽毛球 <br/> 年级： <selectname="class"multiple> <optionvalue="一年级">一年级</option> <optionvalue="二年级">二年级</option> <optionvalue="三年级">三年级</option> </select> <br/> 其他： <br/> <textareaname="other"rows="5"cols="30"tabindex="2"></textarea> <br/> <inputtype="reset"value="重置"/> <inputtype="submit"value="提交"/> </form> <divid="output"></div>
varform=document.getElementById("form1"),
output=document.getElementById("output");
//自定义的提交事件
EventUtil.addEventListener(form,"submit",function(event){
event=EventUtil.getEvent(event);
EventUtil.preventDefault(event);
varhtml="";
html+=form.elements['name'].value+"<br>";
html+=formUtil.getRadioValue(form.elements['sex'])+"<br>";
html+=formUtil.getCheckboxValue(form.elements['hobby'])+"<br>";
html+=formUtil.getSelectValue(form.elements['class'])+"<br>";
html+=form.elements['other'].value+"<br>";
html+=decodeURIComponent(formUtil.serialize(form))+"<br>";
output.innerHTML=html;
});
代码出现的EventUtil在这篇文章有介绍：《js跨浏览器的事件侦听器和事件对象的使用方法》
以上就是对js表单中选择框值的获取及表单的序列化的详细介绍，希望对大家的学习有所帮助。