My web is actually working but with any slight changes to the template, it stop working as intended just for the part that uses formset. Any slight change will cost my add button and minus button to not function as intended (adding more than 3, minus doesnt remove the rows but from the tools, it show it is pressed due to my console.log and this value can even go negative). Intended: Add to 3(max) . Can minus up to 3. And can add again to 3. Can anyone advise me on what is wrong here?
Script:
let changeFlag=0;
let maxrow = $('#id_form-MAX_NUM_FORMS').attr('value');
let totalForms = $('#id_form-TOTAL_FORMS').val();
// Show the total # of forms on run (default is 1)
console.log(totalForms);
$('#deleteConfirmation').modal('hide');
function portidChange(val) {
changeFlag = 1;
if (val =="")
changeFlag = 0;
}
$('#addrow').click(function () {
let totalForms = $('#id_form-TOTAL_FORMS').val();
console.log(totalForms)
// Upon clicking the + button, we want the - button to show up, so:
$('#empty-form #removerow').css('display','block');
// Upon clicking the + button, we want the empty form to be cloned (empty form is referring to the di_form.empty_form below).
// We use di_form.empty_form because it allows django to replace the prefix by itself & count the # of forms etc. needed for the management of data (needed for formsets)
let wholerowclone = $('#empty-form').clone();
// This line adds the empty form clone and replaces the prefix (__prefix__ in devtools if you check it) with the value of totalForm.
// Take note that the default value is 1, and it increases by 1 each click of the + button.
$('#morerows').append(wholerowclone.html().replace(/__prefix__/g, totalForms));
$('#id_form-TOTAL_FORMS').attr('value', (parseInt (totalForms))+1);
changeFlag=0;
if(totalForms==maxrow) {
$('#addrow').attr("disabled", true);
$('#addrow').attr("class","btn btn-rounded btn-danger");
$('#addrow i').attr("class","");
$('#addrow').html("Reached max limit");
}
})
$(document).on('click', '#removerow', function () {
let totalForms = $('#id_form-TOTAL_FORMS').val();
console.log(totalForms + " total forms");
let actualformcount = totalForms-2;
console.log(actualformcount + "actual form count");
console.log(maxrow + "max");
$('#id_form-TOTAL_FORMS').attr('value', (parseInt (totalForms))-1);
$(this).closest('#morerows .row').remove();
if(actualformcount<maxrow){
$('#addrow').attr("disabled", false)
$('#addrow').attr("class","btn btn-outline-success btn-rounded")
$('#addrow i').attr("class","dripicons-plus")
$('#addrow').html("+")
}
});
HTML:
{{di_form.management_form}}
<div id = "rowAddition">
{% for form in di_form %}
<div>
<div class="row">
<div class="col-md-2">
<div class="form-group">
<label for="{{di_form.moduletype.id_for_label}}">Module Type<span
class="text-danger">*</span></label>
{{form.moduletype}}
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="{{di_form.firstportid.id_for_label}}">First Port ID<span
class="text-danger">*</span></label>
{{form.firstportid}}
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="{{di_form.lastportid.id_for_label}}">Last Port ID <span
class="text-danger">*</span></label>
{{form.lastportid}}
</div>
</div>
</div>
</div>
{%endfor%}
<div id="empty-form" style="display: none;">
<div class="row">
<div class="col-md-2">
<div class="form-group">
<label for="{{dd_form.moduletype.id_for_label}}">Module Type<span
class="text-danger">*</span></label>
{{di_form.empty_form.moduletype}}
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="{{di_form.firstportid.id_for_label}}">First Port ID<span
class="text-danger">*</span></label>
{{di_form.empty_form.firstportid}}
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="{{di_form.lastportid.id_for_label}}">Last Port ID <span
class="text-danger">*</span></label>
{{di_form.empty_form.lastportid}}
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<div class="text-sm-center">
<br />
<button type="button" class="btn btn-outline-danger btn-rounded"
id="removerow" style="display: none;"><i class="dripicons-minus"></i></button>
</div>
</div>
</div>
<hr><br><br>
</div>
</div>
<!--more rows-->
<div id='morerows'>
</div>