Dynamically add or remove input box using jQuery
Question
The problem in my case is I can dynamically add / remove input boxes, but the problem is when I manually add a set of input box and remove button instead of press add button to create one, it can not remove it.
Is it possible to have 3 sets of input boxes but 2 remove buttons?
Thank you for any kind of help.
<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 answers
solution1
1 ACCPTED 2012-03-21 17:49:31
Try setting the remove button actions when the document is loaded.
Try it here or use the code below.
<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>
solution2
0 2012-03-21 18:19:50
This is an excellent case to use templates as it makes the hole thing much more maintainable rather than create the entire form div in JavaScript.
Live code: 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();
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
add remove input box using jQuery bootstrap
Dynamically add and remove <input> jQuery
I'm trying to make a add remove input box with sortable jquery function to Sort the dynamically created input boxes
How to dynamically Add/Remove file type input field using jquery?
How to add input box dynamically with jQuery?
Add/Remove Input Fields Dynamically with jQuery
Add options dynamically in combo box using Jquery
Add, remove input box using javascript
How to set modal popup text editor to normal input box when dynamically add rows using jQuery
Dynamically add/remove inputs with jQuery - Fail to remove input
Related Tags