欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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表单处理中单选、多选、选择框值的获取及表单的序列化封装的对象,希望对打击的学习有所帮助。