使用Javascript通过一个按钮提交重复的表单

我有一个表单，它可以复制一个按钮点击添加更多。但是我面临一个问题，一次提交所有的表格。我正在使用Django和Javascript。 我怎样才能修好它

{% extends "base.html" %}
{% load crispy_forms_tags %}

{% block content %}
<div id="content" class="span9">
    {% if form.errors %}
    <div class="alert alert-error">
        <h4>{{ form.errors }}</h4>
    </div>
    {% endif %}
    <div id = "duplicater" class="span9">
        <h1>Add new Profile</h1>   
         <button id="button" class="btn btn-success" onlick="duplicate()">Add more</button> 
    <hr/>

    <form class="form-horizontal ajax" action="{% url 'create_profile' %}" method="post">{% csrf_token %}
    {{ form|crispy}}

        <div class="form-actions">
            <a class="btn ajax" data-spinner="off" href="{% url 'home' %}">Cancel</a>
            <input class="btn btn-primary" type="submit" value="Save"/>
             <hr/>
        </div>
        </form>
    </div>
    </div>

<script type="text/javascript">  
    document.getElementById('button').onclick = duplicate;
    var i = 0;
    var original = document.getElementById('duplicater');

    function duplicate() {
    var clone = original.cloneNode(true); // "deep" clone
    clone.id = "duplicater" + ++i; // there can only be one element with an ID
    original.parentNode.appendChild(clone);
    }
</script>
{% endblock %}

{%extends“base.html”%}
{%load crispy_forms_tags%}
{%block content%}
{%if form.errors%}
{{form.errors}}
{%endif%}
添加新配置文件
添加更多

{%csrf_令牌%}
{{form | crispy}}

document.getElementById（'button'）。onclick=duplicate；
var i=0；
var original=document.getElementById（'duplicater'）；
函数复制（）{
var clone=original.cloneNode（true）；/“deep”clone
clone.id=“duplicater”++i；//只能有一个id为的元素
original.parentNode.appendChild（克隆）；
}
{%endblock%}

您应该将它们全部放在模板中相同的

元素中

---

也就是说，与其命名整个表单

duplicater

并复制它，不如将

{{form | crispy}}

变量包装在名为

duplicater

的div中，并在单个

元素的末尾附加副本。

您看过表单集吗？我已经编辑了代码，但是如果我有一个名为“duplicater”的div，提交按钮也会被复制，我可以只提交一个表单。不，现在你已经将duplicater完全放在表单之外了。我根本不是这么说的。把它放在一个新的div中，只放在crispy模板标签的周围。是的，谢谢，它可以工作！！我累坏了，所以我一开始没看到。