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
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/
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 have a Button which adds a set of Text fields whenever i Click on Add More button.
Actually what happens is that whenever i Add new text fields it get appended above the Add More button, and when i press again that button it Adds the text fields above the text fields which were added recently.
It Must get added exact above the **Add More ** button not above the, recently added text fields.
Below is my code , jst check where i am going wrong
new.php
. . . . .
<div class="col-md-8 col-sm-12 col-24">
<div class="input_fields" style="color:black">
<button class="add_field btn " onclick="incrementValue()" >Add More</button>
<div>
<input type="text" name="mytextt[]" hidden="" ></div>
</div>
</div>
</div>
. . . . . . .
<script type="text/javascript">
$(document).ready(function() {
var max_fields = 10; //maximum input boxes allowed
var wrapper = $(".input_fields"); //Fields wrapper
var add_button = $(".add_field"); //Add button ID
var wrapper_pre1 = $(".present_fields_1"); //Fields wrapper
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).prepend('<br><div style="margin-left:50%;"><div class="form-group"><label class="control-label type" for="selectbasic" style="">Type of work</label><div class="col-md-6"><select id="type_of_work[]" name="type_of_work[]" class="form-control type_of_work" style=""><option value="Audit Report">Audit Report</option><option value="ITR filing">ITR filing</option><option value="VAT Filing">VAT Filing</option><option value="Accounting">Accounting</option><option value="Registration">Registration</option><option value="Certification">Certification</option><option value="Others">Others</option></select></div></div><div class="form-group"> <label class="col-md-4 control-label status" for="selectbasic" style="">Status</label><div class="col-md-6"><select id="status1' + x + '" name="status[]" class="form-control status"><option value="Pending">Pending</option><option value="Work in process">Work in process</option><option value="Completed">Completed</option></select></div></div><div class="form-group row"><label for="example-date-input" class="col-2 col-form-label date">DATE</label><div class="col-10 col"><input class="form-control datepicker pickers" id="date" name="date[]" style="" type="text" readonly></div></div><div class="form-group"><label class="col-md-4 control-label comment" for="textinput" style="">Comment</label><div class="col-md-4"><input id="comments' + x + '" name="comment[]" type="text" placeholder="" class="form-control input-md comment" style=""></div></div></center><img src="images/del24.png" ></a></div>'); //add input box\
var newInput=$("#date").datepick({dateFormat: 'dd/mm/yyyy'});
newInput.datepick({dateFormat: 'dd/mm/yyyy'}).datepick("setDate", new Date());
$("#status1" + x).click(function () {
if ($("#status1" + x).val() == "Completed") {
$("#comments" + x).attr("required", "required");
}
else
$("#comments" + x).attr("required", false);
});
}
});
$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault(); $(this).parent('div').remove(); x--;
})
$(wrapper_pre1).on("click",".remove_field_pre1", function(e){ //user click on remove text
e.preventDefault(); $(this).parent('div').remove(); x--;
})
});
</script>
As you can see the below image , in the Comment field i have added numbers just for refrence how it gets added , want the sequence to be as above Add More button but its getting added at the top
Thank you in advance !
You have to add your template differently. Instead of
$(wrapper).prepend('<br><div style="marg (...) of ></a></a></div>')
add it like this
$('<br><div style="marg (...) of ></a></a></div>').insertBefore(add_button)
$(document).ready(function() {
var max_fields = 10; //maximum input boxes allowed
var wrapper = $(".input_fields"); //Fields wrapper
var add_button = $(".add_field"); //Add button ID
var wrapper_pre1 = $(".present_fields_1"); //Fields wrapper
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('<br><div style="margin-left:50%;"><div class="form-group"><label class="control-label type" for="selectbasic" style="">Type of work</label><div class="col-md-6"><select id="type_of_work[]" name="type_of_work[]" class="form-control type_of_work" style=""><option value="Audit Report">Audit Report</option><option value="ITR filing">ITR filing</option><option value="VAT Filing">VAT Filing</option><option value="Accounting">Accounting</option><option value="Registration">Registration</option><option value="Certification">Certification</option><option value="Others">Others</option></select></div></div><div class="form-group"> <label class="col-md-4 control-label status" for="selectbasic" style="">Status</label><div class="col-md-6"><select id="status1' + x + '" name="status[]" class="form-control status"><option value="Pending">Pending</option><option value="Work in process">Work in process</option><option value="Completed">Completed</option></select></div></div><div class="form-group row"><label for="example-date-input" class="col-2 col-form-label date">DATE</label><div class="col-10 col"><input class="form-control datepicker pickers" id="date" name="date[]" style="" type="text" readonly></div></div><div class="form-group"><label class="col-md-4 control-label comment" for="textinput" style="">Comment</label><div class="col-md-4"><input id="comments' + x + '" name="comment[]" type="text" placeholder="" class="form-control input-md comment" style=""></div></div></center><img src="images/del24.png" ></a></div>'); //add input box\
}
});
$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault(); $(this).parent('div').remove(); x--;
})
$(wrapper_pre1).on("click",".remove_field_pre1", function(e){ //user click on remove text
e.preventDefault(); $(this).parent('div').remove(); x--;
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="col-md-8 col-sm-12 col-24">
<div class="input_fields" style="color:black">
<div>
<input type="text" name="mytextt[]" hidden="" ></div>
</div>
<button class="add_field btn " onclick="" >Add More</button>
</div>
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>
I want to click on my button and insert every click new input and when up to 10 just stop . I have done with one input lets check my code :
HTML code
<div class="form-group ">
<label for="email2" class="col-sm-3 control-label">Occupants Email Address :</label>
<div class="col-sm-3">
<input type="email" class="form-control" id="email2" placeholder="Email">
</div>
<div class="col-sm-2">
<span class="addMore">ADD</span>
</div>
</div>
<div class="form-group addmore2">
<label for="emailOccup2" class="col-sm-3 control-label">Occupants Email Address 2 :</label>
<div class="col-sm-3">
<input type="email" class="form-control" id="emailOccup2" placeholder="Email">
</div>
<div class="col-sm-2 removeEmail">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span> remove
</div>
CSS
.addmore2 {
display: none;
}
jQuery
$('.addMore').click(function() {
$('.addmore2').slideDown();
})
$('.removeEmail').click(function() {
$('.addmore2').slideUp();
});
I know how to insert just one , somebody help what function I need to use to make it uo to 10.
Thanks!
Check out the implementation below, which was heavily adapted from Add/Remove Input Fields Dynamically with jQuery.
Your goal here is to keep track of the number of fields that have been added. Once the number of fields (represented by x) exceeds ten, the append method will no longer function.
On each click, we are incrementing the number of fields by one.
$(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; //initial 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>Occupants Email Address :</label><div class="col-sm-3"><input type="text" name="mytext[]"/></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--;
})
});
Here's the corresponding HTML
<div class="input_fields_wrap">
<button class="add_field_button">Add More Fields</button>
<div class="form-group"><label>Occupants Email Address :</label><div class="col-sm-3"><input type="text" name="mytext[]"/></div>
</div>
Here's a working jsFiddle: jsFiddle
here is a basic example
var iteration = 0,
addEmail = document.querySelector("#addEmail");
addEmail.addEventListener("click", function(){
if(iteration < 10){
var input =document.createElement("input");
input.type = "email";
input.placeholder = "Email"
document.body.appendChild(input);
iteration++
}
},false);
<input id=addEmail type=button value="add Email input" />
Using jquery you could do something like
var iteration = 0;
$("#addEmail").click(function() {
if (iteration < 10) {
var input = document.createElement("input");
input.type = "email";
input.placeholder = "Email"
document.body.appendChild(input);
iteration++
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id=addEmail type=button value="add Email input" />