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" />
您可以在AddTextBox函数中添加"for"子句…
function AddTextBox() {
for (i = 0; i <=4; i++) {
var div = document.createElement('DIV');
div.innerHTML = GetDynamicTextBox("");
document.getElementById("TextBoxContainer").appendChild(div);
}
}