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

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

var formUtil = { // 获取单选按钮的值，如有没有选的话返回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：

<form action='test_php.php' id='form1' name='form1' method='post' enctype='multipart/form-data'>  姓名：<input name='name' type='text' tabindex='1' /> <br>  性别：<input name='sex' type='radio' value='男'/> 男     <input name='sex' type='radio' value='女' /> 女 <br>  爱好：  <input name='hobby' type='checkbox' value='篮球' /> 篮球  <input name='hobby' type='checkbox' value='足球' /> 足球  <input name='hobby' type='checkbox' value='乒乓球' /> 乒乓球  <input name='hobby' type='checkbox' value='羽毛球' /> 羽毛球  <br />  年级：  <select name='class' multiple>   <option value='一年级'>一年级</option>   <option value='二年级'>二年级</option>   <option value='三年级'>三年级</option>  </select>  <br />   其他：   <br />   <textarea name='other' rows='5' cols='30' tabindex='2'></textarea>   <br />   <input type='reset' value='重置' />   <input type='submit' value='提交' /> </form> <div id='output'></div>

var form = document.getElementById('form1'), output = document.getElementById('output'); // 自定义的提交事件 EventUtil.addEventListener(form,'submit', function(event) { event = EventUtil.getEvent(event); EventUtil.preventDefault(event); var html = ''; 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; });

如果大家还想继续学习的话，请参考以下专题《javascript选择框操作》、《jquery选择框操作》

以上就是针对js表单处理中单选、多选、选择框值的获取及表单的序列化封装的对象，希望对打击的学习有所帮助。