代码如下：

<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. Vue.js前端MVVM框架实战篇

    相信大家对vue.js这个前端框架有了一定的了解.想必也想把Vue急切的运用在项目中,看看它的魅力到底有多大?别急,今天我会满足大家的想法. 我们一起来看看“Webpack+Vue”的开发模式相比以往 ...

  2. Android 系统自带图片裁剪功能（适配7.0、8.0、对了还有小米手机）

    前段时间写了如何获取相册和拍照之后的照片并且进行显示和上传,这一次是如何进行圆形图像制作,经常看我写的笔记的人会知道,我很懒.那么我就懒的自定义了,目前需求就用原生的就好了,大神的轮子,我会在后面进行 ...

  3. android.view.ViewRoot$CalledFromWrongThreadException 异常的解决方案

    https://blog.csdn.net/vincent_czz/article/details/7070354 https://stackoverflow.com/questions/210141 ...

  4. 记一则 Lambda内递归调用方法将集合对象转换成树形结构

    public dynamic GetDepartments(string labID) { List<int> usedIDs = new List<int>(); //缓存已 ...

  5. c语言实现基本的数据结构（四） 循环队列

    #include <stdio.h> #include <tchar.h> #include <stdlib.h> #define MaxQueueSize 100 ...

  6. selenium安装

    pip安装 pqi优化pip下载速度 pip install selenium pip install --upgrade selenium pip show selenium 离线安装 官网下载se ...

  7. spring cloud 学习资料

    spring cloud 学习资料 网址 拜托!面试请不要再问我Spring Cloud底层原理 https://mp.weixin.qq.com/s/ZH-3JK90mhnJPfdsYH2yDA

  8. cortex-m系列的区别（图解）及今日碎片学习笔记

    下图转自https://www.cnblogs.com/luckytimor/p/6747026.html 该系列的结构都是哈佛结构,而且目前可以使用keil来开发,而且keil mdk不能开发R.A ...

  9. NSString+URLParser NSScanner

    @implementation NSString (URLParser) -(NSDictionary*)parserToDict { NSScanner *scanner = [NSScanner ...

  10. 牛客OI周赛10-普及组-A眼花缭乱的街市-（加速+二分）

    https://ac.nowcoder.com/acm/contest/901/A 很简单的一道题,全场只有20+AC,卡时间.新学了cin加速语法和数组二分查找的函数调用. 知道有个读写挂,可以加速 ...