Search code examples
javascriptdjangoformsets

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

I have the following js that adds forms to my template whenever I click on the button ""

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

I call this script in my header :

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

and this is my template : 

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

The button Ajouter une ligne is the one called on the js to add a new row of my formset. My problem here is that my forms are not independent. for example the the last field typeMontant is a Radio button, when I add a new row as bellow :

enter image description here

Only One radio of the four radio buttons got selected. which means that the two rows are dependent on each other. So what's the problem that makes my forms dependent when I need them to be totally independent of each other.

any help please. I'm really stucking here, Thank You so much.

Solution

  • That is because the names and the ids of the form fields are the probably the same, since you are adding the same form over and over again, and all your radio buttons reference to the same name.

    Django can already handle multiple forms in a page via formsets.

    I found a tutorial that helped me a lot to understand and implement it on my own project: http://whoisnicoleharris.com/2015/01/06/implementing-django-formsets.html