Question

我正在尝试将用户可以动态添加到文件上传表单的其他表单输入字段的数量限制为3.表单加载了一个静态输入字段，并且通过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我想创建一个函数，其中计算子

元素的数量，如果数字等于3，则“添加另一个图像”按钮将被禁用。此外，如果表单中有三个

元素，则用户 - 使用删除按钮 - 删除子项

，然后再次启用“添加另一个图像”按钮。

我想我可能会错过一些重要的代码行。下面的javascript代码只允许我在Add Another Image按钮被禁用之前添加一个额外的输入字段。使用“删除文件”按钮删除此字段会删除该字段，但仍会禁用“添加另一个图像”按钮。以下是我目前使用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

哦，好的，我现在已经测试了代码并看到了一些问题：

您正在计算子元素的数量，但这包括文本元素，因此实际上有一个用于<li>，另一个用于其中的文本。
您已将禁用属性的true / false设置包含在引号中，但它不起作用并始终将其设置为false。
删除按钮不会重新启用添加按钮。

我发现这个有用：

    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

我建议采用略有不同的方法。静态创建所有三个文件输入字段并提供清除按钮。如果用户选择将其留空，他们可以。如果不优雅，请使用“删除”来隐藏字段（CSS样式显示：无;）。

Answer 3

该功能的最后一部分有点奇怪。从技术上讲，添加字段时，您应该只禁用该按钮（即您永远不能通过添加字段来启用该按钮）。我建议删除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 4

我不确定你为什么要使用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';  
}

使用Javascript限制表单中的子项数

4 个答案: