Как я могу динамически устанавливать входы в Django, используя JavaScript?

Question

У меня есть следующий models.py файл, в котором есть таблица и modelform. Я работаю с has и шаблоном HTML, и я хочу, чтобы код JavaScript умножал значение ввода ставки и ввода количества, а затем динамически устанавливал его на ввод общих затрат, прежде чем я нажму на кнопку отправки.

ModelForm:
class ExpenseBasedTransactionForm(ModelForm):
    def __init__(self, *args, **kwargs):
        super(ExpenseBasedTransactionForm, self).__init__(*args, **kwargs)
        eb_client = Clientele.objects.filter(clientele_type__icontains='eb client').values_list("id", "clientele_name")
        eb_main = []
        for i in eb_client:
            k = list(i)
            k[0] = str(k[0])
            l = (tuple(k))
            eb_main.append(l)
        self.fields['eb_client'] = ChoiceField(choices=eb_main, label='EB Client', )

    class Meta:
        model = ExpenseBasedTransaction
        # fields = '__all__' #to include all the fields in the form

        # specify what fields to be included in the form
        fields = ['date_initiated', 'eb_client', 'rate',
                  'quantity', 'total_cost']

        widgets = {
            'date_initiated': AdminDateWidget(),
            'rate': NumberInput(attrs={'class': 'form-control', 'id': 'rate'}),
            'quantity': NumberInput(attrs={'class': 'form-control', 'id': 'quantity'}),
            'total_cost': NumberInput(attrs={'class': 'form-control', 'id': 'total'}),
        }


html:

{% extends "base.html" %}
{% load bootstrap3%}
{% block content %}
    <div class="content-wrapper" id="tab">
        <div class="content">
            <div class="head">
                <div class="row">               
                    <div class="col-sm-7 title" >
                        <span><i class="fa fa-pencil"></i> Record An Expense</span>
                    </div>
                    </div>
                </div>
            <div class="content padding table-responsive" >
                <div class="wrapper">
                    <form method="post">
                    {% csrf_token %}
                    {% bootstrap_form form %}
                    <br>
                    <button type="reset" class="btn btn-warning m-sm-right"><i class="fa fa-trash-o fa-lg 
                     white" aria-hidden="true"></i> Clear</button>
                    <button id="proceed" class="btn btn-primary m-sm-right">Proceed <i class="fa fa- 
                     arrow-circle-right fa-lg white" aria-hidden="true"></i></button>
                    </form>
                </div>
            </div>
        </div> <!-- end of content -->
    </div> <!--end of content-wrapper -->
<script type="text/javascript">

</script>
{% endblock content %}

Answer 1

попробуйте следующее:

обновите свои виджеты в Modelform (обратите внимание, что вам не нужно устанавливать пользовательский идентификатор в своем виджете modelform, просто добавьте событие onchange:

widgets = {
        'date_initiated': AdminDateWidget(),
        'rate': NumberInput(attrs={'class': 'form-control', 'onchange': 'calculateTotalCost()'}),
        'quantity': NumberInput(attrs={'class': 'form-control', 'onchange': 'calculateTotalCost()'}),
        'total_cost': NumberInput(attrs={'class': 'form-control'}),
    }

и затем опишите эта функция-событие в вашем шаблоне (добавьте этот код в свой шаблон между тегами скрипта:

function calculateTotalCost () {
    var rate = Number(document.getElementById('id_rate').value);
    var quantity  = Number(document.getElementById('id_quantity').value);
    if (rate && quantity) { 
        document.getElementById('id_total_cost').value = rate * quantity
        }
    }