在HTML中用js获取通过GET、POST方法（就是在网址后加?a=b&c=d之类）传过来的表单值。
针对大家常用的获取表单方式，很多时候都是在重复的写一些代码，今天给大家贴出来的代码可以作为
公用方法直接调用。可以提高大家的开发效率。
 
html:
<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>

封装:

<script type="text/javascript">  

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

function getElements(formId) {

    var form = document.getElementById(formId);

    var elements = new Array();

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

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

         elements.push(tagElements[j]);  

    }

    return elements;

}   

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

function inputSelector(element) {

  if (element.checked)

     return [element.name, element.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);

    }

    return false;

}    

//组合URL

function serializeElement(element) {

    var method = element.tagName.toLowerCase();

    var parameter = input(element);    

    if (parameter) {

      var key = encodeURIComponent(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 + '=' + encodeURIComponent(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>

js:

function getFormInfo(){

    var params = serializeForm('login');

    alert(params);

}

.

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

  1. JS获取form表单数据

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

  2. 从页面获取form表单提交的数据

    1 使用HttpServletRequest,方便灵活 页面代码,使用action提交一个表单,里边有球的id,球的主人,球的颜色,所在省份,区域 <form action="ball ...

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

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

  4. js获取form表单所有数据

    代码如下: <script type="text/javascript"> // 获取指定form中的所有的<input><select>对象 ...

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

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

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

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

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

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

  8. 非form表单提交的数据就要用@requestbody注解获取http传过来的值，尤其json

    非form表单提交的数据就要用@requestbody注解获取http传过来的值,尤其json

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

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

随机推荐

  1. [6818开发板]八核开发板|4G开发板|GPS开发板|嵌入式开发平台

    IMX6开发板(基本型):960元 IMX6开发板(豪华型):1460元 S5P4418 核心板可以无缝支持核心系统S5P6818,并保持底板设计不变,将兼顾更高端 的应用领域,为项目和产品提供更好的 ...

  2. Pycharm 设置python文件自动生成头部信息模板

    设置头部信息路径: 打开File—Settings—Editor—File and Code Templates—Python Script 输入要自动生成的头部信息模板 这样,新建py文件就会自动生 ...

  3. luogu4388 付公主的矩形

    题面: 为了排解心中的怒气,她造了大量的稻草人来发泄.每天付公主都会把一些稻草人摆成一个R∗C的矩形,矩形的每个方格上都有一个稻草人.然后她站在这个矩形的左上角,向矩形的右下角射箭.付公主的箭术过人, ...

  4. xshell连接不了虚拟机处理方法（错误提示：Connection closing...Socket close.Connection closed by foreign host.Disconnected from remote host(localhost) at 08:47:23.）

    一.问题描述:xshell连接不了虚拟机,出现错误提示:Connection closing...Socket close.Connection closed by foreign host.Disc ...

  5. mycat——未完成

    https://www.cnblogs.com/joylee/p/7513038.html https://blog.csdn.net/wrs120/article/details/80417345 ...

  6. 使用Hashids来保护你的数据库主键

    为什么要保护数据库主键? 数据库主键一般是有序自增主键,极易被爬虫抓取数据,作为应用开发者,这是不应该的,你辛辛苦苦收集的数据转眼之间被其他人给抓取了,是不是很大的损失? Hashids的介绍 gen ...

  7. assert.doesNotThrow()

    assert.doesNotThrow(block[, error][, message]) 断言 block 函数不会抛出错误.查阅 assert.throws() 了解更多详情. 当调用 asse ...

  8. STM32F407 按键输入实验 库函数版 个人笔记

    读取IO口输入的函数: STM32F4 的 IO口做输入使用的时候,是通过调用函数 GPIO_ReadInputDataBit()来读取 IO 口的状态的.了解了这点,就可以开始我们的代码编写了. 按 ...

  9. Javascript类型转换的规则全面&附有实例

    Javascript的变量是松散类型的,它可以存储Javascript支持的任何数据类型,其变量的类型可以在运行时被动态改变.请看示例: 1 2 3 var n = 10; n = "hel ...

  10. POJ-3041 Asteroids,二分匹配解决棋盘问题。

    Asteroids Time Limit: 1000MS   Memory Limit: 65536K       Description Bessie wants to navigate her s ...