代码如下：

<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. centos7.5内核编译安装

    1.安装依赖 yum -y install gcc bc gcc-c++ ncurses ncurses-devel cmake elfutils-libelf-devel openssl-devel ...

  2. rabbitmq：配置rabbitmq-management插件

    rabbitmq提供了一个图形的管理界面,用于管理.监控rabbitmq的运行情况,它是以插件的形式提供的,如果要启用需要启用插件 一.启用插件 rabbitmq-plugins enable rab ...

  3. Product settype acts as a very important role in CRM WebClient UI architecture

    Product settype acts as a very important role in CRM WebClient UI architecture. The GenIL layer know ...

  4. 024：Java流实现Shell：cat 1.log | grep a | sort | uniq -c | sort -rn

    本文阅读时间大约13分钟(本文实践性很强,建议pc端阅读,最好亲自实践). 参考答案 这个问题考察的是对Linux命令的熟悉程度,以及对Java中集合操作的综合运用,自从转到Java 8以后,我就一直 ...

  5. rpm安装与yum安装的区别

      linux下的安装包多为rpm安装包.通常安装方法为 rpm -ivh 包的路径+包名.rpm 其中参数-i为安装 -v显示信息 -h显示进度条.这三个参数基本捆绑使用rpm的路径不单可以是本地磁 ...

  6. golang之类型零值初始化及比较

    综述 变量声明时未赋初值,则变量被自动赋值为该类型的零值(固定值) func new(Type) *Type new()返回一个指针,指向新分配的该类型的零值,不是空指针(nil).the value ...

  7. docker端口映射或启动容器时报错Error

    现象: [root@localhost ~]# docker run -d -p 9000:80 centos:httpd /bin/sh -c /usr/local/bin/start.shd5b2 ...

  8. Codeforces I. Producing Snow（优先队列）

    题目描述: C. Producing Snow time limit per test 1 second memory limit per test 256 megabytes input stand ...

  9. day5 SpringSecurity权限控制jsr250注解不起作用 AOP日志排除不需要织入的方法 web.xml配置错误码页面

  10. C++传递不定参函数

    定义不定参数函数,要用到下面这些宏: va_start(ap, farg): 初始化一个va_list变量ap,farg是第一个形参 va_arg(ap, type): 获取(下)一个type类型的参 ...