I'm trying to make a add more field. So when I press add more button it should add a number 1. textfield and a dropdown menu. and if you press once more it should do 2. textfield and a dropdown menu.
I have created this code to make a new field but the counter will not match if I delete an entry in the middle
$(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[]"/>Ta bort</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.11.1/jquery.min.js"></script>
<div class="input_fields_wrap">
<button class="add_field_button">Lägg till fler svar</button>
<div>
<input type="text" name="mytext[]">
</div>
</div>
If it is just for displaying purpose, use CSS counter:
$(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++;
$(wrapper).append('<div class="count"><input type="text" name="mytext[]"/><select><option value="1">1</option><option value="2">2</option><option value="3">3</option></select>Ta bort</div>'); //add input box
}
});
$(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
e.preventDefault();
$(this).parent('div').remove();
x--;
})
});
.input_fields_wrap {
counter-reset: count;
}
.count:before {
counter-increment: count;
content: counter(count) ".";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="input_fields_wrap">
<button class="add_field_button">Lägg till fler svar</button>
<div>
<input type="text" name="mytext[]">
</div>
</div>
Related
I am able to generate the dynamic fields but when i am trying to delete the fields rather then deleting the elements in front of the delete button it is deleting from last towards first
<script>
$(document).ready(function(){
var max_fields = 10;
var wrapper = $(".more");
var add_button = $(".add");
var x = 1;
$(add_button).click(function(e){
e.preventDefault();
if (x < max_fields){
x++;
$(wrapper).append('<div id="box'+x+'" class="row"><div class="col-sm-3 mb-3"><select name="feeType[]" class="form-control shadow-sm" required><option value="" selected disabled>Select Fee</option><option value="Admission">Admission Fee</option><option value="Development">Development Fee</option><option value="Annual">Annual Fee</option><option value="Tuition">Tuition Fee</option></select></div><div class="col-sm-3 mb-3"><input type="number" name="amount[]" class="form-control shadow-sm" placeholder="Amount" required></div><div class="col-sm-3 mb-3"><button class="delete btn btn-danger shadow-sm">Delete Fields</button></div></div>'); //add input box
}else{
alert('You Reached the limits')
}
});
$(wrapper).on("click", ".delete", function(e){
e.preventDefault();
$('#box'+x).remove();
x--;
})
});
</script>
Because x's value will always be just the number of element that were dynamically created.
A possible solution would be to find the 'remove' button that was clicked and remove it's parent. replace $('#box'+x).remove(); with this $(this).parents('.row').remove();
A working fiddle example:
https://jsfiddle.net/3L986nbj/
I have a simple method to hide and show. I tried to use the live() function and even this method is not working.
I want to append the <div> and with every <div> there should be a hide and show button. Also, the <div> should hide when I click on hide.
$(document).ready(function() {
var max_fields = 20; //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() { //on add input button click
if (x <= max_fields) { //max input box allowed
x++; //text box increment
$(wrapper).append('<div id="myclass""><input type="text" name="mytext[]"/><button onclick class="hide_field">Hide</button><button onclick class="show_field">show</button></div>');
}
});
});
$("#myclass").on("click", ".hide_field", function() {
$(this).hide();
});
$("#myclass").on("click", ".show_field", function() {
$(this).show();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input_fields_wrap">
<button class="add_field_button">Add Comment</button>
<br>
<div id="myclass"><input type="text" name="mytext[]">
</div>
</div>
Implementing the changes proposed by matthias_h:
using class instead of id
using three argument form of on click handler
target the input by using $(this).closest
$(document).ready(function() {
var max_fields = 20; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var x = 1; //initial text box count
$(add_button).click(function() { //on add input button click
if (x <= max_fields) { //max input box allowed
x++; //text box increment
$(wrapper).append('<div class="myclass""><input type="text" name="mytext[]"/><button onclick class="hide_field">Hide</button><button onclick class="show_field">Show</button></div>');
}
});
});
$(document.body).on("click", ".myclass .hide_field", function() {
$(this).closest("div").children("input").hide();
});
$(document.body).on("click", ".myclass .show_field", function() {
$(this).closest("div").children("input").show();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input_fields_wrap">
<button class="add_field_button">Add Comment</button>
<br>
<div class="myclass"><input type="text" name="mytext[]">
</div>
</div>
Here is my code. I am able to add new field and appending the new field and remove button. There is two problem.
Remove button is not appending properly. It should append just after the
strength every time.
It Should remove respected input fields salt field and Strength field of every column.
$(document).ready(function() {
var max_fields = 100; //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
var y = x - 1;
$(wrapper).append('<div class="input-field col s6"><input class="salt" id="salt' + y + '" name="drugs[' + y + '][salt]" type="text" required><label for="salt' + y + '">Salt/Drugs</label></div><div class="input-field col s6"><input class="strength" id="strength' + y + '" name="drugs[' + y + '][strength]" type="text" required><label for="strength' + y + '">Strength</label></div>'+'</div>'+' <div class="s4"><i class="material-icons">remove_circle</i></div>');
}
});
$(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
e.preventDefault();
$(this).parent().remove();
x--;
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="row input_fields_wrap">
<div class="input-field col s4">
<input class="salt" id="salt" name="drugs[0][salt]" type="text" required>
<label for="salt">Salt/Drugs</label>
</div>
<div class="input-field col s4">
<input class="strength" id="strength" name="drugs[0][strength]" type="text" required>
<label for="strength">Strength</label>
</div>
<div class="s4">
<button class="btn btn-large light-blue add_field_button">Add more salt/drugs</button>
</div>
</div>
I want it to be like this
Based on the link in the comment, it is better to restructure the htmlString.
You can try the following way:
$(document).ready(function() {
var max_fields = 100; //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
var y = x - 1;
$(wrapper).prepend('<div class="input-field col s6"><input placeholder="Salt/Drugs" class="salt" id="salt' + y + '" name="drugs[' + y + '][salt]" type="text" required><input placeholder="Strength" class="strength" id="strength' + y + '" name="drugs[' + y + '][strength]" type="text" required><i class="material-icons">remove_circle</i></div></div>');
}
});
$(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
e.preventDefault();
$(this).parent().remove();
x--;
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="row input_fields_wrap">
<div class="input-field col s4">
<input placeholder="Salt/Drugs" class="salt" id="salt" name="drugs[0][salt]" type="text" required>
<input placeholder="Strength" class="strength" id="strength" name="drugs[0][strength]" type="text" required>
</div>
<div class="s4">
<button class="btn btn-large light-blue add_field_button">Add more salt/drugs</button>
</div>
</div>
Dynamically generated elements do not respond when listening the event directly, you have to listen to the DOM on them like
$(document).on("click", ".remove_field", function(e) { //user click on remove text
e.preventDefault();
$(this).parent().remove();
x--;
})
I want to add form for adding new categories. Categories might have infinitive sub categories.
$(document).ready(function () {
var max_fields = 15; //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="input_fields_wrap_sec"><input type="text" name="mytext[]" placeholder="Sub-Category title"/>\n\
<input type="submit" name="submit1" value="Add Sub-Sub-Category" class="add_field_button" >\n\
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/2.1.1/jquery.min.js"></script>
<form action="" method="POST">
<div class="input_fields_wrap">
<p>Please enter the Category Title</p>
<input type="text" name="mytext[]" placeholder="Category title">
<input type="submit" name="submit1" value="Add Sub-Category" class="add_field_button" >
</div>
<input type="submit" name="submit" value="submit">
</form>
Now I have form like this and when I press "add sub-sub category" it should appear new "sub-sub category" input with buttons: "add sub-sub-sub category" and "remove"
It should be like this, the deep of categories is infinitive
Labas!
You could try something like this:
function getValueText(level) {
let i = 0
let text = "Add ";
while (i < level) {
text += "sub-"
i++;
}
return text + "category";
}
function appendInnerCategory(level, element) {
var myDiv = document.createElement("div");
myDiv.className = "level-" + level
var btn = document.createElement("input");
btn.type = "button";
btn.value = getValueText(level);
btn.addEventListener("click", function(event) {
appendInnerCategory(level + 1, event.target.parentNode);
});
var textBox = document.createElement("input");
textBox.type = "text";
myDiv.appendChild(textBox);
myDiv.appendChild(btn);
element.appendChild(myDiv);
}
appendInnerCategory(0, document.querySelector('.wrapper'));
HTML:
<div class="wrapper"></div>
Fiddle: http://jsfiddle.net/7L382gow/
Updated fiddle to maintain a structure object, while manipulating the DOM.
Submit will print the resulting hierarchy to console.
http://jsfiddle.net/bqk6pmjg/
I am developing a form that can add specific number of fields when the button is clicked and it will be disabled when the number reached the limit of adding text fields.
the problem is when it reaches the limit the button can still be clicked and will disable when you click on the button twice when the text field reached its maximum input boxes allowed
here is my code.
$(document).ready(function() {
var max_fields = 5; //maximum input boxes allowed
var wrapper = $("#healthcard"); //Fields wrapper
var add_button = $("#add_field"); //Add button ID
var x = 0; //initlal text box count
$(add_button).click(function(e) { //on add input button click
e.preventDefault();
if (x >= max_fields) { //max input box allowed
e.preventDefault();
$(this).toggleClass("disabled");
} else {
x++; //text box increment
$(wrapper).append('<div class="hmo-add' + x + '""><div class="col-sm-12 col-md-4"><div class="form-group"><label class="card">Healthcard</label><input class="form-control col-md-4" type="text" name="mytext[]"/></div></div><div class="col-sm-12 col-md-8"><div class="form-group"><label class="card">Healthcard No.</label><input class="form-control col-md-8" type="text" />Remove</div></div></div>'); //add input box
}
});
$(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
e.preventDefault();
$('.hmo-add' + x).remove();
x--;
e.preventDefault();
$('#add_field').toggleClass("disabled");
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-12">
<div id="healthcard" class="form-group">
<button id="add_field" class="btn btn-primary" type="button" name="hmo">HMO</button>
</div>
</div>
</div>
I think I am missing something in my code that I can't figure out. Please help me.
sorry for bad english.
Thanks,
Your problem is that you need to click the button 6 times to disable it which is wrong , below is a working snippet using the disabled attribute:
When the user reaches the max, I disable the button.
The button click is register to work on the button that is not disabled using not(':disabled')
When the user removes a div, the button is enabled again
$(document).ready(function() {
var max_fields = 5; //maximum input boxes allowed
var wrapper = $("#healthcard"); //Fields wrapper
var add_button = $("#add_field"); //Add button ID
var x = 0; //initlal text box count
$("#add_field").not(':disabled').click(function(e) { //on add input button click
e.preventDefault();
x++; //text box increment
if (x == max_fields)
{
$(this).attr("disabled", true);
}
$(wrapper).append('<div class="hmo-add' + x + '""><div class="col-sm-12 col-md-4"><div class="form-group"><label class="card">Healthcard</label><input class="form-control col-md-4" type="text" name="mytext[]"/></div></div><div class="col-sm-12 col-md-8"><div class="form-group"><label class="card">Healthcard No.</label><input class="form-control col-md-8" type="text" />Remove</div></div></div>'); //add input box
});
$(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
$('.hmo-add' + x).remove();
x--;
$('#add_field').attr("disabled", false);
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-12">
<div id="healthcard" class="form-group">
<button id="add_field" class="btn btn-primary" type="button" name="hmo">HMO</button>
</div>
</div>
</div>
Check x right after append:
$(add_button).click(function(e) { //on add input button click
if (x < max_fields) { //max input box allowed
x++; //text box increment
$(wrapper).append('<div class="hmo-add' + x + '""><div class="col-sm-12 col-md-4"><div class="form-group"><label class="card">Healthcard</label><input class="form-control col-md-4" type="text" name="mytext[]"/></div></div><div class="col-sm-12 col-md-8"><div class="form-group"><label class="card">Healthcard No.</label><input class="form-control col-md-8" type="text" />Remove</div></div></div>'); //add input box
if (x == max_fields)
{
$(this).addClass("disabled");
}
}
});
DEMO
Instead of toggleClass use addClass while disabling and removeClass while enabling as below:
$(add_button).click(function(e) { //on add input button click
e.preventDefault();
if (x >= max_fields) { //max input box allowed
e.preventDefault();
$(this).addClass("disabled");//addClass
} else {
x++; //text box increment
$(wrapper).append('<div class="hmo-add' + x + '""><div class="col-sm-12 col-md-4"><div class="form-group"><label class="card">Healthcard</label><input class="form-control col-md-4" type="text" name="mytext[]"/></div></div><div class="col-sm-12 col-md-8"><div class="form-group"><label class="card">Healthcard No.</label><input class="form-control col-md-8" type="text" />Remove</div></div></div>'); //add input box
}
});
$(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
e.preventDefault();
$('.hmo-add' + x).remove();
x--;
e.preventDefault();
$('#add_field').removeClass("disabled"); //removeClass
})
This is what you need:
$(document).ready(function() {
var max_fields = 5; //maximum input boxes allowed
var wrapper = $("#healthcard"); //Fields wrapper
var add_button = $("#add_field"); //Add button ID
var x = 0; //initlal text box count
$(add_button).click(function(e) { //on add input button click
e.preventDefault();
if (x >= max_fields) { //max input box allowed
$(this).addClass("disabled");
$(this).attr("disabled", "disabled");
} else {
x++; //text box increment
$(wrapper).append('<div class="hmo-add' + x + '""><div class="col-sm-12 col-md-4"><div class="form-group"><label class="card">Healthcard</label><input class="form-control col-md-4" type="text" name="mytext[]"/></div></div><div class="col-sm-12 col-md-8"><div class="form-group"><label class="card">Healthcard No.</label><input class="form-control col-md-8" type="text" />Remove</div></div></div>'); //add input box
}
});
$(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
e.preventDefault();
$('.hmo-add' + x).remove();
x--;
$('#add_field').removeClass("disabled");
$('#add_field').removeAttr("disabled");
})
});
I removed the toggleClass to addClass/removeClass as it makes more sense in this situation. I also disabled the button once the limit is reached using the disabled HTML attribute and the attr() function. If you hit the remove button, the disabled class and attribute is removed. I also removed a couple of duplicate e.PreventDefault() calls as they weren't needed.
$(document).ready(function() {
var max_fields = 5; //maximum input boxes allowed
var wrapper = $("#healthcard"); //Fields wrapper
var add_button = $("#add_field"); //Add button ID
var x = 0; //initlal text box count
$(add_button).click(function(e) { //on add input button click
e.preventDefault();
//if (x >= max_fields) { //max input box allowed
//e.preventDefault();
// $(this).toggleClass("disabled");
//} else {
if(x < max_fields){
x++; //text box increment
$(wrapper).append('<div class="hmo-add' + x + '""><div class="col-sm-12 col-md-4"><div class="form-group"><label class="card">Healthcard</label><input class="form-control col-md-4" type="text" name="mytext[]"/></div></div><div class="col-sm-12 col-md-8"><div class="form-group"><label class="card">Healthcard No.</label><input class="form-control col-md-8" type="text" />Remove</div></div></div>'); //add input box
if(x === max_fields) {
$(this).toggleClass("disabled");
}
}
});
$(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
e.preventDefault();
$('.hmo-add' + x).remove();
x--;
e.preventDefault();
$('#add_field').toggleClass("disabled");
})
});
[http://jsfiddle.net/W4Km8/8153/][1] I just updated your code in jsfiddle please check