js获取form表单所有数据的简单方法

在HTML中用js获取通过GET、POST方法（就是在网址后加?a=b&c=d之类）传过来的表单值。

针对大家常用的获取表单方式，很多时候都是在重复的写一些代码，今天给大家贴出来的代码可以作为公用方法直接调用。可以提高大家的开发效率。

Js代码 

<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);
}

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>

html:

url:

以上这篇js获取form表单所有数据的简单方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Javascript和Java获取各种form表单信息的简单实例

    大家都知道我们在提交form的时候用了多种input表单.可是不是每一种input表单都是很简单的用Document.getElementById的方式就可以获取到的.有一些组合的form类似于checkbox或者radio或者select我们如何用javascript获取和在服务器中获取提交过来的参数呢?多说无用.上代码: Jsp-html代码: 复制代码 代码如下: <form action="input.do" name="formkk">   &

  • JavaScript获取表单内所有元素值的方法

    本文实例讲述了JavaScript获取表单内所有元素值的方法.分享给大家供大家参考.具体如下: 下面的JS代码可以遍历指定表单中的所有元素,并输出元素的值 <!DOCTYPE html> <html> <body> <form id="frm1" action="form_action.aspx"> First name: <input type="text" name="fname

  • js获取form的方法

    本文实例讲述了js获取form的方法.分享给大家供大家参考.具体如下: 先来看下面代码: <html> <head> <scirpy> window.onload=function(){ var f1=document.f1; var f2=document.forms[1]; alert(f2.id); var f3=document.forms['f1']; } </script> </head> <body> <form

  • js获取form表单所有数据的简单方法

    js获取form表单所有数据的简单方法

    在HTML中用js获取通过GET.POST方法(就是在网址后加?a=b&c=d之类)传过来的表单值. 针对大家常用的获取表单方式,很多时候都是在重复的写一些代码,今天给大家贴出来的代码可以作为公用方法直接调用.可以提高大家的开发效率. Js代码 <script type="text/javascript"> //获取指定form中的所有的<input>对象 function getElements(formId) { var form = documen

  • 利用JS如何获取form表单数据

    前言 本文主要给大家介绍的是关于利用JS获取form表单数据的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧 方法如下: 1.有的时候想偷点懒,页面上有大量的表单提交数据,每次单独获取都比较麻烦.代码冗余度也比较多,因此封装了一个方法. 2. 表单元素必须要有name属性,name属性是向后端提交的字段数据. 3.html代码 <h3>下拉框</h3> <select name="sel" id="sel" c

  • jQuery实现获取form表单内容及绑定数据到form表单操作分析

    jQuery实现获取form表单内容及绑定数据到form表单操作分析

    本文实例讲述了jQuery实现获取form表单内容及绑定数据到form表单操作.分享给大家供大家参考,具体如下: 在日常开发的过程中,难免会用到form表单,我们需要获取表单的数据保存到数据库,或者拿到后台的一串json数据,要将数据绑定到form表单上,这里我写了一个基于jquery的,formHelp插件,使用起来也很简单: 获取表单的数据:$("#formid").serializeJson(); 绑定数据到表单:$("#formid").setForm(js

  • vue获取form表单的值示例

    这里使用的是Element-ui组件 html: <el-input placeholder="请输入手机号" id="phone" prop="phone" v-model="phone" clearable></el-input> JS: var phone = this.phone; var password = this.password; var that = this; var phone

  • 原生js实现form表单序列化的方法

    当我们有form表单而且里面的表单元素较多时,咱们总不能一个个去获取表单元素内的值来进行拼接吧!这样会很让人蛋疼!为了方便与后台交互并且提高自己的开发效率,并且不让你蛋疼:我们一起用原生来写一个表单序列化方法: 先介绍一下jquery中有相应的表单序列化的方法: 1.serialize()方法 格式:var data = $("form").serialize(); 功能:将表单内容序列化成一个字符串. 这样在ajax提交表单数据时,就不用一一列举出每一个参数.只需将data参数设置为

  • django做form表单的数据验证过程详解

    django做form表单的数据验证过程详解

    我们之前写的代码都没有对前端input框输入的数据做验证,我们今天来看下,如果做form表单的数据的验证 在views文件做验证 首先用文字描述一下流程 1.在views文件中导入forms模块 2.然后创建一个类,继承forms.form 3.然后在这个类中写变量,这个变量的就是input标签中的name,也就是前端往后端传递的k值,我们就可以对这个k值对应的v值做数据内容的校验,比如是邮箱模式,比如是否允许空,最大字段长度,最小字段长度 4.然后在视图函数中,实例化一个步骤3中的类,然后用这

  • JS document form表单元素操作完整示例

    JS document form表单元素操作完整示例

    本文实例讲述了JS document form表单元素操作.分享给大家供大家参考,具体如下: <html> <head> <title>form表单操作</title> <meta charset="UTF-8"/> <script type="text/javascript"> function testForm(){ // 获取form对象 方法一,通过id,比较普遍的方法 var fm=d

  • 通过button将form表单的数据提交到action层的实例

    form表单中不需要写action的路径,需要给form表单一个唯一的id,将你要提交的信息的表单中的标签name="action中的javabean对象.javabean属性".给button按钮添加一个onclick()点击事件,并实现该点击事件,在该onclick()方法中通过ajax将form表单中的数据提交给action层 JSP页面中的代码: <form id="handleform"> <!-- 根据学生id修改学生信息 -->

  • JS组件Form表单验证神器BootstrapValidator

    JS组件Form表单验证神器BootstrapValidator

    本文为大家分享了JS组件Form表单验证神器BootstrapValidator,供大家参考,具体内容如下 1.初级用法 来看bootstrapvalidator的描述:A jQuery form validator for Bootstrap 3.从描述中我们就可以知道它至少需要jQuery.bootstrap的支持.我们首先引入需要的js组件: <script src="~/Scripts/jquery-1.10.2.js"></script> <sc

  • js的form表单提交url传参数(包含+等特殊字符)的两种解决方法

    方法一:(伪装form表单提交) linkredwin = function(A,B,C,D,E,F,G){ var formredwin = document.createElement("form"); formredwin.method = 'POST'; document.body.appendChild(formredwin); formredwin.action = "http://www.A.com/A.wiki?A=" +encodeURI(A) +

随机推荐