代码如下：

  1. <script type="text/javascript">
  2.     // 获取指定form中的所有的<input><select>对象
  3.     function getElements(formId) {
  4.         var form = document.getElementById(formId);
  5.         if(form == null){
  6.             return false;
  7.         }
  8.         var elements = new Array();
  9.         var inputTagElements = form.getElementsByTagName('input');
  10.         for (var j = 0; j < inputTagElements.length; j++) {
  11.             elements.push(inputTagElements[j]);
  12.  
  13.         }
  14.  
  15.         var selectTagElements = form.getElementsByTagName('select');
  16.         for (var j = 0; j < selectTagElements.length; j++) {
  17.             elements.push(selectTagElements[j]);
  18.  
  19.         }
  20.         return elements;
  21.     }
  22.  
  23.     // 获取单个input中的【name,value】数组
  24.     function inputSelector(element) {
  25.         if (element.checked)
  26.             return [ element.name, element.value ];
  27.     }
  28.  
  29.     function selectOne(element){
  30.         var value = $(element).find("option:selected").val();
  31.         if(value != ""){
  32.             var name = $(element).attr("name");
  33.             return [name, value ];
  34.         }
  35.     }
  36.  
  37.     function input(element) {
  38.         switch (element.type.toLowerCase()) {
  39.         case 'submit':
  40.         case 'hidden':
  41.         case 'password':
  42.         case 'text':
  43.             return [ element.name, element.value ];
  44.         case 'checkbox':
  45.         case 'radio':
  46.             return inputSelector(element);
  47.         case 'select-one':
  48.             return selectOne(element);
  49.         }
  50.         return false;
  51.     }
  52.  
  53.     // 组合URL
  54.     function serializeElement(element) {
  55.         var method = element.tagName.toLowerCase();
  56.         var parameter = input(element);
  57.  
  58.         if (parameter) {
  59.             var key = parameter[0];
  60.             if (key.length == 0)
  61.                 return;
  62.  
  63.             if (parameter[1].constructor != Array)
  64.                 parameter[1] = [ parameter[1] ];
  65.  
  66.             var values = parameter[1];
  67.             var results = [];
  68.             for (var i = 0; i < values.length; i++) {
  69.                 results.push(key + '=' + values[i]);
  70.             }
  71.             return results.join('&');
  72.         }
  73.     }
  74.  
  75.     // 调用方法
  76.     function serializeForm(formId) {
  77.         var elements = getElements(formId);
  78.         var queryComponents = new Array();
  79.  
  80.         for (var i = 0; i < elements.length; i++) {
  81.             var queryComponent = serializeElement(elements[i]);
  82.             if (queryComponent)
  83.                 queryComponents.push(queryComponent);
  84.         }
  85.  
  86.         return queryComponents.join('&');
  87.     }
  88. </script>
  1. <body>
  2. 　　<form id="login" name="login" method="post" action="result.jsp">
  3. 　　　　<input name="user" type="text"/>
  4. 　　　　<input name="sex" type="radio" value="man"/>
  5. 　　　　<input name="sex" type="radio" value="woman"/>
  6. 　　　　interest:<input type="checkbox" name="interest" value="piu">PIU <input type="checkbox" name="interest" value="dss">DSS <input type="checkbox" name="interest" value="ddr">DDR<br>
  7. 　　　　<input type="hidden" name="from" value="welcome"><br>
  8. 　　　　<input type="button" name="submit" value="submit" onclick="getFormInfo();">
  9. 　　</form>
  10. </body>
  11.  
  12. function getFormInfo(){
  13.   var params = serializeForm('login');
  14.   alert(params);
  15. }

js获取form表单所有数据的更多相关文章

  1. js模拟form表单提交数据, js模拟a标签点击跳转，避开使用window.open引起来的浏览器阻止问题

    js模拟form表单提交数据, js模拟a标签点击跳转,避开使用window.open引起来的浏览器阻止问题 js模拟form表单提交数据源码: /** * js模拟form表单提交 * @param ...

  2. JS获取form表单数据

    以下代码可放在一个js文件中,以便通用: //获取指定表单中指定标签对象 function getElements(formId, label) { var form = document.getEl ...

  3. JS 获取form表单的所有数据

    在HTML中用js获取通过GET.POST方法(就是在网址后加?a=b&c=d之类)传过来的表单值. 针对大家常用的获取表单方式,很多时候都是在重复的写一些代码,今天给大家贴出来的代码可以作为 ...

  4. JS获取form表单所有属性值

    // 得到一个表单里的全部信息function getFormQueryString() { var frmID=document.forms[0]; var i,queryString=" ...

  5. JS获取form表单的所有输入值

    function getFormQueryString(frmID) { var frmID=document.getElementById(frmID); var i,queryString = & ...

  6. java：JavaScript2：（setTimeout定时器，history.go()前进/后退，navigator.userAgent判断浏览器，location.href，五种方法获取标签属性，setAttribute，innerHTML，三种方法获取form表单信息，JS表单验证，DOM对象，form表单操作）

    1.open,setTimeout,setInterval,clearInterval,clearTimeout <!DOCTYPE> <html> <head> ...

  7. springboot框架中集成thymeleaf引擎，使用form表单提交数据，debug结果后台获取不到数据

    springboot框架中集成thymeleaf引擎,使用form表单提交数据,debug结果后台获取不到数据 表单html: <form class="form-horizontal ...

  8. serialize可以获取form表单里面的数值

    serialize属性 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  9. 原生js实现form表单序列化

    当我们有form表单而且里面的表单元素较多时,咱们总不能一个个去获取表单元素内的值来进行拼接吧!这样会很让人蛋疼!为了方便与后台交互并且提高自己的开发效率,并且不让你蛋疼:我们一起用原生来写一个表单序 ...

随机推荐

  1. Jvm调优积累的文章

    Linux查看CPU和内存使用情况 stat命令查看jvm的GC情况 (以Linux为例) jvm优化必知系列——监控工具 Java JVM 参数设置大全

  2. Linux运维技术之scp命令使用

    命令格式: scp -P 8031  -r 路径1 路径2 命令解释, 其中-P中的P一定要大写,小写不行(这个也是问题的关键,这个大小写耽搁了好长时间) -P 2424表示更改SSH端口后的端口,如 ...

  3. jQuery和使用oninput事件

  4. zabbix--分布式监控proxy

    zabbix 分布式监控代理(proxy) 概述: zabbix proxy 可以代替 zabbix server 收集性能和可用性数据,然后把数据汇报给 zabbix server,并且在一定程度上 ...

  5. Locust性能测试7-分布式执行

    前言 使用Locust进行性能测试时,当一台单机不足以模拟所需的用户数量的时候,可以在多台机器上分布式的执行性能测试. locust分布式启动场景有2种,一种是单机设置master和slave模式,另 ...

  6. 开发基础之牛逼哄哄的 Lambda 表达式，简洁优雅就是生产力

    什么是Lambda? 我们知道,对于一个Java变量,我们可以赋给其一个“值”. 如果你想把“一块代码”赋给一个Java变量,应该怎么做呢? 比如,我想把右边那块代码,赋给一个叫做aBlockOfCo ...

  7. wordpress去掉category的另一个方法

    今天ytkah的客户问wordpress网站一直去不掉分类url中的/category/,他说已经按ytkah之前的方法设置了还是不起作用,进入网站后台发现,他们的网站有安装yoast,然后就大概知道 ...

  8. 学习Java书籍推荐和面试网站推荐

    一.Java书籍推荐: 来自http://www.importnew.com/26932.html 1. 鸟哥的Linux私房菜—基础学习篇 3. Effective Java 6. Java并发编程 ...

  9. 阿里云部署，ubuntu, 连接服务器 |更新源| 安装node |安装mysql

    1.连接服务器 xshell 新建连接 ssh root@1.1.1.1 2.更新源 apt-get update 3.安装node apt-get install -y curl curl -sL ...

  10. （16）WiringPi库函数

    8.WiringPi库函数 一．wiringPi简介 wiringPi是应用于树莓派平台的GPIO控制库函数,wiringPi中的函数类似于Arduino的wiringPi系统,wiringPi库包含 ...