张建慧:用脚本设置输入框的数目

最新推荐文章于 2020-11-21 16:26:18 发布

原创最新推荐文章于 2020-11-21 16:26:18 发布 · 101 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一个简单的HTML和JavaScript示例，演示如何根据用户输入的数字动态生成多个文本框，适用于批量添加记录的场景。该方法简化了数据录入过程，并通过循环处理接收的数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

常见的比如上传图片时,如果要上传5个,可输入5,然后图片文件的选择框就变为了5

如果添加一些简单的内容,比如两三个文本框为一条记录,那么这样的信息采用这种方法将非常简便,只要在接收时轮循即可

下面是代码,保存为html即可:

<body topmargin="0" leftmargin="0">
<form name="FileForm" method="post" enctype="multipart/form-data" action="UpFileSave.asp">
<table width="98%" align="center" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td height="26" align="center" width="33%">请输入上传文件个数：</td>

    <td width="33%">
      <input name="FilesNum" type="text" value="2" size="10">
      <input type="button" name="Submit42" value="设定" onClick="ChooseOption();"></td>
    <td width="33%">
</td>
    </tr>
</table>

<div align="center">
<table width="98%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td> <div align="center">
            <table width="90%" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td height="30" id="FilesList">
    </td>
              </tr>
            </table>
            </div>
  </td>
        <td width="30%" valign="top"><br></td>
      </tr>
      <tr>
        <td colspan="2"> <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td> <div align="center">
                  <input type="submit" id="BtnSubmit" onClick="PromptInfo();" name="Submit" value=" 确定 ">
                  <input name="Path" value="" type="hidden" id="Path">
                </div></td>
              <td><div align="center">
                  <input type="reset" id="ResetForm" name="Submit3" value=" 重填 ">
                </div></td>
              <td><div align="center">
                  <input onClick="dialogArguments.location.reload();top.close();" type="button" name="Submit2" value=" 关闭 ">
                </div></td>
            </tr>
          </table></td>
      </tr>
</table>
</div>
</form>
<div id="LayerPrompt" style="position:absolute; z-index:1; left: 112px; top: 28px; background-color: #CCCCCC; layer-background-color: #CCCCCC; border: 1px none #000000; width: 254px; height: 63px; visibility: hidden;">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td><div align="right">请稍等，正在上传文件</div></td>
   <td width="35%"><div align="left"><font id="ShowInfoArea" size="+1"></font></div></td>
    </tr>
</table>
</div>
</body>
</html>

function ChooseOption()
{
var FilesNum = document.all.FilesNum.value;
if (FilesNum=='')
FilesNum=4;
var i,Optionstr;
   Optionstr = '<table width="100%" border="0" cellspacing="5" cellpadding="0">';
for (i=1;i<=FilesNum;i++)
      {
    Optionstr = Optionstr+'<tr><td> 标 题 '+i+'</td><td> <input type="text" accept="text" size="20" name="title'+i+'"> 内容 <input type="text" accept="text" size="20" name="content'+i+'"></td></tr>';
    }
Optionstr = Optionstr+'</table>';
    document.all.FilesList.innerHTML = Optionstr;
}
ChooseOption();
</script>

接收页的asp源码:
<%
FilesNum = Trim(Request.Form("FilesNum"))

For I = 1 To FilesNum
titlestr = "title" & i
contentstr = "content" & i
Response.Write i & "、标题： "&Request.Form(titlestr)&"内容："&Request.Form(contentstr)&"<br>"
Next

%>

本实例经测试通过,完全正确.