js表单处理中单选、多选、选择框值的获取及表单的序列化_javascript技巧
程序员文章站
2022-04-08 19:47:37
...
本文总结了下在表单处理中单选、多选、选择框值的获取及表单的序列化,写成了一个对象。如下:
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 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 0) { arr.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(field.value)); } } } return arr.join("&"); } };
一个简单的demo:
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 + "
"; html += formUtil.getRadioValue(form.elements['sex']) + "
"; html += formUtil.getCheckboxValue(form.elements['hobby']) + "
"; html += formUtil.getSelectValue(form.elements['class']) + "
"; html += form.elements['other'].value + "
"; html += decodeURIComponent(formUtil.serialize(form)) + "
"; output.innerHTML = html; });
如果大家还想继续学习的话,请参考以下专题《javascript选择框操作》、《jquery选择框操作》
以上就是针对js表单处理中单选、多选、选择框值的获取及表单的序列化封装的对象,希望对打击的学习有所帮助。
上一篇: asp.net的几点汇总
下一篇: 关于MySQL 索引详解