代码如下：

<script type="text/javascript">

    // 获取指定form中的所有的<input><select>对象

    function getElements(formId) {

        var form = document.getElementById(formId);

        if(form == null){

            return false;

        }

        var elements = new Array();

        var inputTagElements = form.getElementsByTagName('input');

        for (var j = 0; j < inputTagElements.length; j++) {

            elements.push(inputTagElements[j]);

        }

        var selectTagElements = form.getElementsByTagName('select');

        for (var j = 0; j < selectTagElements.length; j++) {

            elements.push(selectTagElements[j]);

        }

        return elements;

    }

    // 获取单个input中的【name,value】数组

    function inputSelector(element) {

        if (element.checked)

            return [ element.name, element.value ];

    }

    function selectOne(element){

        var value = $(element).find("option:selected").val();

        if(value != ""){

            var name = $(element).attr("name");

            return [name, value ];

        }

    }

    function input(element) {

        switch (element.type.toLowerCase()) {

        case 'submit':

        case 'hidden':

        case 'password':

        case 'text':

            return [ element.name, element.value ];

        case 'checkbox':

        case 'radio':

            return inputSelector(element);

        case 'select-one':

            return selectOne(element);

        }

        return false;

    }

    // 组合URL

    function serializeElement(element) {

        var method = element.tagName.toLowerCase();

        var parameter = input(element);

        if (parameter) {

            var key = parameter[0];

            if (key.length == 0)

                return;

            if (parameter[1].constructor != Array)

                parameter[1] = [ parameter[1] ];

            var values = parameter[1];

            var results = [];

            for (var i = 0; i < values.length; i++) {

                results.push(key + '=' + values[i]);

            }

            return results.join('&');

        }

    }

    // 调用方法

    function serializeForm(formId) {

        var elements = getElements(formId);

        var queryComponents = new Array();

        for (var i = 0; i < elements.length; i++) {

            var queryComponent = serializeElement(elements[i]);

            if (queryComponent)

                queryComponents.push(queryComponent);

        }

        return queryComponents.join('&');

    }

</script>
<body>

　　<form id="login" name="login" method="post" action="result.jsp">

　　　　<input name="user" type="text"/>

　　　　<input name="sex" type="radio" value="man"/>

　　　　<input name="sex" type="radio" value="woman"/>

　　　　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>

　　　　<input type="hidden" name="from" value="welcome"><br>

　　　　<input type="button" name="submit" value="submit" onclick="getFormInfo();">

　　</form>

</body>

function getFormInfo(){

  var params = serializeForm('login');

  alert(params);

}

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. CSS3 弹性盒布局

    一.伸缩布局 CSS3 在布局方面做了非常大的改进,使得我们对块级元素的布局排列变得十分灵活,适应性非常强,其强大的伸缩性,在响应式开中可以发挥极大的作用. 二.定义 Flexbox 语法格式: di ...

  2. iOS之Category关联属性

    Objective-C /** 原文件 */ // Person.h #import <Foundation/Foundation.h> @interface Person : NSObj ...

  3. Tuple VS ValueTuple

    深入理解 c# 元组与值元组(Tuple,ValueTuple) 为什么有此文章 首先要说的是我们公司内部技术框架是用 abp.vnext 框架整合而来的,我们架构师对于 abp 相关的知识都很了然于 ...

  4. InvalidOperationException: No file provider has been configured to process the supplied file.

    现在有一个api, 提供图片的下载,如下代码,,调试出现 InvalidOperationException: No file provider has been configured to proc ...

  5. Apache Hive

    1.Hive简介 Hive是基于Hadoop的一个数据仓库工具,可以将结构化的数据文件映射为一张数据库表,并提供类SQL查询功能. 本质是将SQL转换为MapReduce程序. 主要用途:操作接口采用 ...

  6. prometheus学习系列二： Prometheus安装

    下载 在prometheus的官网的download页面,可以找到prometheus的下载二进制包. [root@node00 src]# cd /usr/src/ [root@node00 src ...

  7. 201671030120 王晶 实验十四 团队项目评审&课程学习总结

          项目 内容 课程名称 2016级计算机科学与工程学院软件工程(西北师范大学) 作业要求 实验十四 团队项目评审&课程学习总结 作业学习目标 (1)掌握软件项目评审会流程:(2)反思 ...

  8. 项目Beta冲刺（团队）——用户试用调查报告

    项目Beta冲刺(团队)--用户试用调查报告 格式描述 课程名称:软件工程1916|W(福州大学) 作业要求:项目Beta冲刺(团队) 团队名称:为了交项目干杯 作业目标:针对相应版本展开用户试用,完 ...

  9. Docker 中 MySQL 数据的导入导出

    Creating database dumps Most of the normal tools will work, although their usage might be a little c ...

  10. 线程的等待与唤醒，实现if...else里面的值交互依次输出

    线程通信原理图: 资源类: package com.yonyou.sci.gateway.exec.threadnet; public class Resource { String name; St ...