Django＆js：我的表单集表单相互依赖

Question

我有以下js，每当我单击按钮“”时，这些表单就会将表单添加到模板中

function updateElementIndex(el, prefix, ndx) {
    var id_regex = new RegExp('(' + prefix + '-\\d+)');
    var replacement = prefix + '-' + ndx;
    if ($(el).attr("for")) $(el).attr("for", $(el).attr("for").replace(id_regex, replacement));
    if (el.id) el.id = el.id.replace(id_regex, replacement);
    if (el.name) el.name = el.name.replace(id_regex, replacement);
}

function addForm(btn, prefix) {
    var formCount = parseInt($('#id_' + prefix + '-TOTAL_FORMS').val());
    var row = $('.dynamic-form:first').clone(true).get(0);
    $(row).removeAttr('id').insertAfter($('.dynamic-form:last')).children('.hidden').removeClass('hidden');
    $(row).children().not(':last').children().each(function() {
        updateElementIndex(this, prefix, formCount);
        $(this).val('');
    });
    $('#id_' + prefix + '-TOTAL_FORMS').val(formCount + 1);
    return false;
}

我在标题中将此脚本称为：

$(function () {
    $('#add-row').click(function() {
        return addForm(this, 'form');
       //$('.add-row').hide();
    });
})

这是我的模板：

<form action="/caisse"  method="POST" enctype="multipart/form-data" id="personForm" data-tiers-url="{% url 'ajax_load_tiers' %}" >{% csrf_token %}{{ form.non_field_errors }}  

<table align="center">  <!--    <div class="row" style="padding-left:  24%; padding-top: 3%"></div> -->
    <tr>    
        <td width="10%"></td>
        <td><input id="uploadFile" placeholder="Choose File" class="form-control" /></td>
        <td><div class="btn btn-primary" id="divInput"><span>importer</span>
            {% render_field form1.myfile id="uploadBtn"  style=" position: absolute;top: 0;right: 0;margin: 0; padding: 0;font-size: 20px;cursor: pointer;opacity: 0;filter: alpha(opacity=0);"  %}
        </div></td>
    </tr>

</table>

 <table style ="border-collapse: separate;border-spacing: 15px;" id="id_forms_table">
        {% for form in formset %}
     <tr style="border:1px solid black;" id="{{ form.prefix }}-row" class="dynamic-form" >

        <td><div class="col-xs-1"><b><p name="np1">1</p></b></div></td>
        <td >
            {% render_field form.dateOperation class="form-control"  %}{{form.dateOperation1.errors}}

        </td>
        <td>{% render_field form.designation  class="form-control"  %}{{form.errors}}
        </td>
        <td>
            {% render_field form.typeTiers class="form-control" %}{{form.typeTiers.errors}}
        </td>
        <td>
            {% render_field form.tiers class="form-control" %}{{form.tiers.errors}}
        </td>
        <td>{% render_field form.numfacture class="form-control"   %}{{form.numfacture.errors}}
        </td>
        <td>{% render_field form.montant class="form-control"  %}{{form.montantdebit.errors}}
        </td>
        <td>{% render_field form.typeMontant   %}{{form.typeMontant.errors}}
        </td>   
     </tr>
 {% endfor %}
  </table>{{ formset.management_form }}
    <tr><td><input type="submit" name="ajoutligne" value="Ajouter une ligne" class="btn btn-primary" id="add-row" style="background-color: #8C1944; border-color: #8C1944; float:right;margin: 5px;" onclick=""></td></tr>

按钮Ajouter une ligne是在js上调用的按钮，用于添加表单集的新行。 我的问题是我的表格不是独立的。 例如，当我在波纹管中添加新行时，最后一个字段typeMontant是单选按钮：

在四个单选按钮中仅选择了一个。 这意味着这两行相互依赖。 那么，当我需要表单彼此完全独立时，使我的表单依赖的问题是什么？

请任何帮助。 我真的很困在这里，非常感谢。

Answer 1

这是因为表单字段的名称和ID可能相同，因为您要一遍又一遍地添加相同的表单，并且所有单选按钮都引用相同的name 。

Django的可通过已处理的页面多种形式表单集 。

我找到了一个教程，该教程对我自己的项目有很大帮助，以帮助我理解和实现它： http : //whoisnicoleharris.com/2015/01/06/implementing-django-formsets.html