Heim >Web-Frontend >js-Tutorial >js implementiert die Methode zum Empfangen des Werts des Formulars und zum Buchstabieren des Werts nach dem Formular action_javascript skills

js implementiert die Methode zum Empfangen des Werts des Formulars und zum Buchstabieren des Werts nach dem Formular action_javascript skills

WBOY
WBOYOriginal
2016-05-16 15:30:311254Durchsuche

本文实例讲述了js实现接收表单的值并将值拼在表单action后面的方法。分享给大家供大家参考,具体如下:

今天遇到一个问题,在form表单中有若干个input,其中有一个上传文件的input,现在需要在点击提交按钮时,将不是文件类型的input的值得到并拼成&name=value的格式加在action后面,这样就能一同传出去了

<form id="myform" name="myform" method="post" action="http://www.yoursiteweb.com:8080/justsy/Dolet&#63;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)) &#63; /[^.]+$/.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程序设计有所帮助。

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn