How can I set inputs dynamically in Django using JavaScript?

Question

I have the following models.py file which has the table and modelform. I'm working with has and the HTML template and I want some JavaScript code to multiply the value of rate input and quantity input then set it dynamically into total cost input before I click on submit.

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

Welcome! Are you sure that it is a good idea to calculate total_cost on the client side? I think the better choice is to do it when you are saving your form in your view (server side). — Vit Amin
– Vit Amin, Commented May 26, 2020 at 21:19
yes, the user will be an authorized user... thanks for the response. i still need help — babafemi ayodele
– babafemi ayodele, Commented May 26, 2020 at 22:26

Vit Amin · Accepted Answer · 2020-05-27 14:29:39Z

1

please try this:

update your widgets in Modelform (note that you needn't set custom id in your modelform widget, just add onchange event:

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'}),
    }

and then describe this event-function in your template (add this code to your template between script tag:

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

edited May 27, 2020 at 14:29

answered May 27, 2020 at 13:30

Vit Amin

7118 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

babafemi ayodele Over a year ago

thanks for the response once again but unfortunately this did not work with my code

babafemi ayodele Over a year ago

yes boss. the error on the console says; Uncaught ReferenceError: calculateTotalCost is not defined at HTMLInputElement.onchange ((index):142)

Vit Amin Over a year ago

update your template please with that javascript code

Collectives™ on Stack Overflow

How can I set inputs dynamically in Django using JavaScript?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related