I have a web which has the following form as shown in the pic below. Its basically a formset which is control by a button to limit the no. of form created or remove whatever form that is not needed. So whenever i clone the formset. It will appear as form-(number)-(fieldname). I have a ‘-’ button which has the codes to reduce the number by 1.
$(document).on('click', '#removerow', function () {
let totalForms = $('#id_form-TOTAL_FORMS').val();
let actualformcount = totalForms-1;
$('#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("+")
}
The above codes work for this image:
Working as intended for delete of last row
More about this 1st image: If i clone to the max limit i set and i delete the last row (circle in red). The ones that are circle in blue get saved to my database.
But if i change the way i delete. I delete the 2nd clone (circle in blue this time), the ones that are circle in red this time get saved to database. But the last row does not get saved: Not working as intended for delete of any row other than last row
Can anyone advise me how to correct this to make it still save all the rows that are left in the form except for the deleted one?
views.py
def device_add(request):
if request.method == "POST":
device_frm = DeviceForm(request.POST)
dd_form = DeviceDetailForm(request.POST)
di_formset = inlineformset_factory(Device, DeviceInterface, fields=('moduletype', 'firstportid', 'lastportid'),widgets={ 'firstportid':TextInput(attrs={'placeholder': 'e.g. TenGigabitEthernet1/0/1'}), 'lastportid':TextInput(attrs={'placeholder':'eg. TenGigabitEthernet1/0/48'})},extra=1,max_num=3, can_delete=False)
di_form=di_formset(request.POST)
if device_frm.is_valid():
# Create and save the device
# new_device here is the newly created Device object
new_device = device_frm.save()
if dd_form.is_valid():
# Create an unsaved instance of device detail
deviceD = dd_form.save(commit=False)
# Set the device we just created above as this device detail's device
deviceD.DD2DKEY = new_device
deviceD.save()
if di_form.is_valid():
deviceI=di_form.save(commit=False)
print(deviceI)
for instances in deviceI:
instances.I2DKEY=new_device
instances.save()
return render(request, 'interface/device_added.html',{'devices':Device.objects.all()})
return render(request,'interface/device_add.html',{'form':device_frm, 'dd_form': dd_form, 'di_form':di_form})
return render(request,'interface/device_add.html',{'form':device_frm, 'dd_form': dd_form, 'di_form':di_form})
return render(request,'interface/device_add.html',{'form':device_frm, 'dd_form': dd_form, 'di_form':di_form})
else:
device_frm = DeviceForm()
dd_form = DeviceDetailForm()
di_formset = inlineformset_factory(Device, DeviceInterface, fields=('moduletype', 'firstportid', 'lastportid'), widgets={ 'firstportid':TextInput(attrs={'placeholder': 'e.g. TenGigabitEthernet1/0/1'}), 'lastportid':TextInput(attrs={'placeholder':'eg. TenGigabitEthernet1/0/48'})},extra=1, max_num=3, can_delete=False)
di_form=di_formset(queryset = DeviceInterface.objects.none())
return render(request,'interface/device_add.html',{'form':device_frm, 'dd_form': dd_form, 'di_form':di_form})
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;" data-toggle="modal"><i class="dripicons-
minus" ></i></button>
</div>
</div>
</div>
<!--more rows-->
<div id='morerows'></div>
Script
let changeFlag=0;
let maxrow = $('#id_form-MAX_NUM_FORMS').attr('value');
let totalForms = $('#id_form-TOTAL_FORMS').val();
console.log(maxrow)
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)
$('#empty-form #removerow').css('display','block');
let wholerowclone = $('#empty-form').clone();
$('#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-1;
if(changeFlag==1) {
console.log("changeFlag=1");
$('#removerow').attr('data-target', '#deleteConfirmation')
$('#deleteConfirmation').modal('show');
$('#removerowConfirmed').click(function () {
console.log("clicked")
$('#removerow').closest('#morerows.row').remove();
$('#deleteConfirmation').modal('hide');
if(actualformcount < maxrow) {
$('#addrow').attr("disabled", false)
$('#addrow').attr("class","btn btn-outline-success btn-rounded")
$('#addrow i').attr("class","dripicons-plus")
$('#addrow').html("+")
}
})
}
else {
console.log("ChangeFlag 0");
$('#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("+")
}
}
});
