javascript - 如何在javascript中显示div表单列表

Question

好的。所以我试图创建一个表单，以便当我单击“+”按钮时，一个新表单会出现在现有表单下方。例如我有表格要填写姓名

VoteType
name: [        ]
{+}  -- (button)

当点击“+”时表单将如下所示

VoteType
name: [        ]

Vote1 name [        ]
      image [        ]
      date [        ]

{+} -- (button)

还有“+”按钮，这样我就可以添加 Vote2 ...任意数量。

因此，当我尝试对它们进行编号时，我购买了此表格，但数字并未按我的预期进行。

<fieldset id="fieldset">
    <form method = 'POST' action = ''>{%csrf_token %}
        <p>{{ voteTypeForm }}</p>
    </form>

        <div id="placeholder">
            <div id="template">
                <p><fieldset id="fieldsets">
                    <legend id="legends">Candidate No <input type="text" id="someInput" name="someInput" readonly></input></legend>
                    <form method = 'POST' action = ''>{%csrf_token %}
                        {{ voteForm.as_p}}
                    </form>
                </fieldset></p>
            </div>
        </div>
        <p><button type="button" name="Submit" onclick="Add();">+</button></p>
    <input type = 'submit' value="create"/>
</fieldset>
<script>
    var _counter = 0;
    function Add() {
        _counter++;
        var oClone = document.getElementById("template").cloneNode(true);
        oClone.id += (_counter + "");
        document.getElementById("placeholder").appendChild(oClone);
        document.getElementById("someInput").value = _counter;
    }
</script>

当我单击按钮 + 时，它会创建表单，但对它们进行编号，如下所示:

4 [empty] 1 2 3

而不是

1 2 3 4 5

我试图以某种方式使用样式“none”隐藏占位符，但它没有显示任何一个，比我尝试仅在计数器大于1时激活它，但比它再次显示第一个。我通常不使用 javascript，所以请帮忙。我该如何解决这个问题？

Answer 1

关于隐藏模板，您可以使用visibility:hidden将节点保留在DOM中，以便您可以选择它们。或者，如果您可以使用该标签，请使用它。最后一种选择是在 JavaScript 中创建模板并将要克隆的节点保留在变量中，而不是将其保留在 DOM 中。

还没弄清楚为什么 id 计数器不能正常工作。

var tmp = document.createElement('div'),
    template;
tmp.innerHTML = '<div id="template"><p><fieldset id="fieldsets"><legend id="legends">Candidate No <input type="text" id="someInput" name="someInput" readonly></input></legend><form method = "POST" action = "">{%csrf_token %}{{ voteForm.as_p}}</form></fieldset></p></div>';
template = tmp.innerHTML;

这是我可以输入的最小方式。您可能需要更改 php 吗？ ASP？不过，表单操作中的代码。