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 Array.remove() 数组删除
Aug 06 Javascript
js String对象中常用方法小结(字符串操作)
Jan 27 Javascript
Javascript操作URL函数修改版
Nov 07 Javascript
jQuery 隐藏和显示 input 默认值示例
Jun 03 Javascript
js实现touch移动触屏滑动事件
Apr 17 Javascript
简介AngularJS的视图功能应用
Jun 17 Javascript
js实现的奥运倒计时时钟效果代码
Dec 09 Javascript
Jquery对新插入的节点 绑定Click事件失效的解决方法
Jun 02 Javascript
JS实现列表页面隔行变色效果
Mar 25 Javascript
JavaScript使用readAsDataURL读取图像文件
May 10 Javascript
JS扁平化输出数组的2种方法解析
Sep 17 Javascript
JavaScript 自定义html元素鼠标右键菜单功能
Dec 02 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中判断字符串是否全是中文或含有中文的实现代码
2011/09/16 PHP
php检查函数必传参数是否存在的实例详解
2017/08/28 PHP
ThinkPHP框架整合微信支付之Native 扫码支付模式一图文详解
2019/04/09 PHP
wordpress之js库集合研究介绍
2007/08/17 Javascript
js replace 与replaceall实例用法详解
2013/08/03 Javascript
JQuery对表单元素的基本操作使用总结
2014/07/18 Javascript
jquery插件NProgress.js制作网页加载进度条
2015/06/05 Javascript
js实现浏览器倒计时跳转页面效果
2016/08/12 Javascript
利用vue实现模态框组件
2016/12/19 Javascript
BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤
2017/08/07 Javascript
js断点调试经验分享
2017/12/08 Javascript
Nginx 配置多站点vhost 的方法
2018/01/07 Javascript
webpack 插件html-webpack-plugin的具体使用
2018/04/09 Javascript
用Node提供静态文件服务的方法
2018/07/06 Javascript
vue router 跳转后回到顶部的实例
2018/08/31 Javascript
详解vuex之store源码简单解析
2019/06/13 Javascript
微信小程序和H5页面间相互跳转代码实例
2019/09/19 Javascript
JQuery表单元素取值赋值方法总结
2020/05/12 jQuery
vue的hash值原理也是table切换实例代码
2020/12/14 Vue.js
Python中为feedparser设置超时时间避免堵塞
2014/09/28 Python
python中sleep函数用法实例分析
2015/04/29 Python
python获取本机mac地址和ip地址的方法
2015/04/29 Python
Python 基础之字符串string详解及实例
2017/04/01 Python
Django原生sql也能使用Paginator分页的示例代码
2017/11/15 Python
pytorch之inception_v3的实现案例
2020/01/06 Python
快速查找Python安装路径方法
2020/02/06 Python
python 爬取百度文库并下载(免费文章限定)
2020/12/04 Python
python UIAutomator2使用超详细教程
2021/02/19 Python
详解使用CSS3的@media来编写响应式的页面
2017/11/01 HTML / CSS
一篇文章带你学习CSS3图片边框
2020/11/04 HTML / CSS
国际商务专业学生个人的自我评价
2013/09/28 职场文书
全民健身日活动方案
2014/01/29 职场文书
创业计划书模版
2014/02/05 职场文书
不知如何爱孩子,这些方法教会您
2019/08/06 职场文书
MySQL中JOIN连接的基本用法实例
2022/06/05 MySQL
Zabbix对Kafka topic积压数据监控的解决方案
2022/07/07 Servers