首页 > 其他分享 >JS 获取form表单的所有数据

JS 获取form表单的所有数据

时间:2023-09-01 15:03:29浏览次数:52  
标签:case return form JS element var input 表单 parameter

在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>

标签:case,return,form,JS,element,var,input,表单,parameter
From: https://blog.51cto.com/u_16244011/7322925

相关文章

  • js 压缩库 LZString,压缩率大约 10%
    1//Copyright(c)2013Pieroxy<[email protected]>2//Thisworkisfree.Youcanredistributeitand/ormodifyit3//underthetermsoftheWTFPL,Version24//FormoreinformationseeLICENSE.txtorhttp://www.wtfpl.net/5//6......
  • SQL Server 操作JSON数据库列
    use[tempdb]declare@JSONnvarchar(max)set@JSON=N'{"id":"WakefieldFamily","parents":[{"familyName":"Wakefield","givenName":"Robin"},{"familyNam......
  • 关于vue.js
    一、使用之前,我们先来掌握3个东西是用来干什么的。npm:Nodejs下的包管理器。webpack:它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备,比如资源的合并和打包。vue-cli:用户生成Vue工程模板。(帮你快速开始一个vue的项目,也就是给你一套vue的结......
  • js实现html页面翻译
    引入js库 <scriptsrc="https://res.zvo.cn/translate/translate.js"></script> 在页面最底部加入js代码//translate.ignore.tag.push('span');//翻译时追加上自己想指定忽略的tag标签,凡是在这里面的,都不进行翻译。//translate.ignore.class.push('test'); //翻译时指定......
  • newtonsoft.json
    https://www.newtonsoft.com/jsonProductproduct=newProduct();product.Name="Apple";product.Expiry=newDateTime(2008,12,28);product.Sizes=newstring[]{"Small"};stringjson=JsonConvert.SerializeObject(product);//{......
  • 使用SheetJs实现在线预览Excel(保留单元格格式信息)
    一、寻找合适的在线预览Excel的js库经过百度各种搜索,加上ChatGpt推荐,决定用SheetJs实现在线预览Excel。下面是SheetJs的官网介绍:SheetJS电子表格简化读取、编辑和导出电子表格适用于网络浏览器和服务器Office365受到Microsoft信任 SheetJS软件为业务提供动力谷歌、......
  • Python中如何快速解析JSON对象数组
    由于浏览器可以迅速地解析JSON对象,它们有助于在客户端和服务器之间传输数据。本文将描述如何使用Python的JSON模块来传输和接收JSON数据。JavaScriptObjectNotationJSON(JavaScriptObjectNotation)是一种用于数据交换的语法,它对人的读写很简单,对计算机的解析和生产也很简单......
  • Vue+Elemnt-UI遍历生成form-item并为其绑定校验规则
    需求:接口获取数据,动态渲染表单(文本框类型,内容,标签,是否必填)参照博主:blog.csdn.net/qq_33769914/article/details/122449601遇到的问题:1.通过对单个item绑定的校验规则不生效(表现为:不弹提示,或填了内容依旧提示)           2.提示出现后通过clearValidate()......
  • js富文本处理函数
    constformatRichText=(html)=>{ letnewContent=html.replace(/<img[^>]*>/gi,function(match,capture){ match=match.replace(/style="[^"]+"/gi,'').replace(/style='[^']+'/gi,''); mat......
  • Transformer 的作用是什么?
    Transformer到来之前,包括自动驾驶、自然语言在内的整个人工智能领域都生活在一片“天下苦秦久矣”的环境中,算法模型制约着整个产业的进步。Transformer以及BETR出来以后,便开始在NLP领域一统江湖。随着这几年的发展,在各种视觉基准数据集上,VisionTransformer已经逐步替代掉了以往的C......