Как добавить дополнительные элементы через JavaScript в django modelformset_factory, когда пользователь выбирает товар?
Я пытаюсь создать страницу, на которой пользователь может выбрать продукт и вставить количество единиц в каждый компонент. Мне удалось создать представление, набор форм и небольшую JS функцию, которая позволяет пользователю динамически добавлять следующий продукт и компонент, но я пытаюсь добавить функцию, которая позволила бы отображать связанные компоненты и продукты автоматически, когда пользователь выбирает продукт из выпадающего списка
Есть ли какой-нибудь JS-плагин, который мог бы работать с чем-то подобным, или какие-нибудь идеи о том, как разработать такую функцию?
Я сделал нечто подобное в своем DetailView, передав author
, created
, related_product
и related_component
в начальном методе, но здесь мне определенно придется использовать JS.
На данный момент у меня есть что-то вроде этого:
Однако пользователь должен выбрать related_product
и related_component
вручную. Я хочу получить что-то вроде этого:
Поэтому всякий раз, когда пользователь выбирает продукт, он будет автоматически автоматически заполнять соответствующие значения в полях related_product
и related_component
. Важно, чтобы кнопка добавления другого товара оставалась, потому что пользователь должен иметь возможность добавлять как можно больше товаров.
Буду благодарен за любой совет.
models.py
class Product(models.Model):
title = models.CharField(max_length=255, default='')
class CostCalculator(models.Model):
title = models.CharField(max_length=255, default='')
class CERequest(models.Model):
author = models.CharField(max_length=255, blank=True, null=True)
related_component = models.ForeignKey(CostCalculator, on_delete=models.CASCADE, blank=True, null=True, default=1)
number_of_units = models.IntegerField(default=0)
related_product = models.ForeignKey(Product, on_delete=models.CASCADE, null=True, blank=True)
created = models.DateTimeField(default=timezone.now)
total_price = models.IntegerField(default=0, blank=True, null=True)
forms.py
class CalculatorForm(forms.ModelForm):
author = forms.CharField(widget = forms.HiddenInput(), required = False)
created = forms.DateTimeField(widget = forms.HiddenInput(), required = False)
number_of_units = forms.IntegerField(min_value=0)
class Meta:
model = CERequest
fields = ('author', 'created', 'related_product', 'related_component', 'number_of_units')
CalculatorFormset = modelformset_factory(CERequest, form=CalculatorForm, extra=1)
views.py
class CostCalculatorView(TemplateView):
template_name = "cost_calculator.html"
def get(self, *args, **kwargs):
get_datetime = timezone.now().strftime('%Y-%m-%dT%H:%M:%S')
formset = CalculatorFormset(queryset=CERequest.objects.none(), initial=[{
'author': self.request.user.email,
'number_of_units': 0,
'created': get_datetime,
}])
return self.render_to_response({'calculator_formset': formset})
# Define method to handle POST request
def post(self, *args, **kwargs):
formset = CalculatorFormset(data=self.request.POST)
# Check if submitted forms are valid
if formset.is_valid():
formset.save()
return redirect(reverse_lazy('cost_calculator'))
cost_calculator.html
<form id="form-container" method="POST">
{% csrf_token %}
{{ form.as_p }}
{{calculator_formset.management_form}}
{% for form in calculator_formset %}
<div class="calculator-form pt-2">
{{form.as_table}}
</div>
{% endfor %}
<button id="add-form" type="button" class="mt-2">Add Another product</button>
<button type="submit">Save</button>
</form>