There are two text boxes inline having a "+" sign adjacent to them. On clicking on the plus sign a new text box is added and it will have the "+" as well as "-" sign for adding and removing the text box respectively. I used this resource to implement my text boxes. Now, I want only 10 textboxes to be added for each of them. Means 10 textboxes for keyword[] and 10 textboxes for link_name[] as you can see in the name of the input tag. But with this code its not working.
If I keep on adding textboxes for keyword[], then 19 text boxes are added and then if I try to add a text box for link_name[] then it doesn't add a single text box and displays the maximum limit reached.
If addition is done vice versa, it works properly.
jQuery and HTML are shown below:
jQuery
$(document).ready(function() {
var id_1 = 2, max = 9, append_data;
/*TEXT BOXES FOR LINK NAMES*/
/*If add_1 icon was clicked*/
$("#add_1").live('click', function(){
if($("div[id^='txt_']").length <9){ //Don't add new text box if limit is reached
$(this).remove(); //remove add icon from the current text box
var append_data = '<div id="txt_'+id_1+'" class="txt_div" style="display:none;"><div class="left"><input type="text" id="input_'+id_2+'" name="link_name[]"/></div><div class="right"><img src="add.png" id="add_1"/> <img src="remove.png" id="remove_1"/></div></div>';
$("#textboxes_1").append(append_data); //append new text box in main div
$("#txt_"+id_1).effect("bounce", { times:3 }, 300); //display block appended text box with silde down
id_1++;
}
else{
alert("Maximum 10 textboxes are allowed");
}
})
$("#remove_1").live('click',function(){
var prev_obj = $(this).parents().eq(1).prev().attr('id'); //prev div id of this text_box
$(this).parents().eq(1).slideUp('medium', function() { $(this).remove(); //remove this text box with a slide up
if($("div[id^='txt_']").length >1){
append_data = '<img src = "remove.png" id = "remove_1"/>';
}
else{
append_data = '';
}
if($("#add_1").length< 1){
$("#"+prev_obj+" .right").html('<img src = "add.png" id = "add_1"/>'+append_data);
}
});
})
/*TEXT BOXES FOR KEYWORDS*/
/*If add_2 icon was clicked*/
var id_2 = 12, max = 19;
$("#add_2").live('click', function(){
if($("div[id^='txt_']").length <19){ //Don't add new text box if limit is reached
$(this).remove(); //remove add icon from the current text box
var append_data = '<div id="txt_'+id_2+'" class="txt_div" style="display:none;"><div class="left"><input type="text" id="input_'+id_2+'" name="keyword[]"/></div><div class="right"><img src="add.png" id="add_2"/> <img src="remove.png" id="remove_2"/></div></div>';
$("#textboxes_2").append(append_data); //append new text box in main div
$("#txt_"+id_2).effect("bounce", { times:3 }, 300); //display block appended text box with silde down
id_2++;
}
else{
alert("Maximum 10 textboxes are allowed");
}
})
$("#remove_2").live('click',function(){
var prev_obj = $(this).parents().eq(1).prev().attr('id'); //prev div id of this text_box
$(this).parents().eq(1).slideUp('medium', function() { $(this).remove(); //remove this text box with a slide up
if($("div[id^='txt_']").length >1){
append_data = '<img src = "remove.png" id = "remove_2"/>';
}
else{
append_data = '';
}
if($("#add_2").length< 1){
$("#"+prev_obj+" .right").html('<img src = "add.png" id = "add_2"/>'+append_data);
}
});
})
});
HTML
<div id="textboxes_1" class="inline">
<div id="text_1" class="text_div">
<div class="left">
<input type="text" id="input_1" value="Enter URL(s) here" name="link_name[]" />
</div>
<div class="right">
<img src="add.png" id="add_1" />
</div>
</div>
</div>
<div id="textboxes_2" class="inline">
<div id="text_11" class="text_div">
<div class="left">
<input type="text" id="input_11" value="Enter Keyword(s) here" name="keyword[]" />
</div>
<div class="right">
<img src="add.png" id="add_2" />
</div>
</div>
</div>
<div style="clear:left;"></div>
<input type="submit" id="submit" name="submit" value="SUBMIT">
OK, so answer is simple You have made a few logical mistakes, below is Your code with some fixes described in comments:
$(document).ready(function() {
var id_1 = 2, max = 9, append_data;
/*TEXT BOXES FOR LINK NAMES*/
/*If add_1 icon was clicked*/
$("#add_1").live('click', function(){
if($("#textboxes_1 input").length <10){ //Don't add new text box if limit is reached
// Here You have to check #textboxes_1 for his own input's, and You have to give 10 not 9, becouse lenght is allways actual number of elements
$(this).remove(); //remove add icon from the current text box
var append_data = '<div id="txt_'+id_1+'" class="txt_div"><div class="left"><input type="text" id="input_'+id_1+'" name="link_name[]"/></div><div class="right"><img src="add.png" id="add_1"/> <img src="remove.png" id="remove_1"/></div></div>';
// in the code abowe You give id="input_'+id_2+'", I belive it should be id="input_'+id_1+'"
$("#textboxes_1").append(append_data); //append new text box in main div
$("#txt_"+id_1).effect("bounce", { times:3 }, 300); //display block appended text box with silde down
id_1++;
}
else{
alert("Maximum 10 textboxes are allowed");
}
})
$("#remove_1").live('click',function(){
var prev_obj = $(this).parents().eq(1).prev().attr('id'); //prev div id of this text_box
$(this).parents().eq(1).slideUp('medium', function() { $(this).remove(); //remove this text box with a slide up
if($("div[id^='txt_']").length >1){
append_data = '<img src = "remove.png" id = "remove_1"/>';
}
else{
append_data = '';
}
if($("#add_1").length< 1){
$("#"+prev_obj+" .right").html('<img src = "add.png" id = "add_1"/>'+append_data);
}
});
})
/*TEXT BOXES FOR KEYWORDS*/
/*If add_2 icon was clicked*/
var id_2 = 12, max = 19;
$("#add_2").live('click', function(){
if($("#textboxes_2 input").length <20){ //Don't add new text box if limit is reached
// The same issue was here as well
$(this).remove(); //remove add icon from the current text box
var append_data = '<div id="txt_'+id_2+'" class="txt_div" ><div class="left"><input type="text" id="input_'+id_2+'" name="keyword[]"/></div><div class="right"><img src="add.png" id="add_2"/> <img src="remove.png" id="remove_2"/></div></div>';
$("#textboxes_2").append(append_data); //append new text box in main div
$("#txt_"+id_2).effect("bounce", { times:3 }, 300); //display block appended text box with silde down
id_2++;
}
else{
alert("Maximum 10 textboxes are allowed");
}
})
$("#remove_2").live('click',function(){
var prev_obj = $(this).parents().eq(1).prev().attr('id'); //prev div id of this text_box
$(this).parents().eq(1).slideUp('medium', function() { $(this).remove(); //remove this text box with a slide up
if($("div[id^='txt_']").length >1){
append_data = '<img src = "remove.png" id = "remove_2"/>';
}
else{
append_data = '';
}
if($("#add_2").length< 1){
$("#"+prev_obj+" .right").html('<img src = "add.png" id = "add_2"/>'+append_data);
}
});
})
});