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 document.createDocumentFragment()
Apr 04 Javascript
input按钮的事件处理大全
Dec 10 Javascript
ExtJS中文乱码之GBK格式编码解决方案及代码
Jan 20 Javascript
js获取指定日期周数以及星期几的小例子
Jun 27 Javascript
详解JavaScript的流程控制语句
Nov 30 Javascript
JS高级运动实例分析
Dec 20 Javascript
bootstrap警告框示例代码分享
May 17 Javascript
原生js FileReader对象实现图片上传本地预览效果
Mar 27 Javascript
微信网页登录逻辑与实现方法
Apr 29 Javascript
微信小程序登录态和检验注册过没的app.js写法
May 22 Javascript
js闭包和垃圾回收机制示例详解
Mar 01 Javascript
原生Js 实现的简单无缝滚动轮播图的示例代码
May 10 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
vBulletin Forum 2.3.xx SQL Injection
2006/10/09 PHP
PHP函数之error_reporting(E_ALL ^ E_NOTICE)详细说明
2011/07/01 PHP
php提示无法加载或mcrypt没有找到 PHP 扩展 mbstring解决办法
2012/03/27 PHP
PHP用mb_string函数库处理与windows相关中文字符及Win环境下开启PHP Mb_String方法
2015/11/11 PHP
Yii2中如何使用modal弹窗(基本使用)
2016/05/30 PHP
php使用crypt()函数进行加密
2017/06/08 PHP
js检测客户端不是firefox则提示下载
2007/04/07 Javascript
freemarker判断对象是否为空的方法
2015/08/13 Javascript
jQuery遍历节点树方法分析
2016/09/08 Javascript
jquery对table做排序操作的实例演示
2017/08/10 jQuery
jquery插件开发之选项卡制作详解
2017/08/30 jQuery
VUE2.0+Element-UI+Echarts封装的组件实例
2018/03/02 Javascript
vue实现的双向数据绑定操作示例
2018/12/04 Javascript
vue-cli系列之vue-cli-service整体架构浅析
2019/01/14 Javascript
在vue中利用v-html按分号将文本换行的例子
2019/11/14 Javascript
Python 转义字符详细介绍
2017/03/21 Python
django+js+ajax实现刷新页面的方法
2017/05/22 Python
Python跨文件全局变量的实现方法示例
2017/12/10 Python
Python中xrange与yield的用法实例分析
2017/12/26 Python
python numpy数组的索引和切片的操作方法
2018/10/20 Python
Python使用线程来接收串口数据的示例
2019/07/02 Python
Python sklearn库实现PCA教程(以鸢尾花分类为例)
2020/02/24 Python
Python实现GIF图倒放
2020/07/16 Python
通过Python pyecharts输出保存图片代码实例
2020/11/25 Python
python 写一个水果忍者游戏
2021/01/13 Python
Pycharm 如何一键加引号的方法步骤
2021/02/05 Python
Ray-Ban雷朋美国官网:全球领先的太阳眼镜品牌
2016/07/20 全球购物
同步和异步有何异同,在什么情况下分别使用他们?举例说明
2014/02/27 面试题
质检员的岗位职责
2013/11/15 职场文书
酒店led欢迎词
2014/01/09 职场文书
员工薪酬福利制度
2014/01/17 职场文书
JAVA程序员自荐书
2014/01/30 职场文书
八项规定整改措施
2014/02/12 职场文书
党员剖析材料范文
2014/09/30 职场文书
离婚代理词范文
2015/05/23 职场文书
教导处教学工作总结
2015/08/12 职场文书