2016-07-05 13 views
0

Ich bin in der Lage, 1 Textfeld hinzuzufügen, wenn Benutzer klicken hinzufügen und C# lesen Sie die Benutzereingabedaten, wenn Sie auf Senden klicken, aber ich habe keine Ahnung, wie Sie 4 Textbox vertikal hinzufügen, wenn Benutzer auf Hinzufügen Schaltfläche klicken Sie bitte, Danke. Jquery dynamisch hinzugefügt und entfernen mehrere Textfelder?

mein 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); 
} 

meine Jquery hinzufügen und entfernen Textbox

<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> 

mein 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" /> 

Antwort

0

Sie können eine "für" -Klausel auf AddTextBox Funktion hinzufügen ...

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