使用 Javascript 一键提交重复的表单

Question

我有一个表单，点击一个按钮就可以复制它，添加更多。但我面临一次提交所有表格的问题。我正在使用 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 %}

Answer 1

您应该将它们全部放在模板中的同一 <form> 元素中。

也就是说，与其将整个表单命名为 duplicater 并进行复制，不如将 {{ form|crispy }} 变量包装在一个名为 duplicater 的 div 中，并将副本附加到其末尾，在单个 <form> 元素内.