js获取form表单所有数据

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

原文地址:https://www.cnblogs.com/web-record/p/10455409.html

时间: 2024-08-28 06:12:48

js获取form表单所有数据的相关文章

ubuntu 下CGI c语言 获取form表单的数据

前面文章:使用cgi c 写了一个helloworld 这次 主要使用CGI c语言 获取form表单的数据 1 login.c [email protected]:/usr/lib/cgi-bin$ cat login.c #include<stdio.h> #include<stdlib.h> #include <string.h> int main(){ int i,len=0; char poststr[100]; char m[10],n[10]; char

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

js模拟form表单提交数据源码: /** * js模拟form表单提交 * @param {object} 参数对象 * url 必填 提交地址 * methond 选填 默认post 提交方式 post get * target 选填 默认_self 当前页面还是新页面 _self _blank * 其它参数 */ function jsFormSubmit(params) { var turnForm = document.createElement("form"); //一定要

JS获取form表单所有属性值

// 得到一个表单里的全部信息function getFormQueryString() { var frmID=document.forms[0]; var i,queryString="",and=""; var item; // for each form's object var itemValue; // store each form object's value for(i=0;i<frmID.length;i++) {  item=frmID[

js获取form表单数据和form表单赋值

$.fn.extend({// 调用方式:$("xxxxx").getform(); getform: function () { var obj = {}; var array = $(this).serializeArray(); $.each(array, function () { obj[this.name] = this.value; }); return obj; }, // 调用方式: $("xxx").setform(json); setform:

springboot框架中集成thymeleaf引擎,使用form表单提交数据,debug结果后台获取不到数据

springboot框架中集成thymeleaf引擎,使用form表单提交数据,debug结果后台获取不到数据 表单html: <form class="form-horizontal form-material" th:object="${user}" th:action="@{/user/updateOneUserInfo}" method="post"> <input type="hidden

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

serialize属性 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script src="../jquery-1.12.2.js"></script> 7 </head> 8 <

原生js实现form表单序列化

大家都知道在jquery中有相应的表单序列化的方法: 1.serialize()方法 格式:var data = $("form").serialize(); 功能:将表单内容序列化成一个字符串. 这样在ajax提交表单数据时,就不用一一列举出每一个参数.只需将data参数设置为 $("form").serialize() 即可. 2.serializeArray()方法 格式:var jsonData = $("form").serialize

HTML5第8次课堂笔记( 模拟form表单提交数据,xml的解析,jQuery的Ajax方法使用, mui的ajax)

HTML5第8次课堂笔记 1.  模拟form表单提交数据:(get方式) <body> <formmethod="get"action="DataTest7"> <inputtype="text"name="uname"value="yang"id="myname"><br/> <inputtype="password&q

FormData实现form表单的数据打包

FormData实现form表单的数据打包 2015-02-04 HTML代码: <html> ????<head> ????<title>FormData</title>? ????<script?type="text/javascript"> /*formData?表单数据 ?这是在html5中新增的一个API ?能以表单对象作为参数,自动的把表单的数据打包 ?当ajax发送数据时,发送些formData, ?达到发送表单