请教动态添加表单的方法

用javascript 做成把input 控件作成数组提交

解决方案 »

  1.   

    <HTML>
    <HEAD>
    <STYLE TYPE="text/css">
    <!--
    .p9{ font-size: 9pt; font-family: 宋体 }
    td {font-size: 9pt}
    .tx {height: 16px; width: 30px; border-color: black black #000000; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 1px; border-left-width: 0px; font-size: 9pt; background-color: #eeeeee; color: #0000FF}
    .tx2 {height: 16px;border-top-width: 0px; border-right-width: 0px; border-bottom-width: 1px; border-left-width: 0px; font-size: 9pt; color: #0000FF; border-left-color:#000000; border-right-color:#000000; border-top-color:#000000; border-bottom-color:#000000}
    .bt {border-left:1px solid #C0C0C0; border-top:1px solid #C0C0C0; font-size: 9pt; border-right-width: 1; border-bottom-width: 1; height: 16px; width: 80px; background-color: #EEEEEE; cursor: hand; border-right-style:solid; border-bottom-style:solid}
    .tx1 { width: 400 ;height: 20px; font-size: 9pt; border: 1px solid; border-color: black black #000000; color: #0000FF}
    -->
    </STYLE>
    <SCRIPT LANGUAGE="vbscript">
    function addfile()
    dim str
    str="<table>"
    if not IsNumeric (window.form1.filenum.value) then window.form1.filenum.value =1
    for i=1 to window.form1.filenum.value
    str=str&"<tr><td valign='middle'>文件"&i&":</td><td><input type='file' name='file"&i&"' class='tx1' value size='20'>　　保存为<input type='text' name='file"&i&"' size='20' class='tx2'></td></tr>"
    next
    window.uptd.innerHTML =str&"</table>"
    end function
    </SCRIPT><SCRIPT LANGUAGE="JavaScript">
    <!--
    function Show()
    {
    var allnum = document.form1.filenum.value;//获取有几个file
    for (i=0;i<allnum;i++)
    {
    alert("文件框的Name:file"+i);
    }
    return false;
    }
    //-->
    </SCRIPT>
    <TITLE></TITLE>
    <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312"></HEAD>
    <BODY BGCOLOR="#ffffff" CLASS="p9" onLoad="addfile()">
    <FORM METHOD="post" NAME="form1" ACTION="savetofile.asp" ENCTYPE="multipart/form-data">
      <TABLE BORDER="0" ALIGN="center" CELLPADDING="0" CELLSPACING="0">
        <TR> 
          <TD><DIV ALIGN="center"><FONT COLOR="#0000ff" SIZE="5">保存到文件</FONT></DIV></TD>
        </TR>
        <TR> 
          <TD><TABLE WIDTH="750" BORDER="1" ALIGN="center" CELLPADDING="0" CELLSPACING="0" BORDERCOLOR="#111111" STYLE="BORDER-COLLAPSE: collapse">
              <TR> 
                <TD HEIGHT="27" COLSPAN="2">上传 
                  <INPUT NAME="filenum" CLASS="tx2" VALUE="1" SIZE="4">
                  个文件　　 
                  <INPUT TYPE="button" NAME="Button" CLASS="bt" onClick="addfile" VALUE="设 定">
                </TD>
              </TR>
              <TR> 
                <TD> <DIV ID="uptd"> </DIV></TD>
              </TR>
              <TR> 
                <TD HEIGHT="30" COLSPAN="2" ALIGN="middle"> 
                  <INPUT TYPE="Button" NAME="Button" CLASS="bt" VALUE="看看有几个框" onclick="Show()">   <INPUT TYPE="submit" NAME="Button" CLASS="bt" VALUE="上 传">
                  　　 
                  <INPUT TYPE="reset" NAME="Button" CLASS="bt" VALUE="重 置">
                </TD>
              </TR>
            </TABLE></TD>
        </TR>
      
      </TABLE>
    </FORM>
    </BODY>
    </HTML>
      

  2.   

    <html>
    <body>
    <form name="form1">
    <table id="tb1" border=0>
       <tr><td><a href="#" onclick="return addFj()">添加附件</a></td></tr>
    </table>
    <input type="hidden" name="fjCnt" value="1" />
    </form>
    </body>
    </html>
    <script language="javascript">
      function addFj()
      {
          var oTb = document.getElementById("tb1");
          var oTr = oTb.insertRow(0);
          var name = "thefilename"+document.form1.fjCnt.value;
          document.form1.fjCnt.value=parseInt(document.form1.fjCnt.value)+1;
          oTr.insertCell(0).innerHTML = "<input id='file' name='"+name+"' type=file style='width:400px;'> <input type=button onclick='return delFj(this)' value='删除'>"
          return false;
      }
      function delFj(obj)
      {
          obj.parentElement.parentElement.removeNode(true);
          return false;
      }
    </script>