Click here to Skip to main content
15,886,199 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
My code below able to create textbox when user click on add button,but i have no idea how to add 4 textbox vertically whenever user click on the add button,please help me..

ASP.NET
<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" />


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


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


What I have tried:

and how the c# read the 4 textbox vertically ?really have no idea how to code this.
Posted
Updated 6-Jul-16 22:55pm

just add a loop to it.
JavaScript
function AddTextBox() {
          for (var i = 0; i < 4; i++) {
              var div = document.createElement('DIV');
              div.innerHTML = GetDynamicTextBox("");
              document.getElementById("TextBoxContainer").appendChild(div);
          }
       }
 
Share this answer
 
Use below code when user click on add.

$scope.AddBookDiv = function () {
ClearFields();
$scope.Action = "Add";
$scope.divBook = true;
}

where AddBookDiv is a function bind on add with the help of ng-click="AddBookDiv()" in a view(.cshtml).
 
Share this answer
 
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900