js实现接收表单的值并将值拼在表单action后面的方法


Posted in Javascript onNovember 23, 2015

本文实例讲述了js实现接收表单的值并将值拼在表单action后面的方法。分享给大家供大家参考,具体如下:

今天遇到一个问题,在form表单中有若干个input,其中有一个上传文件的input,现在需要在点击提交按钮时,将不是文件类型的input的值得到并拼成&name=value的格式加在action后面,这样就能一同传出去了

<form id="myform" name="myform" method="post" action="http://www.yoursiteweb.com:8080/justsy/Dolet?type=ws_justsy_webclips_policy_update" enctype="multipart/form-data"> 
<!-- 后台生成json --> 
<script type="text/javascript"> 
var data = [{label:"基本信息",type:"title",tag:"h1"}, 
{label:"Name",type:"input",input:"text",optional:false,name:"policyName",id:"policyName",value:""}, 
{label:"Description",type:"input",input:"text",optional:false,name:"policyDescription",id:"policyDescription",value:""}, 
{label:"",type:"title",tag:"h1"}, 
{label:"Label(Required)",type:"input", input:"text", optional:true, name:"Label",id:"Label",value:""}, 
{label:"URL(Required)",type:"input", input:"text", optional:true, name:"URL",id:"URL",value:""}, 
{label:"Removeable",type:"input", input:"checkbox", optional:false,name:"IsRemovable",id:"IsRemovable",value:"",accept:"image/* "}, 
{label:"Icon",type:"input", input:"file", optional:true, name:"picurl",id:"IconFile",value:""}, 
{label:"Precomposed Icon",type:"input", input:"checkbox",optional:false,name:"Precomposed",id:"Precomposed",value:""}, 
{label:"Full screen",type:"input", input:"checkbox",optional:false,name:"FullScreen",id:"FullScreen",value:""}, 
{type:"hidden",name:"policyID",id:"policyID",value:""}, 
{type:"hidden",name:"PayloadDescription",id:"PayloadDescription",value:""}, 
{type:"hidden",name:"PayloadDisplayName",id:"PayloadDisplayName",value:""}, 
{type:"hidden",name:"PayloadIdentifier",id:"PayloadIdentifier",value:""}, 
{type:"hidden",name:"PayloadOrganization",id:"PayloadOrganization",value:""}, 
{type:"hidden",name:"PayloadType",id:"PayloadType",value:""}, 
{type:"hidden",name:"PayloadUUID",id:"PayloadUUID",value:""}, 
{type:"hidden",name:"PayloadVersion",id:"PayloadVersion",value:""}, 
//{type:"hidden",name:"Icon",id:"Icon",value:""}, 
{type:"submit",optional:true,func:""} 
]; 
inputs(data);//在需要显示输入框的地方调用该方法 
</script> 
<div class="btn-bar"> 
<input type="button" onClick="submitForm()" value="保存"> 
</div> 
</form>

主要js代码:

function getParams() 
{ 
var docList=document.getElementById("inputList").getElementsByTagName("input"); 
var str="";
//alert(docList.length) ; 
for(var i=0;i<docList.length-1;i++) 
{   
  if(docList[i].getAttribute("type")=="checkbox"){ 
    if(docList[i].checked) 
      str+=getParam(docList[i].getAttribute("name"),"1") 
    else 
      str+=getParam(docList[i].getAttribute("name"),"0") 
  } 
  else 
    str+=getParam(docList[i].getAttribute("name"),docList[i].value);
} 
return str; 
} 
function getParam(key,value) 
{ 
  return "&"+key+"="+value; 
} 
function submitForm(){ 
  if(document.getElementById("policyID").value == "")
  { 
   alert("该公司没有创建策略"); 
   return false; 
  } 
  else{ 
  document.getElementById("IconFile_error").innerHTML="正在提交……"; 
 /*获取文件上传的文件名称并且判断扩展名是否为JPG*/ 
  var testmsg=document.getElementById("IconFile").value; 
  var filename=testmsg.replace(/.*(\/|\\)/, ""); 
  var fileExt=(/[.]/.exec(filename)) ? /[^.]+$/.exec(filename.toLowerCase()) : ''; 
   if(fileExt!='jpg'){ 
    document.getElementById("IconFile_error").innerHTML=""; 
    alert("请上传图片");   
   return false; 
   } 
  document.getElementById("myform").action+=getParams(); 
  document.getElementById("myform").submit(); 
  } 
}

这样就能拼过去了....挺好用的....还能检验checkbox中的值...选中为1,不选中为0

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
javascript学习笔记(八) js内置对象
Jun 19 Javascript
如何使用jQUery获取选中radio对应的值(一句代码)
Jun 03 Javascript
父元素与子iframe相互获取变量和元素对象的具体实现
Oct 15 Javascript
jquery.Ajax()方法调用Asp.Net后台的方法解析
Feb 13 Javascript
jQuery Chart图表制作组件Highcharts用法详解
Jun 01 Javascript
js判断数组key是否存在(不用循环)的简单实例
Aug 03 Javascript
深入理解JavaScript中的并行处理
Sep 22 Javascript
详解Vue.js分发之作用域槽
Jun 13 Javascript
Angularjs 手写日历的实现代码(不用插件)
Oct 18 Javascript
学习JS中的DOM节点以及操作
Apr 30 Javascript
vue实现word,pdf文件的导出功能
Jul 31 Javascript
js 闭包深入理解与实例分析
Mar 19 Javascript
跟我学习javascript的垃圾回收机制与内存管理
Nov 23 #Javascript
跟我学习javascript解决异步编程异常方案
Nov 23 #Javascript
jQuery实现选中弹出窗口选择框内容后赋值给文本框的方法
Nov 23 #Javascript
Bootstrap每天必学之表单
Nov 23 #Javascript
jquery制作属于自己的select自定义样式
Nov 23 #Javascript
基于jquery实现省市联动效果
Nov 23 #Javascript
jquery实现加载进度条提示效果
Nov 23 #Javascript
You might like
PHP 巧用数组降低程序的时间复杂度
2010/01/01 PHP
使用VisualStudio开发php的图文设置方法
2010/08/21 PHP
PHP JSON出错:Cannot use object of type stdClass as array解决方法
2014/08/16 PHP
PHP使用Redis实现防止大并发下二次写入的方法
2017/10/09 PHP
用正则表达式 动态创建/增加css style script 兼容IE firefox
2009/03/10 Javascript
jquery 多行滚动代码(附详细解释)
2010/06/17 Javascript
js下利用控制器载入对应脚本
2010/07/17 Javascript
jquery中对于批量deferred的处理方法
2014/01/22 Javascript
jquery实现pager控件示例
2014/04/09 Javascript
js 调用百度地图api并在地图上进行打点添加标注
2014/05/13 Javascript
js实现的标题栏新消息闪烁提示效果
2014/06/06 Javascript
使用AngularJS对路由进行安全性处理的方法
2015/06/18 Javascript
js代码验证手机号码和电话号码是否合法
2015/07/30 Javascript
快速学习jQuery插件 jquery.validate.js表单验证插件使用方法
2015/12/01 Javascript
JavaScript对象参数的引用传递
2016/01/14 Javascript
JavaScript String 对象常用方法详解
2016/05/13 Javascript
jQuery实现的浮动层div浏览器居中显示效果
2017/02/03 Javascript
JavaScript原生数组Array常用方法
2017/04/06 Javascript
bootstrap select2插件用ajax来获取和显示数据的实例
2018/08/09 Javascript
基于vue中keep-alive缓存问题的解决方法
2018/09/21 Javascript
简单说说如何使用vue-router插件的方法
2019/04/08 Javascript
过滤器vue.filters的使用方法实现
2019/09/18 Javascript
[04:31]2016国际邀请赛中国区预选赛妖精采访
2016/06/27 DOTA
[46:55]完美世界DOTA2联赛决赛 FTD vs Phoenix 第三场 11.08
2020/11/11 DOTA
python微信好友数据分析详解
2018/11/19 Python
Ubuntu下升级 python3.7.1流程备忘(推荐)
2018/12/10 Python
Python实现的微信支付方式总结【三种方式】
2019/04/13 Python
用python写一个定时提醒程序的实现代码
2019/07/22 Python
50行Python代码实现视频中物体颜色识别和跟踪(必须以红色为例)
2019/11/20 Python
pytorch中torch.max和Tensor.view函数用法详解
2020/01/03 Python
Python实现一个优先级队列的方法
2020/07/31 Python
售房协议书
2014/08/19 职场文书
授权委托书
2015/01/28 职场文书
小学生必读成语故事大全:送给暑假的你们
2019/07/09 职场文书
解决goland 导入项目后import里的包报红问题
2021/05/06 Golang
Python基础之元组与文件知识总结
2021/05/19 Python