I have seen similar questions with answers here but nothing could fix my issue. So i am asking it here again.
With jquery i want users to add input field five times only , i used .append which is working fine but its adding unlimited times.
$("#add-cert").click(function(){
var $addinput = $("<div class='row'><div class='small-6 columns'><label class='right inline'>Enter Your Certificate</label></div><div class='small-6 columns'><input type='text'></div></div>");
$("i").append($addinput);
});
Please provide fix , i am new to jquery. I have tried following code too but with this code .append stops working:
$("#add-cert").click(function(){
var $addinput = $("<div class='row'><div class='small-6 columns'><label class='right inline'>Enter Your Certificate</label></div><div class='small-6 columns'><input type='text' name='manual-cert'></div></div>");
var num = $("input[name='manual-cert']").length;
if(num > 5){
$("i").append($addinput);
}
});
Something like this?
var maxAppend = 0;
$("#add-cert").click(function(){
if (maxAppend >= 5) return;
var addinput = $(
"<div class='row'><div class='small-6 columns'>"+
"<label class='right inline'>Enter Your Certificate</label></div>"+
"<div class='small-6 columns'><input type='text'></div></div>");
maxAppend++;
$("i").append(addinput);
});
Well a new idea to manage this is just remove the click handler after appending 5 elements.
var count = 1;
$("#add-cert").click(function(){
if(count < 5) {
var $addinput = $("<div class='row'><div class='small-6 columns'><label class='right inline'>Enter Your Certificate</label></div><div class='small-6 columns'><input type='text'></div></div>");
$("i").append($addinput);
count++;
}
else{
$("#add-cert").off("click"); //remove click listener.
}
});
var count = 0;
$("#add-cert").click(function(){
if(count < 5) {
var $addinput = $("<div class='row'><div class='small-6 columns'><label class='right inline'>Enter Your Certificate</label></div><div class='small-6 columns'><input type='text'></div></div>");
$("i").append($addinput);
count++;
}
});
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.