jQuery add more input maxLimit not work

Question

I have this Code for add more input using jQuery:

JS:

$(document).ready(function () {

    var MaxInputs = 8; //maximum input boxes allowed
    var InputsWrapper = $("#InputsWrapper"); //Input boxes wrapper ID
    var AddButton = $("#AddMoreFileBox"); //Add button ID

    var x = InputsWrapper.length; //initlal text box count
    var FieldCount = 1; //to keep track of text box added

    $(AddButton).click(function (e) //on add input button click
    {
        if (x <= MaxInputs) //max input box allowed
        {
            FieldCount++; //text box added increment
            //add input box
            $(InputsWrapper).append('<div><input type="text" name="mytext[]" id="field" value="Text ' + FieldCount + '"/><input type="text" name="mytext1[]" id="field" value="Text ' + FieldCount + '"/><a href="#" class="removeclass">&times;</a></div>');
            x++; //text box increment
        }
        return false;
    });

    $("body").on("click", ".removeclass", function (e) { //user click on remove text
        if (x > 1) {
            $(this).parent('div').remove(); //remove text box
            x--; //decrement textbox
        }
        return false;
    })

});

HTML:

<a href="#" id="AddMoreFileBox" class="btn btn-info">Add More Field</a>

<div id="InputsWrapper">
        <div>
        <input type="text" name="mytext1[]" id="field" value="Text 1"><a href="#" class="removeclass">&times;</a>
        </div>
        <div>
        <input type="text" name="mytext1[]" id="field" value="Text 1"><a href="#" class="removeclass">&times;</a>
        </div>

</div>

in default i add two input and set 8 input for MaxInput ans set 1 for keep input.

Now, I have Two Problem:

1- i cant remove One of these two default input.

2- Maxinput not work with +1 default input. my mean when we set 1 keep input, if add One default Max input This not work and add 8 input + 1 defualt + 1 keep input. with this we have 10 input. this is false. we need to add 9 input.

How do can can i fix this problems?

Live Demo : http://jsfiddle.net/5UCex/1/

Answer 1

Working Fiddle

1. Correct selector to calculate length - $("#InputsWrapper input");.

2. var AddButton = "#AddMoreFileBox"; and not var AddButton = $("#AddMoreFileBox");

3. You have to check length of input inside every Add event.

4. To have Atmost 8 inputs - if (x < MaxInputs) instead of if (x <= MaxInputs)

---

$(document).ready(function () {

    var MaxInputs = 8; //maximum input boxes allowed
    var InputsWrapper = $("#InputsWrapper input"); //Input boxes wrapper ID
    var AddButton = "#AddMoreFileBox"; //Add button ID

    var x = InputsWrapper.length; //initlal text box count
    var FieldCount = 1; //to keep track of text box added

    $(AddButton).click(function (e) //on add input button click
    {
        e.preventDefault();
        InputsWrapper = $("#InputsWrapper input");
        x = InputsWrapper.length;
        if (x < MaxInputs) //max input box allowed
        {
            FieldCount++; //text box added increment
            //add input box
            $(InputsWrapper).parents('#InputsWrapper').append('<div><input type="text" name="mytext1[]" id="field" value="Text ' + FieldCount + '"/><a href="#" class="removeclass">&times;</a></div>');
            x++; //text box increment
        }
        return false;
    });

    $("body").on("click", ".removeclass", function (e) { //user click on remove text

        if (x > 1) {
            $(this).parent('div').remove(); //remove text box
            x--; //decrement textbox
        }
        return false;
    })

});

Answer 2

working code

$(document).ready(function () {

    var MaxInputs = 8; //maximum input boxes allowed
    var InputsWrapper = $("#InputsWrapper"); //Input boxes wrapper ID
    var AddButton = $("#AddMoreFileBox"); //Add button ID

    var x = InputsWrapper.find('div').length; //initlal text box count
    var FieldCount = 1; //to keep track of text box added

    $(AddButton).click(function (e) //on add input button click
    {
        if (x < MaxInputs) //max input box allowed
        {
            FieldCount++; //text box added increment
            //add input box
            $(InputsWrapper).append('<div><input type="text" name="mytext1[]" id="field" value="Text ' + FieldCount + '"/><a href="#" class="removeclass">&times;</a></div>');
            x++; //text box increment
        }
        return false;
    });

    $("body").on("click", ".removeclass", function (e) { //user click on remove text
        if (x >= 1) {
            $(this).parent('div').remove(); //remove text box
            x--; //decrement textbox
        }
        return false;
    })

});

changed lines:

var x = InputsWrapper.find('div').length; //initlal text box count

and here

    $("body").on("click", ".removeclass", function (e) { //user click on remove text
        if (x >= 1) {
            $(this).parent('div').remove(); //remove text box
            x--; //decrement textbox
        }
        return false;
    })

Answer 3

also got a working fiddle :

http://jsfiddle.net/5UCex/8/

$(document).ready(function () {

    var MaxInputs = 8; //maximum input boxes allowed
    var InputsWrapper = $("#InputsWrapper"); //Input boxes wrapper ID
    var AddButton = $("#AddMoreFileBox"); //Add button ID

    var x = InputsWrapper.length +1; //initlal text box count
    var FieldCount = 2; //to keep track of text box added

    AddButton.click(function (e) //on add input button click
    {
        if (x <= MaxInputs) //max input box allowed
        {
            FieldCount++; //text box added increment
            //add input box
            InputsWrapper.append('<div><input type="text" name="mytext1[]" id="field" value="Text ' + FieldCount + '"/><a href="#" class="removeclass">&times;</a></div>');
            x++; //text box increment
        }
        return false;
    });

    $("body").on("click", ".removeclass", function (e) { //user click on remove text
        if (x > 0) {
            $(this).parent('div').remove(); //remove text box
            FieldCount --; //decrement FieldCount
            x--; //decrement textbox
        }
        return false;
    })

});

main changes were :

-decrement fieldCount when removing

-Set initial FieldCount to correct amount of initial fields

-Fixed issue with zeroBasedIndex