2016-07-05 72 views
0

我能加1名的文本框,当用户点击添加和C#阅读时对提交按钮点击用户输入数据,但我对如何添加4个文本框垂直时添加按钮用户点击请指导我不知道,谢谢。jquery动态添加和删除多个文本框?

我的C#

protected void Post(object sender, EventArgs e) 
{ 
    string[] textboxValues = Request.Form.GetValues("DynamicTextBox"); 
    JavaScriptSerializer serializer = new JavaScriptSerializer(); 
    this.Values = serializer.Serialize(textboxValues); 
    string message = ""; 
    foreach (string textboxValue in textboxValues) 
    { 
     message += textboxValue + "\\n"; 
    } 
    ClientScript.RegisterClientScriptBlock(this.GetType(), "alert", "alert('" + message + "');", true); 
} 

我jQuery的添加和删除文本框

<script type="text/javascript"> 
    function GetDynamicTextBox(value) { 
     return '<input name = "DynamicTextBox" type="text" value = "' + value + '" />' + 
       '<input type="button" value="Remove" onclick = "RemoveTextBox(this)" />' 
    } 
    function AddTextBox() { 
     var div = document.createElement('DIV'); 
     div.innerHTML = GetDynamicTextBox(""); 
     document.getElementById("TextBoxContainer").appendChild(div); 
    } 

    function RemoveTextBox(div) { 
     document.getElementById("TextBoxContainer").removeChild(div.parentNode); 
    } 

    function RecreateDynamicTextboxes() { 
     var values = eval('<%=Values%>'); 
     if (values != null) { 
      var html = ""; 
      for (var i = 0; i < values.length; i++) { 
       html += "<div>" + GetDynamicTextBox(values[i]) + "</div>"; 
      } 
      document.getElementById("TextBoxContainer").innerHTML = html; 
     } 
    } 
    window.onload = RecreateDynamicTextboxes; 
</script> 

我的HTML

<input class="btn btn-primary" id="btnAdd" type="button" value="Input" onclick="AddTextBox()"> 
<br /> 
<br /> 
<div id="TextBoxContainer"> 
</div> 
<br /> 
<asp:Button ID="btnPost" Text="Submit" CssClass="btn btn-success" runat="server" OnClick="Post" /> 

回答

0

您可以添加一个 “为” 上AddTextBox功能的语句...

function AddTextBox() { 
    for (i = 0; i <=4; i++) { 
     var div = document.createElement('DIV'); 
     div.innerHTML = GetDynamicTextBox(""); 
     document.getElementById("TextBoxContainer").appendChild(div); 
    } 
}