1

  • 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.

  • Also another issue is that the bounce effect is not working. Not much familiar with effects so not able to find the reason why it isn't working.

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">
Improve this question
4
  • for the bounce effect you'll need gsgd.co.uk/sandbox/jquery/easing Commented Feb 18, 2013 at 6:15
  • @JonathandeM. I've used jquery-ui.min.js for it. And it provides bounce effect. But in my code its not rendering the effect. I've linked a resource in the question and the effect works in the demo they have shown. Commented Feb 18, 2013 at 6:20
  • Can You give us jsfiddle.net link including CSS, and images pathes to Your serwer, or at least: .right img{background: red; width: 30px !important; height: 30px !important;} Commented Feb 18, 2013 at 8:03
  • @bumerang I am using localhost. If you want the css here it is -> pastebin.com/wsDvgcCX You can get the two images from the resource I mentioned in the question. Commented Feb 18, 2013 at 8:34

1 Answer 1

Reset to default
2

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);
    }
    });
})

});

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

I've also remove the code style="display:none" to see results.
In the text boxes for keyword the length should be 10. Keeping it 20 adds 20 records ! Also I had some issues while removing text boxes. But changing the selectors as you have mentioned solved the issue. And check the demo of the resource I've mentioned. The bounce effect that occurs on clicking + sign is not happening in my case. Also the spacing between text boxes is not like the way it is in the demo. And this is how my text boxes appear
@SilentAssassin - In the text boxes for keyword the length should be 10. Keeping it 20 adds 20 records ! - Yes but it's Your Code, and for those gaps, it's becouse of class that You append to those new elements, You give them txt_div, class but You should give text_div,like the first one have
Yes the bounce effect is also happening now. There were some naming inconsistencies.
So I am glad that I could help :)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.