使用JavaScript限制表单中的子代数

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

Answer 2

I would suggest a slightly different approach. Create all three file input fields statically and provide a clear button. If the user chooses to leave it empty they can. If that is not elegant use your "Remove" to simply hide the field (CSS style display: none;).

Answer 3

The last part of that function is a bit strange. Technically, when adding fields, you should only be disabling the button (ie you could never enable the button by adding fields). I would suggest removing the for loop and going with:

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

The reason the add field button is still disabled when you remove an item is because you don't re-enable the add field button when you click remove. Try this for the remove button click handler:

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

Answer 4

I'm not sure why you're using the for loop? Shouldn't it be like this:

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