asp.net点击按钮动态生成文本框控件-优快云博客

本文介绍了一种使用JavaScript动态生成HTML表单的方法，并演示了如何收集这些表单的数据进行处理。通过创建按钮事件来增加新的输入字段，然后利用隐藏字段收集所有输入的数据。

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

页面代码：
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>无标题页</title>
     <script type="text/javascript"> 
function AddInputArea()       
 {           
  var div = document.createElement("<div>");                        
  div.innerHTML = "<table><tr><td>材料名称</td><td><input type='text' name='inputName' /></td></tr><tr><td>材料数量</td><td><input type='text' name='inputSum' /></td></tr></table>";                        
  document.getElementById("Content").appendChild(div);        
  }         
  function GetAddInput()        
  {            
  var names = document.getElementsByName("inputName");              
  if(names.length == 0)            
  {                
  alert("没有可用的信息！");               
   return false;             
   }                   
    genders = document.getElementsByName("inputSum");                  
    for(var i = 0;i < names.length; i ++)           
     {                
     document.getElementById("names").value += names[i].value + ",";                
     document.getElementById("sums").value += genders[i].value + ",";            
     }        
     }    
     </script>
</head>
<body>
    <form id="form1" runat="server">
     <div id="Content">    </div>   
      <asp:HiddenField ID="names" runat="server" />  
        <asp:HiddenField ID="sums" runat="server" /> 
           <input type="button" value="增加" onclick="AddInputArea()" />   
            <asp:Button ID="btnConfirm" runat="server" Text="提交"  OnClientClick="return GetAddInput()" onclick="btnConfirm_Click" />   
    </form>
</body>
</html>

后台代码：
     protected void btnConfirm_Click(object sender, EventArgs e)
    {
        string[] inputNames = names.Value.TrimEnd(',').Split(',');
        string[] inputSum = sums.Value.TrimEnd(',').Split(','); //这两个数组就是输入的值了
        for (int i = 0; i < inputNames.Length; i++)
        {
            Response.Write(inputNames[i]);//循环获得的每一个材料名称
            Response.Write(",");
            Response.Write(inputSum[i]);//循环获得的每一个数量
            Response.Write("</br>"); //改成写入数据库就行了
        }

    }