因此如何显示 div 表单列表 javascript

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 [空的] 1 2 3

而不是

1 2 3 4 5

我试图以某种方式使用style "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?表单操作中的代码。

Answer 2

好的，我在这里遇到了几个问题。一个是数字显示不正确，另一个是我不想在不单击按钮 [+] 的情况下显示我的表单。所以我决定将我的 html 代码块保留在 javascript 中。我不知道如何使用该代码将其附加到 html 代码，因为 appendchild 函数需要节点作为参数而不是字符串。为了解决这个问题，我找到了这个stackoverflow question。

剩下的就是我的解决方案代码：

{% load staticfiles %}
<link rel="stylesheet" type="text/css" href="{% static 'Vote/style.css' %}" />
<fieldset id="fieldset">
    <form method = 'POST' action = ''>{%csrf_token %}
        <p>{{ voteTypeForm }}</p>
        <div id="placeholder">

        </div>
        <p>
            <button type="button" name="Submit" onclick="Add();">+</button>
        </p>
        <input type = 'submit' value="create"/>
    </form>
</fieldset>
<script type='text/javascript'>
{#    document.write(code);#}
    var _counter = 0;
    var template = document.createTextNode('');
    function appendStringAsNodes(element, html)
    {
        var frag = document.createDocumentFragment(),
            tmp = document.createElement('body'), child;
        tmp.innerHTML = html;
        // Append elements in a loop to a DocumentFragment, so that the browser does
        // not re-render the document for each node
        while (child = tmp.firstChild) {
            frag.appendChild(child);
        }
        element.appendChild(frag); // Now, append all elements at once
        frag = tmp = null;
    }
    function Add() {
        var code = '<div id="template">' +
                '<p>' +
                    '<fieldset id="fieldsets">' +
                        '<legend id="legends">Candidate No ['+ String(_counter+1) +']</legend>' +
                       ' <form method = "POST" action = "">'+
                              '<input type="hidden" name="csrfmiddlewaretoken" value="{{csrf_token }}" />' +
                            '<p><label for="id_name">Name:</label> <input id="id_name" maxlength="50" name="name" type="text" /></p>'+
                            '<p><label for="id_image">Image:</label> <input id="id_image" name="image" type="file" /></p>'+
                        '</form>' +
                   ' </fieldset>' +
                '</p>' +
            '</div>';
        _counter++;
        appendStringAsNodes(document.getElementById("placeholder"),code);
        document.getElementById("someInput").value = _counter;
    }
</script>