jQuery添加更多输入maxLimit不起作用

jQuery add more input maxLimit not work

本文关键字：maxLimit 不起作用 输入 添加 jQuery      更新时间：2023-09-26

我有这个代码添加更多的输入使用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>

默认添加两个输入，MaxInput设置为8输入，keep输入设置为1。

现在我有两个问题:

1-我不能删除这两个默认输入中的一个。

2- Maxinput不适用于+1 default input。我的意思是当我们设置1保持输入，如果添加一个默认的最大输入，这不起作用，添加8 input + 1 defualt + 1 keep input。这个我们有10 input。这是错误的。我们需要添加9 input。

我怎样才能解决这个问题?

现场演示:http://jsfiddle.net/5UCex/1/

工作小提琴

  1. 正确的选择器计算长度- $("#InputsWrapper input"); .

  2. var AddButton = "#AddMoreFileBox";而非var AddButton = $("#AddMoreFileBox");

  3. 你必须检查每一个添加事件的输入长度

  4. 有最多8个输入- if (x < MaxInputs)而不是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;
    })
});

也得到了一个工作小提琴:

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

主要变化如下:

-删除

时减少fieldCount

-设置initial FieldCount以纠正初始字段的数量

-修复zeroBasedIndex

工作代码

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

改变:

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

和

    $("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;
    })
相关文章：