Как добавить дополнительные элементы через 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>

Вернуться на верх