Javascript 在 django 表单集中添加/删除表单答案

【问题标题】：Javascript to add/delete a form in a django formsetJavascript 在 django 表单集中添加/删除表单
【发布时间】：2015-03-30 21:30:37
【问题描述】：

离开@Paolo Bergantino 对this previous SO question 的回答，我一直在尝试将表单动态添加到我的表单集中。但是，新添加的表单似乎以某种方式与前一个表单“链接”。因此，单击新表单上的复选框会影响旧表单。此外，一旦我提交，帖子中只会显示一个表单。所有其他新添加的都发生了什么？

addAnother.js

function cloneMore(selector, type) {
    var newElement = $(selector).clone(true);
    var total = $('#id_' + type + '-TOTAL_FORMS').val();
    newElement.find(':input').each(function() {
        var name = $(this).attr('name').replace('-' + (total-1) + '-','-' + total + '-');
        var id = 'id_' + name;

        if ($(this).attr('type') != 'hidden') {
            $(this).val('');
        }
        $(this).attr({'name': name, 'id': id}).removeAttr('checked');
    });
    newElement.find('label').each(function() {
        var newFor = $(this).attr('for').replace('-' + (total-1) + '-','-' + total + '-');
        $(this).attr('for', newFor);
    });
    total++;
    $('#id_' + type + '-TOTAL_FORMS').val(total);
    $(selector).after(newElement);
}

模板.html

{% load crispy_forms_tags %}
<script src="{{ STATIC_URL }}js/addAnother.js" type="text/javascript"></script>
<form action="{% url 'databank:register' %}" method="post" enctype="multipart/form-data">

<div class="container">
    <div class="row" style="margin-top: 30px"> 
      <div class="col-md-10 col-md-offset-1">
        {{ dataset_form.media }}
        {% crispy dataset_form %}
        {% crispy facility_form %}
        {% crispy contact_form %}

        {{ author_formset.management_form }}
        {% for form in author_formset.forms %}
        <div class='table'>
          <table class='no_error'>
          {{ form.as_table }}
          </table>
        </div>
        {% endfor %}
        <input type="button" value="Add More" id="add_more">

        {% crispy terms_form %}

      </div>
    </div>
  </div>

  <div class="container">
    <div class="row">
      <div class="col-md-10 col-md-offset-1">
        <a role="button" class="btn btn-lg btn-default" href="{% url 'databank:databank_home' %}">Cancel</a>
        <input type="submit" class="btn btn-lg btn-success pull-right" value="Proceed to Data Upload">
      </div>
    </div>
  </div>
</form>



<script type="text/javascript">
    $('#add_more').click(function() {
        cloneMore('div.table:last', 'service');
    });

【问题讨论】：

标签： javascript ajax django django-forms

【解决方案1】：

感谢 django-users 组中的 Bill，我能够使用 django-dynamic-formset 来完成这项工作

【讨论】：