Question

I am trying to limit the number of additional form input fields that a user can add dynamically to a file upload form to just 3. The form is loaded with one static input field and through javascript can add additional fields with an add button or remove additional form input fields with a remove button. Below is the html in it’s static form.

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

With javascript I would like to create a function where the number of child

elements are counted and if the number is equal to three then the “Add Another Image” button becomes disabled. In addition, if there are three

elements in the form the user – with the remove button – removes a child

then the “Add Another Image” button becomes enabled again.

I think I’m may be missing some crucial lines of code. The below javascript code only allows me to add one additional input field before the Add Another Image button becomes disabled. Removing this field with the remove file button removes the field but the Add Another Image button is still disabled. Below is where I’m currently at with the 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

Oh, OK, I’ve tested out the code now and see a couple of problems:

1. You’re counting the number of child elements but this includes the text elements so there’s actually one for the <li> and one for the text within it.
2. You’ve enclosed the true/false setting for the disabled property in quotes but it doesn’t work and always set’s it to false.
3. The remove button doesn’t re-enable the add button.

I found this to work:

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