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;
  1. // 不发送下列类型的表单字段
  2. case undefined :
  3. case "button" :
  4. case "submit" :
  5. case "reset" :
  6. case "file" :
  7. break;
  8. // 单选、多选和其他类型的表单处理
  9. case "checkbox" :
  10. if(checkboxName == null) {
  11. checkboxName = field.name;
  12. arr.push(encodeURIComponent(checkboxName) + "=" + encodeURIComponent(this.getCheckboxValue(form.elements[checkboxName])));
  13. }
  14. break;
  15. case "radio" :
  16. if(!field.checked) {
  17. break;
  18. }
  19. default:
  20. if(field.name.length > 0) {
  21. arr.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(field.value));
  22. }
  23. }

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

一个简单的demo:

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