使用jQuery动态添加或删除输入框
[英]Dynamically add or remove input box using jQuery
问题描述
我的问题是我可以动态添加/删除输入框，但问题是当我手动添加一组输入框并删除按钮而不是按添加按钮创建一个时，它无法删除它。
是否可以有 3 组输入框但有 2 个删除按钮？
感谢您的任何帮助。
<script>
$(document).ready(function() {
$("#add").click(function() {
var intId = $("#buildyourform div").length + 1;
var label = $("<label>Field Name</label>");
var labelType = $("<label>Field Type</label>");
var labelReq = $("<label>Require</label>");
var labelTag = $("<label>Tag</label>");
var fieldWrapper = $("<div class=\"fieldwrapper\" id=\"field" + intId + "\"/>");
var fName = $("<input type=\"text\" name=\"inputName[]\" class=\"required\" />");
var fTag = $("<input type=\"text\" name=\"inputTag[]\" class=\"required\" />");
var fReq = $("<select class=\"fieldtype\"><option value=\"checkbox\">Checked</option><option value=\"1\">Yes</option><option value=\"0\">No</option></select>");
var fType = $("<select class=\"fieldtype\"><option value=\"checkbox\">Checked</option><option value=\"textbox\">Text</option><option value=\"textarea\">Paragraph</option></select>");
var removeButton = $("<input type=\"button\" class=\"remove\" value=\"Remove\" />");
removeButton.click(function() {
$(this).parent().remove();
});
fieldWrapper.append(label);
fieldWrapper.append(fName);
fieldWrapper.append('<br>');
fieldWrapper.append(labelType);
fieldWrapper.append(fType);
fieldWrapper.append('<br>');
fieldWrapper.append(labelReq);
fieldWrapper.append(fReq);
fieldWrapper.append('<br>');
fieldWrapper.append(labelTag);
fieldWrapper.append(fTag);
fieldWrapper.append('<br>');
fieldWrapper.append(removeButton);
$("#buildyourform").append(fieldWrapper);
});
});
</script>
</head>
<body>
<form id="config" method="post" action="config.php" >
<fieldset id="buildyourform">
<legend>Build your own form!</legend>
<!-- I manually create a set of input box here -->
<div class="fieldwrapper" id="field1"><label>Field Name</label><input type="text" name="inputName[]" class="required"><br><label>
Field Type</label><select class="fieldtype">
<option value="checkbox">Checked</option><option value="textbox">Text</option><option value="textarea">Paragraph</option></select><br><label>Require</label>
<select class="fieldtype"><option value="checkbox">Checked</option>
<option value="1">Yes</option><option value="0">No</option></select><br><label>
Tag</label><input type="text" name="inputTag[]" class="required"><br><input type="button" class="remove" value="Remove"></div>
<!-- I manually create a set of input box here -->
<input type="text" name="input[]" value="test">
</fieldset>
<input type="button" value="Add a field" class="add" id="add" />
<input type="submit" value="Submit">
</form>
</html>
2 个解决方案
解决方案1
1 已采纳 2012-03-21 17:49:31
尝试在加载文档时设置删除按钮操作。
在此处尝试或使用下面的代码。
<script>
$(document).ready(function() {
$('.remove').click(function(){
$(this).parent().remove();
});
$("#add").click(function() {
var intId = $("#buildyourform div").length + 1;
var label = $("<label>Field Name</label>");
var labelType = $("<label>Field Type</label>");
var labelReq = $("<label>Require</label>");
var labelTag = $("<label>Tag</label>");
var fieldWrapper = $("<div class=\"fieldwrapper\" id=\"field" + intId + "\"/>");
var fName = $("<input type=\"text\" name=\"inputName[]\" class=\"required\" />");
var fTag = $("<input type=\"text\" name=\"inputTag[]\" class=\"required\" />");
var fReq = $("<select class=\"fieldtype\"><option value=\"checkbox\">Checked</option><option value=\"1\">Yes</option><option value=\"0\">No</option></select>");
var fType = $("<select class=\"fieldtype\"><option value=\"checkbox\">Checked</option><option value=\"textbox\">Text</option><option value=\"textarea\">Paragraph</option></select>");
var removeButton = $("<input type=\"button\" class=\"remove\" value=\"Remove\" />");
removeButton.click(function() {
$(this).parent().remove();
});
fieldWrapper.append(label);
fieldWrapper.append(fName);
fieldWrapper.append('<br>');
fieldWrapper.append(labelType);
fieldWrapper.append(fType);
fieldWrapper.append('<br>');
fieldWrapper.append(labelReq);
fieldWrapper.append(fReq);
fieldWrapper.append('<br>');
fieldWrapper.append(labelTag);
fieldWrapper.append(fTag);
fieldWrapper.append('<br>');
fieldWrapper.append(removeButton);
$("#buildyourform").append(fieldWrapper);
});
});
</script>
</head>
<body>
<form id="config" method="post" action="config.php" >
<fieldset id="buildyourform">
<legend>Build your own form!</legend>
<!-- I manually create a set of input box here -->
<div class="fieldwrapper" id="field1"><label>Field Name</label><input type="text" name="inputName[]" class="required"><br><label>
Field Type</label><select class="fieldtype">
<option value="checkbox">Checked</option><option value="textbox">Text</option><option value="textarea">Paragraph</option></select><br><label>Require</label>
<select class="fieldtype"><option value="checkbox">Checked</option>
<option value="1">Yes</option><option value="0">No</option></select><br><label>
Tag</label><input type="text" name="inputTag[]" class="required"><br><input type="button" class="remove" value="Remove"></div>
<!-- I manually create a set of input box here -->
<input type="text" name="input[]" value="test">
</fieldset>
<input type="button" value="Add a field" class="add" id="add" />
<input type="submit" value="Submit">
</form>
</html>
解决方案2
0 2012-03-21 18:19:50
这是使用模板的绝佳案例，因为它使漏洞更易于维护，而不是在 JavaScript 中创建整个表单div 。
实时代码： http : //jsbin.com/uzelix/edit#javascript,html
HTML
<fieldset id="buildyourform">
<legend>Build your own form!</legend>
<div id="fields"></div>
</fieldset>
<button class="btn-add">Add field</button>
<!-- I manually create a set of input box here -->
<script id="fieldTemplate" type="text/x-jquery-tmpl">
<div class="fieldwrapper" id="field_${Id}">
<label>Field Name</label>
<input type="text" name="fieldname_${Id}" class="required">
<label>Field Type</label>
<select class="fieldtype_${Id}">
<option value="checkbox">Checked</option>
<option value="textbox">Text</option>
<option value="textarea">Paragraph</option>
</select>
<label>Require</label>
<select class="fieldtype_${Id}">
<option value="checkbox">Checked</option>
<option value="1">Yes</option>
<option value="0">No</option>
</select>
<label>Tag</label>
<input type="text" name="fieldtag_${Id}" class="required">
<div class="control-button">
<button class="btn-remove">Remove</button>
</div>
</div>
</script>
<!-- I manually create a set of input box here -->
jQuery
$(function(){
$(".btn-add").click(function() {
addField();
});
$(".btn-remove").live("click", function() {
$(this).closest(".fieldwrapper").slideUp("slow", function() {
$(this).remove();
clearRemove();
});
});
// add first field
addField();
});
function addField() {
var i = $(".fieldwrapper").length;
$("#fieldTemplate").tmpl({ Id: i }).appendTo("#fields");
clearRemove();
}
function clearRemove() {
// hide all remove buttons except last one so we don't get
// multiple ids... or use a counter to keep ids unique.
if($(".fieldwrapper").length > 1) {
$(".btn-remove:last").show();
$(".btn-remove:not(:last)").hide();
}
else
$(".btn-remove").hide();
}
我正在尝试使用可排序的jquery函数添加添加删除输入框以对动态创建的输入框进行排序
[英]I'm trying to make a add remove input box with sortable jquery function to Sort the dynamically created input boxes
使用 jQuery 动态添加行时如何将模式弹出文本编辑器设置为普通输入框
[英]How to set modal popup text editor to normal input box when dynamically add rows using jQuery
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.