js表单处理中单选、多选、选择框值的获取及表单的序列化
更新时间:2016年3月10日 10:00 点击:1686
本文总结了下在表单处理中单选、多选、选择框值的获取及表单的序列化,写成了一个对象。如下:
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表单处理中单选、多选、选择框值的获取及表单的序列化封装的对象,希望对打击的学习有所帮助。
相关文章
- 本篇文章主要分享了通过window.navigator来判断浏览器及其版本信息的实例代码。具有一定的参考价值,下面跟着小编一起来看下吧...2017-01-23
- 这篇文章主要介绍了js如何实现浏览器打印功能,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-15
- 下面小编就为大家带来一篇利用JS实现点击按钮后图片自动切换的简单方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2016-10-25
- 那么今天我就用JavaScript代码来实现这个效果吧,那么首先介绍一下整个的思路,首先我们先将确定输入密码的位数,我的需求是5位,那么就用一个div标签包住5个input标签...2016-01-02
- 作为前端,一直以来都知道HTTP劫持与XSS跨站脚本、CSRF跨站请求伪造。防御这些劫持最好的方法是从后端入手,前端能做的太少。而且由于源码的暴露,攻击者很容易绕过防御手段。但这不代表我们去了解这块的相关知识是没意义的,本文的许多方法,用在其他方面也是大有作用。...2021-05-24
- 这篇文章主要为大家详细介绍了js实现上传图片及时预览的相关资料,具有一定的参考价值,感兴趣的朋友可以参考一下...2016-05-09
- 这篇文章主要给大家介绍了关于Nest.js参数校验和自定义返回数据格式的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-28
- 这篇文章主要为大家详细介绍了js+css实现回到顶部按钮back to top回到顶部按钮,感兴趣的小伙伴们可以参考一下...2016-03-03
- 这篇文章主要介绍了如何使用JavaScript实现“无缝滚动 自动播放”轮播图效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-08-20
- 这篇文章主要给大家介绍了一个关于JS正则匹配的踩坑记录,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-13
- 有时候我们需要屏蔽客户端的F12,以防菜鸟也可以随意修改我们的代码,也处于源码的保护等操作,这里就为大家分享一下常见的代码...2020-10-03
- 这篇文章主要介绍了js实现调用网络摄像头及常见错误处理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-07
- 这篇文章主要为大家详细介绍了JS实现随机生成验证码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-06
- 这篇文章主要介绍了js组件SlotMachine实现图片切换效果制作抽奖系统的相关资料,需要的朋友可以参考下...2016-04-19
- 系统的学习了一下angularjs,发现angularjs的有些思想根php的模块smarty很像,例如数据绑定,filter。如果对smarty比较熟悉的话,学习angularjs会比较容易一点,这篇文章给大家介绍angularjs filter用法详解,感兴趣的朋友一起学习吧...2015-12-29
- 这篇文章主要为大家详细介绍了js实现列表按字母排序,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-08-11
- 这篇文章主要介绍了基于JavaScript实现文字超出部分隐藏 的相关资料,需要的朋友可以参考下...2016-03-01
- 这篇文章主要介绍了node.js如何操作MySQL数据库,帮助大家更好的进行web开发,感兴趣的朋友可以了解下...2020-10-29
- 这篇文章主要介绍了JS创建Tag标签的方法,结合具体实例形式分析了javascript动态操作页面HTML元素实现tag标签功能的步骤与相关操作技巧,需要的朋友可以参考下...2017-06-15
- 本文给大家介绍的是nodejs实现使用阿里大鱼短信API发送消息的方法和代码,有需要的小伙伴可以参考下。...2016-01-20