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

前端技术 2023/09/05 JavaScript

本文实例讲述了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程序设计有所帮助。

本文地址：https://www.stayed.cn/item/12011

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案