Отправка формы Django не отправляет все поля в форме, когда поля заполнены JavaScript ⇐ Javascript

[Anonymous]

Когда я заполняю форму вручную, она правильно публикует все 7 полей. Однако, если форма автоматически заполняется через JS, запрос POST отправляет только 2 из 7 полей (предыдущий_package_description и комментарии). Сценарий, кажется, правильно заполняет поля в форме, но их просто не отправляются. Любая помощь будет оценена, заранее спасибо
package.html

{% csrf_token %}



Previous Package Description

{{ form.previous_package_description.label_tag }}
{{ form.previous_package_description }}





Add New Packsize

{% 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" %}

{{ field.label_tag }}
{{ field }}

{% endif %}
{% endfor %}




Package Sizes:



Add Package Size




Package Description:



{{ form.package_sizes }}






Submit
Close



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


Подробнее здесь: https://stackoverflow.com/questions/795 ... ds-are-pop