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;
}

我在 header 中调用这个脚本：

$(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 已经可以通过 formsets.

在一个页面中处理多个表单

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

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

Django & js : My formset forms are dependent on each other

javascript

django

formsets