Question

当用户点击添加时，我可以添加1个文本框，单击“提交”按钮时，c＃读取用户输入数据，但我不知道如何在用户点击时垂直添加4个文本框添加按钮请指导我，谢谢。

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

Answer 1

您可以在AddTextBox函数中添加“for”子句...

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

Jquery动态添加和删除多个文本框？

1 个答案: