首页 / 脚本样式 / JavaScript / 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（"&"）;}};

<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; }）;