2016-07-05 25 views
0

ユーザがをクリックしたときに1つのテキストボックスを追加できます。を追加して、送信ボタンをクリックしたときにユーザ入力データを読み込みましたが、ユーザが追加ボタンをクリックしたときに垂直に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); 
} 

あなたはAddTextBox機能の句 "ため" を追加することができ、私の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

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

テキストボックスを追加および削除するために私のjqueryの...

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