js表单中选择框值的获取及表单的序列化

前端之家收集整理的这篇文章主要介绍了js表单中选择框值的获取及表单的序列化前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文特意为js表单中选择框值的获取及表单的序列化做了下总结,写成了一个对象,分享给大家,欢迎大家学习。

获取单选按钮的值,如有没有选的话返回null // elements为radio类的集合的引用 getRadioValue:function(elements) { var value = null; // null表示没有选中项 // 非IE浏览器 if(elements.value != undefined && elements.value != '') { value = elements.value; } else { // IE浏览器 for(var i = 0,len = elements.length; i < len; i++ ) { if(elements[i].checked) { value = elements[i].value; break; } } } return value; },// 获取多选按钮的值,如有没有选的话返回null // elements为checkBox类型的input集合的引用 getCheckBoxValue:function(elements) { var arr = new Array(); for(var i = 0,len = elements.length; i < len; i++ ) { if(elements[i].checked) { arr.push(elements[i].value); } } if(arr.length > 0) { return arr.join(','); } else { return null; // null表示没有选中项 } },// 获取下拉框的值 // element为select元素的引用 getSelectValue:function(element) { if(element.selectedIndex == -1) { return null; // 没有选中的项时返回null }; if(element.multiple) { // 多项选择 var arr = new Array(),options = element.options; for(var i = 0,len = options.length; i < len; i++) { if(options[i].selected) { arr.push(options[i].value); } } return arr.join(","); }else{ // 单项选择 return element.options[element.selectedIndex].value; } },// 序列化 // form为form元素的引用 serialize:function(form) { var arr = new Array(),elements = form.elements,checkBoxName = null; for(var i = 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;
 // 不发送下列类型的表单字段 
 case undefined :
 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));
  } 
}

}
return arr.join("&");
}
};

一个简单的demo:

PHP.PHP" id="form1" name="form1" method="post" enctype="multipart/form-data"> 姓名:
性别:dio" value="男"/> 男
爱好: 篮球 足球 乒乓球 羽毛球
年级:
其他: