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

本文关键字:文本 删除 动态 添加 Jquery | 更新日期: 2023-09-27 17:55:04

我能够添加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" />

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

您可以在AddTextBox函数中添加"for"子句…

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