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/

Shaunak D · Accepted Answer · 2014-06-11 11:54:22Z

1

Working Fiddle

Correct selector to calculate length - $("#InputsWrapper input");.
var AddButton = "#AddMoreFileBox"; and not var AddButton = $("#AddMoreFileBox");
You have to check length of input inside every Add event.
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;
    })

});

edited Jun 11, 2014 at 11:54

answered Jun 11, 2014 at 11:48

Shaunak D

20.7k10 gold badges48 silver badges79 bronze badges

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

3 Comments

raskalbass Over a year ago

this one not allow to add more field when others completly deleted

user27133 Over a year ago

@shaunakde: this worked. But I add any class for remove div But your Code not worked. See Demo : jsfiddle.net/5UCex/13

Shaunak D Over a year ago

when you change a class , you have to change jQuery selector. Check this - Its working jsfiddle.net/5UCex/14

john Smith · Accepted Answer · 2014-06-11 11:50:22Z

1

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

answered Jun 11, 2014 at 11:50

john Smith

18k12 gold badges80 silver badges124 bronze badges

3 Comments

Ishan Jain Over a year ago

Please delete your old post :)

john Smith Over a year ago

@IshanJain if you tell me how to, i can just "undelete" but my new Answer works like a charme, doesnt it ?

user27133 Over a year ago

@johnSmith: your Code Worked But Not work to keep track of text box added.

Pvb · Accepted Answer · 2014-06-11 11:52:59Z

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

Collectives™ on Stack Overflow

jQuery add more input maxLimit not work

3 Answers 3

Working Fiddle

3 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related