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 相关文章推荐
Web版彷 Visual Studio 2003 颜色选择器
Jan 09 Javascript
30个最佳jQuery Lightbox效果插件分享
Apr 11 Javascript
js 获取页面高度和宽度兼容 ie firefox chrome等
May 14 Javascript
js 中将多个逗号替换为一个逗号的代码
Jun 07 Javascript
易被忽视的js事件问题总结
May 14 Javascript
JavaScript中Array对象用法实例总结
Nov 29 Javascript
JavaScript常用正则函数用法示例
Jan 23 Javascript
jQuery插件echarts实现的单折线图效果示例【附demo源码下载】
Mar 04 Javascript
Node.js成为Web应用开发最佳选择的原因
Feb 05 Javascript
微信小程序实现点击导航标签滚动定位到对应位置
Nov 19 Javascript
VUE项目实现主题切换的多种方法
Nov 26 Vue.js
利用前端HTML+CSS+JS开发简单的TODOLIST功能(记事本)
Apr 13 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/03/25 PHP
ThinkPHP模板引擎之导入资源文件方法详解
2014/06/18 PHP
phpmailer在服务器上不能正常发送邮件的解决办法
2014/07/08 PHP
非常实用的PHP常用函数汇总
2014/12/17 PHP
分享下php5类中三种数据类型的区别
2015/01/26 PHP
Laravel模型事件的实现原理详解
2018/03/14 PHP
PHP实现二维数组中的查找算法小结
2018/06/09 PHP
PHP利用递归函数实现无限级分类的方法
2019/03/22 PHP
jQuery调用AJAX时Get和post公用的乱码解决方法实例说明
2013/06/04 Javascript
js导出格式化的excel 实例方法
2013/07/17 Javascript
js实现的四级左侧网站分类菜单实例
2015/05/06 Javascript
jQuery计算文本框字数及限制文本框字数的方法
2016/03/01 Javascript
jquery注册文本框获取焦点清空,失去焦点赋值的简单实例
2016/09/08 Javascript
JS识别浏览器类型(电脑浏览器和手机浏览器)
2016/11/18 Javascript
正则表达式,替换所有HTML标签的简单实例
2016/11/28 Javascript
JS实现类似百叶窗下拉菜单效果
2016/12/30 Javascript
JS实现动态修改table及合并单元格的方法示例
2017/02/20 Javascript
jQuery.cookie.js使用方法及相关参数解释
2017/03/06 Javascript
微信小程序 标签传入数据
2017/05/08 Javascript
jquery根据name取得select选中的值实例(超简单)
2018/01/25 jQuery
微信小程序的tab选项卡的实现效果
2019/05/15 Javascript
使用异步controller与jQuery实现卷帘式分页
2019/06/18 jQuery
Python实现抓取页面上链接的简单爬虫分享
2015/01/21 Python
理解Python中的With语句
2016/03/18 Python
详解Python装饰器由浅入深
2016/12/09 Python
python检索特定内容的文本文件实例
2018/06/05 Python
解决python中遇到字典里key值为None的情况,取不出来的问题
2018/10/17 Python
Python爬虫之正则表达式的使用教程详解
2018/10/25 Python
python中实现控制小数点位数的方法
2019/01/24 Python
python3图片文件批量重命名处理
2019/10/31 Python
python实现简单图书管理系统
2019/11/22 Python
python从内存地址上加载python对象过程详解
2020/01/08 Python
如何基于python实现年会抽奖工具
2020/10/20 Python
关于Java String的一道面试题
2013/09/29 面试题
公司请假条格式
2014/04/11 职场文书
新员工试用期自我评价
2015/03/10 职场文书