js表单处理中单选、多选、选择框值的获取及表单的序列化

本文总结了下在表单处理中单选、多选、选择框值的获取及表单的序列化,写成了一个对象。如下:

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:


性别:
爱好: 篮球 足球 乒乓球 羽毛球
年级:
其他: