0

每当我单击按钮“”时，我都有以下 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是一个单选按钮，当我添加一个新行时：

在此处输入图像描述

四个单选按钮中只有一个单选被选中。这意味着这两行是相互依赖的。那么当我需要它们完全独立时，使我的表单相互依赖的问题是什么。

请提供任何帮助。我真的卡在这里，非常感谢。

4

1 回答 1

0

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

Django 已经可以通过formsets处理页面中的多个表单。

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

于 2018-04-09T16:14:42.267 回答