I’m trying to add select2 for a dynamic form which is a modelformset_factory
, but it doesnt work as i expect, it only works after the first add new row button! and after the third forms it create an extra drop down field!
here is what im tried
const addNewRow = document.getElementById('add-more-invoice')
const totalNewForms = document.getElementById('id_imei-TOTAL_FORMS')
addNewRow.addEventListener('click',add_new_row);
function add_new_row(e){
if(e){
e.preventDefault();
}
const currentFormClass = document.getElementsByClassName('child_imeiforms_row')
const countForms = currentFormClass.length
const formCopyTarget = document.getElementById('form-imeilists')
const empty_form = document.getElementById('empty-imei-invoiceform').cloneNode(true);
empty_form.setAttribute('class','child_imeiforms_row')
empty_form.setAttribute('id',`form-${countForms}`)
const rgx = new RegExp('__prefix__','g')
empty_form.innerHTML = empty_form.innerHTML.replace(rgx,countForms)
totalNewForms.setAttribute('value',countForms + 1)
formCopyTarget.append(empty_form)
$('.choose').select2();
}
$('.choose').select2();
<form action="" method="POST" id="create-permcustomer-invoice">{% csrf_token %}
<div class="row">
<div class="col-md-6">
<div class="form-group">
<i class="fas fa-file-signature"></i>
<label>customer name</label>
{{ main_form.customer | add_class:'form-control' | append_attr:'onchange:currentBalance();' }}
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<i class="fas fa-box-usd"></i>
<label>balance</label>
<input type="number" disabled class="form-control" id="balance_cus">
</div>
<!-- /.form-group -->
</div>
<!-- /.col -->
<div class="col-md-4 pull-right">
<div class="form-group">
<i class="far fa-clock"></i>
<label>date</label>
{{main_form.created | add_class:'form-control text-center'}}
</div>
</div>
</div>
{{imei_forms.management_form}}
<div id="form-imeilists">
{% for imei in imei_forms %}
{{imei.id}}
<div class="child_imeiforms_row">
<div class="row no-gutters table-bordered">
<div class="col-md-3">
<div class="form-group">
{{imei.item | add_class:'form-control choose' | append_attr:'onchange:imeiPlusInfo();'}}
<div class="text-danger text-center" hidden></div>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
{{imei.price | add_class:'price'}}
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<input step="any" type="number" onkeyup="totalSum()" class="form-control loan" disabled placeholder="loan">
</div>
</div>
</div>
</div>
{% endfor %}
</div>
<div id="empty-imei-invoiceform" class="hidden">
<div class="row no-gutters table-bordered">
<div class="col-md-3">
<div class="form-group">
{{imei_forms.empty_form.item | add_class:'form-control choose' | append_attr:'onchange:imeiInfo();'}}
<div class="text-danger text-center" hidden></div>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
{{imei_forms.empty_form.price | add_class:'price'}}
<div class="text-danger text-center" hidden></div>
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<input step="any" type="number" onkeyup="totalSum()" class="form-control loan" disabled placeholder="loan">
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-lg btn-info" id="add-more-invoice">add new row</button>
<div class="card-footer">
<div class="row justify-content-center">
<button type="submit" class="btn btn-lg btn-success">save</button>
</div>
</div>
</form>
but doesnt work as i expected ! is there any solution please ?thank you in advance ..