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 相关文章推荐
用ADODB.Stream转换
Jan 22 Javascript
jQuery ui 1.7更新小结
Aug 15 Javascript
js将json格式的对象拼接成复杂的url参数方法
May 25 Javascript
Vue 源码分析之 Observer实现过程
Mar 29 Javascript
关于echarts在节点显示动态数据及添加提示文本所遇到的问题
Apr 20 Javascript
vuejs 制作背景淡入淡出切换动画的实例
Sep 01 Javascript
2种在vue项目中使用百度地图的简单方法
Sep 28 Javascript
javascript删除数组元素的七个方法示例
Sep 09 Javascript
vue实现树形结构样式和功能的实例代码
Oct 15 Javascript
VUE动态生成word的实现
Jul 26 Javascript
vue 解决在微信内置浏览器中调用支付宝支付的情况
Nov 09 Javascript
Vue 打包的静态文件不能直接运行的原因及解决办法
Nov 19 Vue.js
跟我学习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 随机数的产生、页面跳转、件读写、文件重命名、switch语句
2009/08/07 PHP
解析PHPExcel使用的常用说明以及把PHPExcel整合进CI框架的介绍
2013/06/24 PHP
PHP图片处理之图片背景、画布操作
2014/11/19 PHP
Thinkphp 中 distinct 的用法解析
2016/12/14 PHP
写了一个layout,拖动条连贯,内容区可为iframe
2007/08/19 Javascript
JavaScript加密解密7种方法总结分析
2007/10/07 Javascript
JSP跨iframe如何传递参数实现代码
2013/09/21 Javascript
转换字符串为json对象的方法详解
2013/11/29 Javascript
jQuery实现气球弹出框式的侧边导航菜单效果
2015/09/22 Javascript
实例讲解JavaScript中的this指向错误解决方法
2016/06/13 Javascript
Node.js中使用jQuery的做法
2016/08/17 Javascript
微信小程序 vidao实现视频播放和弹幕的功能
2016/11/02 Javascript
微信小程序 基础组件与导航组件详细介绍
2017/02/21 Javascript
深究AngularJS之ui-router详解
2017/06/13 Javascript
Vue.js基础指令实例讲解(各种数据绑定、表单渲染大总结)
2017/07/03 Javascript
AngularJS实现select的ng-options功能示例
2017/07/12 Javascript
详解VUE 数组更新
2017/12/16 Javascript
extract-text-webpack-plugin用法详解
2019/02/14 Javascript
Python的“二维”字典 (two-dimension dictionary)定义与实现方法
2016/04/27 Python
Python星号*与**用法分析
2018/02/02 Python
PyQt4实时显示文本内容GUI的示例
2019/06/14 Python
Django Rest framework权限的详细用法
2019/07/25 Python
PYcharm 激活方法(推荐)
2020/03/23 Python
Python流程控制语句的深入讲解
2020/06/15 Python
解决python pandas读取excel中多个不同sheet表格存在的问题
2020/07/14 Python
利用css3制作3D样式按钮实现代码
2013/03/18 HTML / CSS
HTML最新标准HTML5总结(必看)
2016/06/13 HTML / CSS
日本面向世界,国际级的免税在线购物商城:DOKODEMO
2017/02/01 全球购物
测试驱动开发的主要步骤是什么
2014/12/10 面试题
简历中个人自我评价分享
2014/03/15 职场文书
保护环境标语
2014/06/09 职场文书
机械机修工岗位职责
2014/08/03 职场文书
有关水浒传的读书笔记
2015/06/25 职场文书
Python爬虫实战之爬取携程评论
2021/06/02 Python
总结一下关于在Java8中使用stream流踩过的一些坑
2021/06/24 Java/Android
Win10鼠标宏怎么设置?win10系统鼠标宏的设置方法
2022/08/14 数码科技