I have a add button. when i click on it it get append new input text with placeholder option A,B,C,D,E with a remove button each. when i click on remove button of c then it shows the order A,B,D,E. but i need to get arrange as A,BD replace with C,E replace with C .
<div class="form-group col-md-6 mb-2 input-group" id="optionList">
<input type="text" class="form-control" id="myopt" placeholder="Option A" name="myopt[]" required><br>
<button type="button" class="btn btn-icon rounded-circle btn-success glow mr-1 mb-1 add_field_button"><i class="bx bx-list-plus"></i></button>
</div>
var x = 1; //initlal text box count
var nex = 'A'.charCodeAt(0);
$(add_button).click(function(e){ //on add input button click
e.preventDefault();
if(x < max_fields){ //max input box allowed
var curr = String.fromCharCode(nex+x++);
$(wrapper).append('<div class="input-group"><input type="text" class="form-control" id="myopt" placeholder="Option '+curr+'" name="myopt[]" required><button type="button" class="btn btn-icon rounded-circle btn-light-danger mr-1 mb-1 remove_field"><i class="bx bx-minus"></i></button><br></div>'); //add input box
}
});
You can add code like below on remove button click.
You delegate type biding with $(wrapper).on('click', '.remove_field', function(e) { so it will work for dynamically added button.
On click remove parent div.
Reset x & nex values.
Loop over all input except first inside wrapper and reset placeholder value.
$(wrapper).on('click', '.remove_field', function(e) {
e.preventDefault();
$(this).parent().remove();
x = 1;
nex = 'B'.charCodeAt(0);
$(wrapper).find('input[type=text]:not(:first)').each(function(i, item) {
x++; //text box increment
var curr = String.fromCharCode(nex++);
$(this).attr('placeholder', 'Option ' + curr);
})
});
Test it here.
var max_fields = 5; //maximum input boxes allowed
var wrapper = $("#optionList"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var x = 1; //initlal text box count
var nex = 'B'.charCodeAt(0);
$('.add-btn').click(function(e) { //on add input button click
e.preventDefault();
if (x < max_fields) { //max input box allowed
x++; //text box increment
var curr = String.fromCharCode(nex++);
$(wrapper).append('<div class="input-group"><input type="text" class="form-control" id="myopt" placeholder="Option ' + curr + '" name="myopt[]" required><button type="button" class="btn btn-icon rounded-circle btn-light-danger mr-1 mb-1 remove_field"><i class="bx bx-minus"></i>Remove</button><br></div>'); //add input box
}
});
$(wrapper).on('click', '.remove_field', function(e) {
e.preventDefault();
$(this).parent().remove();
x = 1;
nex = 'B'.charCodeAt(0);
$(wrapper).find('input[type=text]:not(:first)').each(function(i, item) {
x++; //text box increment
var curr = String.fromCharCode(nex++);
$(this).attr('placeholder', 'Option ' + curr);
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<input type='button' class='add-btn' value='add'>
<div class="form-group col-md-6 mb-2 input-group" id="optionList">
<input type="text" class="form-control" id="myopt" placeholder="Option A" name="myopt[]" required><br>
<button type="button" class="btn btn-icon rounded-circle btn-success glow mr-1 mb-1 add_field_button"><i class="bx bx-list-plus"></i></button>
</div>
Related
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed last year.
I have a simple section in which users can add input fields dynamically and users should be able to remove added input fields by clicking the delete button. am using vanilla js
here is a live demo : demo live codepen
HTML
<div id="domains-wrapper">
<div class="input-group">
<input name="domains" type="text" class="form-control domain-url" placeholder="Type valid url" value="" required="">
<div class="valid-feedback">Looks good!</div>
<button id="default-delete" style="display: none;" class="default-delete delete-input-el domain-btn btn-sm border border-1" type="button">
</button>
<button id="default-add" class="add-input-el added-input plus-button btn-sm border border-1 add_form_field" type="button">
<span class="add-icon">+
</span>
</button>
</div>
</div>
Js
var max_fields = 10;
var wrapper = document.getElementById("domains-wrapper");
var add_button = document.getElementById("default-add");
var x = 1;
add_button.addEventListener('click', function(e) {
e.preventDefault();
if (x < max_fields) {
x++;
$(wrapper).append('<div><input id="delete" type="text" name="mytext[]"/>Delete</div>'); //add input box
} else {
alert('You Reached the limits')
}
})
var deleteBtn = document.querySelectorAll(".delete");
deleteBtn.forEach(function(e) {
e.addEventListener('click', function() {
console.log('PL')
this.parentNode.remove(); //remove the whole div containing input and delete button
})
});
Problem, Now when I click the delete button nothing is happening,
Any idea what am I missing here?
your are not recovering the .delete to add listener after the click on more button
so delete field don't have listener
I can propose you to add the listener after the field append to solve your situation
var max_fields = 10;
var wrapper = document.getElementById("domains-wrapper");
var add_button = document.getElementById("default-add");
var x = 1;
add_button.addEventListener('click', function(e) {
e.preventDefault();
if (x < max_fields) {
x++;
var deleteField = document.createElement('div');
deleteField.insertAdjacentHTML('beforeend', '<input id="delete" type="text" name="mytext[]"/>');
var a = document.createElement('a');
a.href= '#';
a.innerText = 'Delete';
a.classList.add('delete');
deleteField.append(a);
wrapper.appendChild(deleteField); //add input box
a.addEventListener('click', function() {
var target = e.target || e.srcElement;
console.log('PL')
deleteField.remove();
})
} else {
alert('You Reached the limits')
}
})
<div id="domains-wrapper">
<div class="input-group">
<input name="domains" type="text" class="form-control domain-url" placeholder="Type valid url" value="" required="">
<div class="valid-feedback">Looks good!</div>
<button id="default-delete" style="display: none;" class="default-delete delete-input-el domain-btn btn-sm border border-1" type="button">
</button>
<button id="default-add" class="add-input-el added-input plus-button btn-sm border border-1 add_form_field" type="button">
<span class="add-icon">+
</span>
</button>
</div>
</div>
If no checkbox is selected, the form doesn't allow sending.
I would like to create a rule like this for boxes. At least two boxes must be filled. Otherwise, the form should not be allowed to be sent.
Below is the code structure.
on JSfiddle
$(document).ready(function() {
var max_fields = 32; //maximum input boxes allowed
var wrapper = $(".cameras"); //Fields wrapper
var add_button = $(".add-camera"); //Add button ID
var x = 1; //initlal text box count
$(add_button).click(function(e) { //on add input button click
e.preventDefault();
if (x < max_fields) { //max input box allowed
x++; //text box increment
$(wrapper).append('<div class="control-group input-group"><div class="input-group mb-3"><div class="input-group-prepend"><div class="input-group-text"><input type="checkbox" name="corrects[]" value="' + x + '" aria-label="Checkbox for following text input"></div></div><input type="text" class="form-control" name="options[]" aria-label="Text input with checkbox"><div class="input-group-btn"><button class="btn btn-danger remove-camera" type="button"> Remove</button></div></div></div>'); //add input box
}
});
$(wrapper).on("click", ".remove-camera", function(e) { //user click on remove text
e.preventDefault();
$(this).parent('div').remove();
})
$('#submit-btn').click(() => {
const x = document.querySelector('.cameras').querySelectorAll('input[type="text"]')
const checkedInputs = Array.from(x).filter(input => input.valueOf()).length
if (checkedInputs < 2) {
alert('at least 2 inpouts must be filled')
return;
}
const xd = document.querySelector('.cameras').querySelectorAll('input[type="checkbox"]')
const checkedBoxes = Array.from(xd).filter(input => input.checked).length
if (checkedBoxes < 1) {
alert('at least one checkbox must be checked')
return;
}
alert(`you checked ${checkedBoxes} checkboxes`)
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cameras">
<div class="camera-field">
<button type="button" class="add-camera btn btn-primary">+ Add Camera
</button>
</div>
<div class="control-group input-group">
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">
<input type="checkbox" name="corrects[]" value="1" aria-label="Checkbox for following text input">
</div>
</div>
<input type="text" class="form-control" name="options[]" aria-label="Text input with checkbox">
<div class="input-group-btn">
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-xl-4">
<button type="submit" class="btn btn-primary" id="submit-btn">submit</button>
<div class="mt-2">
</div>
</div>
You need to change your conditions
input.valueOf() should be input.value
checkbox < 1 to checkbox < 2
$(document).ready(function() {
var max_fields = 32; //maximum input boxes allowed
var wrapper = $(".cameras"); //Fields wrapper
var add_button = $(".add-camera"); //Add button ID
var x = 1; //initlal text box count
$(add_button).click(function(e) { //on add input button click
e.preventDefault();
if (x < max_fields) { //max input box allowed
x++; //text box increment
$(wrapper).append('<div class="control-group input-group"><div class="input-group mb-3"><div class="input-group-prepend"><div class="input-group-text"><input type="checkbox" name="corrects[]" value="' + x + '" aria-label="Checkbox for following text input"></div></div><input type="text" class="form-control" name="options[]" aria-label="Text input with checkbox"><div class="input-group-btn"><button class="btn btn-danger remove-camera" type="button"> Remove</button></div></div></div>'); //add input box
}
});
$(wrapper).on("click", ".remove-camera", function(e) { //user click on remove text
e.preventDefault();
$(this).parent('div').remove();
})
$('#submit-btn').click(() => {
const x = document.querySelector('.cameras').querySelectorAll('input[type="text"]')
const checkedInputs = Array.from(x).filter(input => input.value).length
if (checkedInputs < 2) {
alert('at least 2 inpouts must be filled')
return;
}
const xd = document.querySelector('.cameras').querySelectorAll('input[type="checkbox"]')
const checkedBoxes = Array.from(xd).filter(input => input.checked).length
if (checkedBoxes < 2) {
alert('at least two checkbox must be checked')
return;
}
alert(`you checked ${checkedBoxes} checkboxes`)
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cameras">
<div class="camera-field">
<button type="button" class="add-camera btn btn-primary">+ Add Camera
</button>
</div>
<div class="control-group input-group">
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">
<input type="checkbox" name="corrects[]" value="1" aria-label="Checkbox for following text input">
</div>
</div>
<input type="text" class="form-control" name="options[]" aria-label="Text input with checkbox">
<div class="input-group-btn">
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-xl-4">
<button type="submit" class="btn btn-primary" id="submit-btn">submit</button>
<div class="mt-2">
</div>
</div>
I have created a dynamic add / remove field with Autocomplete. The code is working fine except the Remove button. The remove button is not removing the fields.
$(document).ready(function() {
var max_fields = 10; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var x = 1; //initlal text box count
var availableAttributes = [
"account_address",
"account_address_city",
"account_address_country",
"account_address_state",
"account_telephone"
];
$(add_button).click(function(e) { //on add input button click
e.preventDefault();
if (x < max_fields) { //max input box allowed
x++; //text box increment
$(wrapper).append('<div class="user-fields"><div class="row"><div class="col-md-5"><div class="form-group"><input type="text" class="form-control" name="user_login[]" placeholder=""></div></div><div class="col-md-5"><div class="form-group"><input type="text" class="form-control" name="allocate_amount[]" placeholder=""></div></div><div class="col-md-2"><button type="button" class="btn btn-danger" class="remove_field"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Remove</button></div></div><div class="clear"></div></div>');
$(wrapper).find("input[name^='user_login']").autocomplete({
source: availableAttributes
});
//add input box
}
});
$(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
e.preventDefault();
$(this).parent('div').remove();
x--;
});
});
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="input_fields_wrap">
</div>
<button class="add_field_button">Add More Fields</button>
You are just removing immediate parent element instead traverse up to .user-fields element then remove() it so
use
$(this).closest('.user-fields').remove();
And use single class attribute when assigning CSS Class. You can't have same attribute appearing twice if it happens latter one is ignored hence the class remove_field is not getting assigned to your <button> so it event handler doesn't work.
so instead of
class="btn btn-danger" class="remove_field"
use
class="btn btn-danger remove_field"
$(document).ready(function() {
var max_fields = 10; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var x = 1; //initlal text box count
var availableAttributes = [
"account_address",
"account_address_city",
"account_address_country",
"account_address_state",
"account_telephone"
];
add_button.click(function(e) { //on add input button click
e.preventDefault();
if (x < max_fields) { //max input box allowed
x++; //text box increment
var element = $('<div class="user-fields"><div class="row"><div class="col-md-5"><div class="form-group"><input type="text" class="form-control" name="user_login[]" placeholder=""></div></div><div class="col-md-5"><div class="form-group"><input type="text" class="form-control" name="allocate_amount[]" placeholder=""></div></div><div class="col-md-2"><button type="button" class="btn btn-danger remove_field"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Remove</button></div></div><div class="clear"></div></div>');
element.find("input[name^='user_login']").autocomplete({
source: availableAttributes
});
wrapper.append(element);
//add input box
}
});
wrapper.on("click", ".remove_field", function(e) { //user click on remove text
e.preventDefault();
$(this).closest('.user-fields').remove();
x--;
});
});
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="input_fields_wrap">
</div>
<button class="add_field_button">Add More Fields</button>
I created a solution, your problem was to use a double class property on the button, and the remove function was not exact
$(document).ready(function() {
var max_fields = 10; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var x = 1; //initlal text box count
var availableAttributes = [
"account_address",
"account_address_city",
"account_address_country",
"account_address_state",
"account_telephone"
];
$(add_button).click(function(e){ //on add input button click
e.preventDefault();
if(x < max_fields){ //max input box allowed
x++; //text box increment
$(wrapper).append('<div class="user-fields"><div class="row"><div class="col-md-5"><div class="form-group"><input type="text" class="form-control" name="user_login[]" placeholder=""></div></div><div class="col-md-5"><div class="form-group"><input type="text" class="form-control" name="allocate_amount[]" placeholder=""></div></div><div class="col-md-2"><button type="button" class="btn btn-danger" id="remove_field"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Remove</button></div></div><div class="clear"></div></div>');
$(wrapper).find("input[name^='user_login']").autocomplete({
source: availableAttributes
});
//add input box
}
});
$(wrapper).on("click","#remove_field", function(e){ //user click on remove text
e.preventDefault(); $(this).parent('.col-md-2').parent('div').remove(); x--;
});
});
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="input_fields_wrap">
</div>
<button class="add_field_button">Add More Fields</button>
I am adding input field on clicking the button and at the same time giving remove button to remove the input field.However my remove button is not removing the input field instead it takes me to top of page...
<div class="input_fields_wrap">
<div class="form-group">
<label class="col-md-3 control-label" for="example-text-input">Preferred Work Location</label>
<div class="col-md-3">
<input type="text" id="loc" name="Work_Location[]" class="form-control" >
</div>
<button class="add_field_button">Add More Locations</button>
</div>
</div>
and below is the jQuery to add more textbox when I click the button
<script>
$(document).ready(function() {
var max_fields = 10; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var x = 1; //initlal text box count
$(add_button).click(function(e){ //on add input button click
e.preventDefault();
if(x < max_fields){ //max input box allowed
x++; //text box increment
$(wrapper).append('<div class="form-group"><label class="col-md-3 control-label" for="example-text-input">Preferred Work Location</label><div class="col-md-3"> <input type="text" id="loc" name="Work_Location[]" class="form-control" ></div>Remove</div>'); //add input box
}
});
$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault(); $(this).parent('div').remove(); x--;
})
});
</script>
I have an example for you, you can do it easier
function closeMe(element) {
$(element).parent().remove();
}
function addMore() {
var container = $('#list');
var item = container.find('.default').clone();
item.removeClass('default');
//add anything you like to item, ex: item.addClass('abc')....
item.appendTo(container).show();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul id="list">
<li class="default" style="display: none;">
<input type="text" /><span style="cursor: pointer;" onclick="closeMe(this);">close</span>
</li>
</ul>
<button onclick="addMore();">Add</button>
Also you can use this:
$(document).ready(function() {
var max_fields = 10; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var x = 1; //initlal text box count
$(add_button).click(function(e){ //on add input button click
e.preventDefault();
if(x < max_fields){ //max input box allowed
x++; //text box increment
$(wrapper).append('<div><input type="text" name="mytext[]"/>Remove</div>'); //add input box
}
});
$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault(); $(this).parent('div').remove(); x--;
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="input_fields_wrap">
<button class="add_field_button">Add More Fields</button>
<div><input type="text" name="mytext[]"></div>
</div>
Hope this is helpful for you
Thanks
$(document).ready(function() {
var max = 10;
var wrp= $(".input_fields_wrap");
var addBtn = $(".add_field_button");
var x = 1;
$(addBtn ).click(function(e){
e.preventDefault();
if(x < max){
x++;
$(wrp).append('<div class="form-group">
<label class="col-md-3 control-label" for="example-text-input">Preferred Work Location</label>
<div class="col-md-3">
<input type="text" id="loc" name="Work_Location[]" class="form-control" >
</div>
Remove</div>');
}
});
$(wrp).on("click",".remove_field", function(e){ /
e.preventDefault();
$(this).parent('div').remove(); x--;
})
});
I work With Bootstrap 3 and jQuery For Add input field.
HTML:
<div style="padding:30px;" class="form-group">
<label for="files" class="col-lg-1 control-label">form</label>
<div class="col-lg-9">
<div class="row">
<div class="col-lg-6">
<div class="input-group input-group-md"> <span class="input-group-addon"><a class="help-box" rel="popover" data-placement="top" data-original-title="123" data-content=""><i class="fa fa-file-text"></i></a></span>
<div id="InputsWrapper">
<input id="docs" class="form-control" type="text" name="files[]" placeholder="">
</div>
</div>
</div><a style="float:right" href="#" id="AddMoreFileBox" class="fa fa-plus fa-2x margin-top-8">Add New Field</a>
</div>
</div>
</div>
JS:
$(document).ready(function () {
var MaxInputs = 8; //maximum input boxes allowed
var InputsWrapper = $("#InputsWrapper"); //Input boxes wrapper ID
var AddButton = $("#AddMoreFileBox"); //Add button ID
var x = InputsWrapper.length; //initlal text box count
var FieldCount = 1; //to keep track of text box added
$(AddButton).click(function (e) //on add input button click
{
if (x <= MaxInputs) //max input box allowed
{
FieldCount++; //text box added increment
//add input box
$(InputsWrapper).append('<div style="position:relative;"><input class="form-control" type="text" name="mytext[]" id="field" value="Text ' + FieldCount + '"/>×</div>');
x++; //text box increment
}
return false;
});
$("body").on("click", ".removeclass", function (e) { //user click on remove text
if (x > 1) {
$(this).parent('div').remove(); //remove text box
x--; //decrement textbox
}
return false;
})
});
I add remove input field link (a href="#" class="removeclass" style="position:absolute;right:0px;">×</a>) with position:absolute. now when click in add new field bootstrap 3 not show remove link.
I found this problem: if we remove class="form-control" from($(InputsWrapper).append) text input remove link show and worked But when add class="form-control" remove link not show for each input field!!
how do fix this problem?
Problem:
Not Worked DEMO : http://jsfiddle.net/K7jQ7/4/
Worked Demo Without form-control : http://jsfiddle.net/K7jQ7/2/
here is js fiddle for you
http://jsfiddle.net/pragneshok/K7jQ7/1/
HTML CODE
<div style="padding:30px;" class="form-group">
<label for="files" class="col-lg-1 control-label">form</label>
<div class="col-lg-9">
<div class="row">
<div class="col-lg-6" id="cnt">
<div class="input-group input-group-md"> <span class="input-group-addon"><a class="help-box" rel="popover" data-placement="top" data-original-title="123" data-content=""><i class="fa fa-file-text"></i></a></span>
<div id="InputsWrapper">
<input id="docs" onclick="openKCFinder(this)" class="form-control" type="text" name="files[]" placeholder="">
</div>
</div>
</div><a style="float:right" href="#" id="AddMoreFileBox" class="fa fa-plus fa-2x margin-top-8">Add New Field</a>
</div>
</div>
</div>
jQuery code :
$(document).ready(function () {
var MaxInputs = 8; //maximum input boxes allowed
var InputsWrapper = $("#cnt"); //Input boxes wrapper ID
var AddButton = $("#AddMoreFileBox"); //Add button ID
var x = InputsWrapper.length; //initlal text box count
var FieldCount = 1; //to keep track of text box added
$(AddButton).click(function (e) //on add input button click
{
if (x <= MaxInputs) //max input box allowed
{
FieldCount++; //text box added increment
//add input box
$(InputsWrapper).append('<div class="input-group input-group-md"> <span class="input-group-addon"><a data-content="" data-original-title="123" data-placement="top" rel="popover" class="help-box"><i class="fa fa-file-text"></i></a></span><div id="InputsWrapper"><input type="text" placeholder="" name="files[]" class="form-control" onclick="openKCFinder(this)" id="docs"></div></div>');
x++; //text box increment
}
return false;
});
$("body").on("click", ".removeclass", function (e) { //user click on remove text
if (x > 1) {
$(this).parent('div').remove(); //remove text box
x--; //decrement textbox
}
return false;
})
});
UPDATED FIDDLE
http://jsfiddle.net/pragneshok/K7jQ7/3/
New updated fiddle
http://jsfiddle.net/pragneshok/K7jQ7/5/