Jquery动态添加文本框 [英] Jquery dynamically add textbox

问题描述

我的代码在用户点击添加按钮时能够创建文本框，但我不知道如何在用户点击添加按钮时垂直添加4个文本框，请帮帮我..

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

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

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

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

我的尝试：



以及c＃如何垂直读取4个文本框？真的不知道如何编写代码。

What I have tried:

and how the c# read the 4 textbox vertically ?really have no idea how to code this.

推荐答案

只需添加一个循环。

just add a loop to it.

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

当用户点击添加时使用以下代码。

Use below code when user click on add.

scope.AddBookDiv = function（）{

ClearFields（）;

scope.AddBookDiv = function () {
ClearFields();

这篇关于Jquery动态添加文本框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！