当前位置: 首页 > 编程笔记 >

js表单中选择框值的获取及表单的序列化

单琛
2023-03-14
本文向大家介绍js表单中选择框值的获取及表单的序列化,包括了js表单中选择框值的获取及表单的序列化的使用技巧和注意事项,需要的朋友参考一下

本文特意为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;
 });

代码出现的EventUtil在这篇文章有介绍: 《js跨浏览器的事件侦听器和事件对象的使用方法》

以上就是对js表单中选择框值的获取及表单的序列化的详细介绍,希望对大家的学习有所帮助。

 类似资料:
  • 本文向大家介绍js简单获取表单中单选按钮值的方法,包括了js简单获取表单中单选按钮值的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了js简单获取表单中单选按钮值的方法。分享给大家供大家参考,具体如下: HTML部分如下: JS代码如下: 更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总

  • 本文向大家介绍js获取form表单中name属性的值,包括了js获取form表单中name属性的值的使用技巧和注意事项,需要的朋友参考一下 在项目中因为动态表单无法确定标签name属性的值,因此需要即时获取以便进行存储。前端代码如下: 1、attr:$("#formAttribute1").attr("name");然后得到的值是formAttribute1(有没有前辈能给我讲讲为什么呀) 2、p

  • 本文向大家介绍js实现不提交表单获取单选按钮值的方法,包括了js实现不提交表单获取单选按钮值的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了js实现不提交表单获取单选按钮值的方法。分享给大家供大家参考。具体如下: 这是JS实现的特效,不提交表单获取相关的控件值。如本例所示,不提交表单即可获取单选按钮的值。 运行效果截图如下: 在线演示地址如下: http://demo.jb51.ne

  • 本文向大家介绍表单元素值获取方式js及java方式的简单实例,包括了表单元素值获取方式js及java方式的简单实例的使用技巧和注意事项,需要的朋友参考一下 大家都知道我们在提交form的时候用了多种input表单。可是不是每一种input表单都是很简单的用Document.getElementById的方式就可以获取到的。有一些组合的form类似于checkbox或者radio或者select我们

  • 问题内容: 我有如下形式: 当我选中所有复选框并发布表单时,结果如下所示: 然后我取消选中第二个复选框并发布表单,结果是这样的: 当我取消选中第二个复选框时,是否有可能得到如下所示的结果: 有想法吗? 问题答案: 第一种方法-隐藏字段(缺点:用户可以操纵字段的值(但是也可以操纵复选框的值,因此,如果只期望1或0,这不是真正的问题)) 第二种方法-为未设置的索引分配默认值:

  • 一切工作正常(动作得到调用,UI渲染正确,等等...)。除了当我试图获取所选对象时,我一直得到NullPointerExcema(即使我用setProperty tyActionListener设置它)...我如何实际得到我在orderList上点击的行。我做了一个转换器,但仍然没有带我去哪里。 我使用webflow来处理动作(xml)。