When i fill out the form manually, it posts all 7 fields correctly. However, if the form is auto populated through js, the post request is only sending 2 out of the 7 fields (previous_package_description and comments). The script seems to be populating the fields correctly on the form, but they are just not being sent. Any help would be appreciated, thanks in advance
package.html
<form action="{% url 'add_supplier_package' supplier_id=supplier_id supplier_ingredient_supplypoint_id=supplier_ingredient_supplypoint.pk %}" method="POST" class="form" enctype="multipart/form-data">
{% csrf_token %}
<!-- Group 1: Previous Package Description -->
<fieldset id="group-1">
<legend>Previous Package Description</legend>
<div class="form-row">
{{ form.previous_package_description.label_tag }}
{{ form.previous_package_description }}
</div>
</fieldset>
<!-- Group 2: Package Details -->
<fieldset id="package-details-group">
<legend>Add New Packsize</legend>
<div class="form-row">
{% for field in form %}
{% if field.name != "package_sizes" and field.name != "supplier_ingredient_supplypoint" and field.name != "package_description" and field.name != "previous_package_description" %}
<div class="form-item">
{{ field.label_tag }}
{{ field }}
</div>
{% endif %}
{% endfor %}
</div>
<!-- Package Sizes Section -->
<div class="form-row">
<label for="package_sizes">Package Sizes:</label>
<div id="package_sizes_list">
<!-- Dynamic package size inputs will appear here -->
</div>
<button type="button" id="addPackageSizeButton" style="width: 20%;"class="btn" onclick="addPackageSize()">Add Package Size</button>
</div>
<!-- Auto-filled Package Description -->
<div class="form-row">
<label for="package_description">Package Description:</label>
<input type="text" id="package_description" name="package_description" readonly>
</div>
<!-- Hidden field to store package sizes -->
{{ form.package_sizes }}
<input type="hidden" name="supplier_ingredient_supplypoint" value="{{ supplier_ingredient_supplypoint.supplier_ingredient_supplypoint_id }}">
</fieldset>
<!-- Submit and Cancel Buttons -->
<div class="form-button">
<button type="submit" class="btn" onclick="return confirm('Confirm Submit?')"><span>Submit</span></button>
<button type="button" class="btn cancel" onclick="history.back()"><span>Close</span></button>
</div>
</form>
form.py
class SupplierPackageForm(forms.ModelForm):
previous_package_description = forms.ModelChoiceField(
queryset=PackageHeader.objects.all(),
label="Previous Package Description",
required=False,
empty_label="-- Select Existing Packsize --",
)
package_description = forms.CharField(
max_length=200,
label="Package Description (auto-filled)",
required=False,
widget=forms.TextInput(attrs={'readonly': 'readonly'})
)
package_type = forms.ChoiceField(
choices=[
(None, "-- None --"),
("IBC", "IBC"),
("PK", "Prepack"),
("DRUM", "DRUM"),
("PAIL","PAIL"),
("BULK","BULK")
],
label="Package Type",
required=False,
widget=forms.Select(attrs={"placeholder": "Select Package Type"})
)
uom = forms.ModelChoiceField(
queryset=PackageUOM.objects.all(),
label="Unit of Measurement",
required=True,
to_field_name='uom',
empty_label="-- Select UOM --",
)
package_sizes = forms.CharField(
widget=forms.HiddenInput(),
required=False
)
supplier_ingredient_supplypoint = forms.ModelChoiceField(
queryset=SupplierIngredientSupplyPoint.objects.all(),
required=True,
widget=forms.HiddenInput()
)
comments = forms.CharField(
max_length=200,
label="Comments",
required=False,
widget=forms.Textarea(attrs={"placeholder": "Enter comments here", "rows": 3, "cols": 40})
)
class Meta:
model = SupplierPackage # Connect the form to the SupplierPackage model
fields = ['previous_package_description', 'package_description', 'package_type', 'uom','package_sizes', 'supplier_ingredient_supplypoint', 'comments']
def __init__(self, *args, **kwargs):
supplier_ingredient_supplypoint = kwargs.pop('supplier_ingredient_supplypoint', None)
super().__init__(*args, **kwargs)
if supplier_ingredient_supplypoint:
self.initial['supplier_ingredient_supplypoint'] = supplier_ingredient_supplypoint
self.fields['supplier_ingredient_supplypoint'].queryset = SupplierIngredientSupplyPoint.objects.filter(
pk=supplier_ingredient_supplypoint.pk
)
self.fields['previous_package_description'].queryset = PackageHeader.objects.all()
self.fields['previous_package_description'].choices = [("", "-- Add New Packsize --")] + [
(package.package_id, f"{package.package_description} ({package.comments or ''})")
for package in PackageHeader.objects.all()
]
self.initial['previous_package_description'] = ""
js function
document.addEventListener('DOMContentLoaded', function () {
const previousDescriptionField = document.querySelector('[name="previous_package_description"]');
const packageDetailsGroup = document.getElementById('package-details-group');
const packageDescriptionField = document.getElementById('package_description');
const uomField = document.getElementById('id_uom');
const packageTypeField = document.getElementById('id_package_type');
const packageSizesList = document.getElementById('package_sizes_list');
function toggleGroupState() {
if (previousDescriptionField.value) {
packageDetailsGroup.style.backgroundColor = '#e0e0e0';
packageDetailsGroup.querySelectorAll('input, select, button').forEach(input => {
input.setAttribute('readonly', true);
input.setAttribute('disabled', true);
});
// Fetch data and populate fields
fetch(`${getPackageDetailsUrl}?package_id=${previousDescriptionField.value}`)
.then(response => response.json())
.then(data => {
console.log('Returned data:', data);
if (!data.error) {
uomField.value = data.uom;
packageTypeField.value = data.package_type;
packageDescriptionField.value = data.package_description;
// Populate the comments field
const commentsField = document.getElementById("id_comments");
if (commentsField) {
commentsField.value = data.comments || ""; // Ensure it's not null
}
// Clear existing package sizes and add new ones
packageSizesList.innerHTML = '';
if ( !!data.package_sizes ) {
data.package_sizes.split(',').forEach(size => {
const sizeInput = document.createElement('input');
sizeInput.type = 'text';
sizeInput.value = size.trim();
sizeInput.setAttribute('readonly', true);
sizeInput.classList.add('package-size-input');
packageSizesList.appendChild(sizeInput);
});
}
}
})
.catch(error => {
console.error('Error fetching package details:', error);
});
} else {
packageDetailsGroup.style.backgroundColor = '';
packageDetailsGroup.querySelectorAll('input, select, button').forEach(input => {
input.removeAttribute('readonly');
input.removeAttribute('disabled');
});
packageDescriptionField.value = '';
packageSizesList.innerHTML = '';
}
}
previousDescriptionField.addEventListener('change', toggleGroupState);
$('#id_previous_package_description').on('select2:select', toggleGroupState);
});
