Ограничьте количество детей в форме, используя Javascript

Question

Я пытаюсь ограничить количество дополнительных полей ввода формы, которые пользователь может динамически добавить в форму загрузки файла, до трех. Форма загружается одним статическим полем ввода, а через javascript можно добавлять дополнительные поля кнопкой добавления. или удалите дополнительные поля ввода формы с помощью кнопки удаления. Ниже HTML в его статической форме.

<fieldset>
        <legend>Upload your images</legend>
          <ol id="add_images">
            <li>
              <input type="file" class="input" name="files[]" />
            </li>
          </ol>
         <input type="button" name="addFile"  id="addFile" value="Add Another Image" onclick="window.addFile(this);"/>
</fieldset>

С помощью javascript я хотел бы создать функцию, в которой подсчитывается количество дочерних

элементов, а если число равно трем, кнопка «Добавить другое изображение» становится недоступной. Кроме того, если в форме есть три элемента , то пользователь - с помощью кнопки удаления - удаляет дочерний элемент , после чего кнопка «Добавить другое изображение» снова становится активной.

Думаю, мне не хватает некоторых важных строк кода. Приведенный ниже код JavaScript позволяет мне добавить только одно дополнительное поле ввода, прежде чем кнопка «Добавить другое изображение» станет недоступной. При удалении этого поля кнопкой удаления файла поле удаляется, но кнопка «Добавить другое изображение» по-прежнему отключена. Ниже я сейчас с javascript.

function addFile(addFileButton) {
    var form = document.getElementById('add_images');
    var li = form.appendChild(document.createElement("li"));

    //add additional input fields should the user want to upload additional images.    
    var f = li.appendChild(document.createElement("input"));
    f.className="input";
    f.type="file";
    f.name="files[]";

    //add a remove field button should the user want to remove a file
    var rb = li.appendChild(document.createElement("input"));
    rb.type="button";
    rb.value="Remove File";
    rb.onclick = function () {
        form.removeChild(this.parentNode);
    }
    //create the option to dispable the addFileButton if the child nodes total "3"
    var nodelist;
    var count;
    nodelist = form.childNodes;
    count = nodelist.length;

    for(i = 0; i < count; i++) {

    if (nodelist[i] ==3) {
        document.getElementById("addFile").disabled = 'true';
    }    
    else { //if there are less than three keep the button enabled
        document.getElementById("addFile").disabled = 'false';  
    }
}

}

Answer 1

О, хорошо, я сейчас проверил код и вижу пару проблем:

1. Вы подсчитываете количество дочерних элементов, но это включает текстовые элементы, поэтому на самом деле есть один для <li> и один для текста внутри него.
2. Вы заключили значение true / false для свойства disabled в кавычки, но оно не работает, и для него всегда установлено значение false.
3. Кнопка удаления не включает кнопку добавления.

Я нашел это на работу:

    function addFile(addFileButton) {
        var form = document.getElementById('add_images');
        var li = form.appendChild(document.createElement("li"));

        //add additional input fields should the user want to upload additional images.
        var f = li.appendChild(document.createElement("input"));
        f.className="input";
        f.type="file";
        f.name="files[]";

        //add a remove field button should the user want to remove a file
        var rb = li.appendChild(document.createElement("input"));
        rb.type="button";
        rb.value="Remove File";
        rb.onclick = function () {
            form.removeChild(this.parentNode);
            toggleButton();
        }
        toggleButton();
    }

    function toggleButton() {
        var form = document.getElementById('add_images');
        //create the option to dispable the addFileButton if the child nodes total "3"
        var nodelist;
        var count;
        nodelist = form.childNodes;
        count = 0;


        for(i = 0; i < nodelist.length; i++) {
            if(nodelist[i].nodeType == 1) {
                count++;
            }
        }

        if (count >= 3) {
            document.getElementById("addFile").disabled = true;
        }
        else { //if there are less than three keep the button enabled
            document.getElementById("addFile").disabled = false;
        }
    }

Answer 2

Последняя часть этой функции немного странная. Технически, при добавлении полей, вы должны только отключить кнопку (то есть вы никогда не сможете включить кнопку, добавляя поля). Я бы предложил удалить цикл for и перейти к:

var count = form.getElementsByTagName("li").length;
if(count == 3)
    document.getElementById("addFile").disabled = true;

Причина, по которой кнопка добавления поля по-прежнему отключена при удалении элемента, заключается в том, что вы не включаете кнопку добавления поля повторно, когда нажимаете кнопку удаления. Попробуйте это для обработчика нажатия кнопки удаления:

rb.onclick = function () {
    form.removeChild(this.parentNode);
    document.getElementById("addFile").disabled = false;
}

Answer 3

Я не уверен, почему вы используете цикл for?Не должно ли быть так:

var nodelist = form.childNodes;

if (nodelist.length >= 3) {
    document.getElementById("addFile").disabled = 'true';
}    
else { //if there are less than three keep the button enabled
    document.getElementById("addFile").disabled = 'false';  
}

Answer 4

Я бы предложил немного другой подход.Создайте все три поля ввода файла статически и предоставьте кнопку очистки.Если пользователь решит оставить его пустым, он может.Если это не элегантно, используйте «Удалить», чтобы просто скрыть поле (CSS style display: none;).