Auto-Populate a field in a form depending on a formula and previous field input

Question

I am needing some help with Auto-Populating 2 fields on a form based on the input of the previous fields in that form from the user, all based on a formula. My entire web application works, just this functionality is confusing me and I do not know how to go about solving it. Please forgive me if this is a fairly easy/obvious approach.

Formula and Pricing Module

Other Instructions

models.py

routes.py: only showing that specific forms route

forms.py: showing only the Quote form

requestAQuote.html

 {% extends "template.html" %} {% block content %} <div class="content-section"> <form method="POST" action=""> {{ form.hidden_tag() }} <fieldset class="form-group"> <legend class="border-bottom mb-4">Request a Quote today!</legend> <div class="form-group"> {{ form.gallons_requested.label(class="form-control-label") }} {% if form.gallons_requested.errors %} {{ form.gallons_requested(class="form-control form-control-lg is-invalid") }} <div class="invalid-feedback"> {% for error in form.gallons_requested.errors %} <span>{{ error }}</span> {% endfor %} </div> {% else %} {{ form.gallons_requested(class="form-control form-control-lg") }} {% endif %} </div> <div class="form-group"> {{ form.delivery_date.label(class="form-control-label") }} {% if form.delivery_date.errors %} {{ form.delivery_date(class="form-control form-control-lg is-invalid") }} <div class="invalid-feedback"> {% for error in form.delivery_date.errors %} <span>{{ error }}</span> {% endfor %} </div> {% else %} {{ form.delivery_date(class="form-control form-control-lg") }} {% endif %} </div> <div class="form-group"> {{ form.request_date.label(class="form-control-label") }} {% if form.request_date.errors %} {{ form.request_date(class="form-control form-control-lg is-invalid") }} <div class="invalid-feedback"> {% for error in form.request_date.errors %} <span>{{ error }}</span> {% endfor %} </div> {% else %} {{ form.request_date(class="form-control form-control-lg") }} {% endif %} </div> <div class="form-group"> {{ form.delivery_location.label(class="form-control-label") }} {% if form.delivery_location.errors %} {{ form.delivery_location(class="form-control form-control-lg is-invalid") }} <div class="invalid-feedback"> {% for error in form.delivery_location.errors %} <span>{{ error }}</span> {% endfor %} </div> {% else %} {{ form.delivery_location(class="form-control form-control-lg") }} {% endif %} </div> <div class="form-group"> {{ form.delivery_contact_name.label(class="form-control-label") }} {% if form.delivery_contact_name.errors %} {{ form.delivery_contact_name(class="form-control form-control-lg is-invalid") }} <div class="invalid-feedback"> {% for error in form.delivery_contact_name.errors %} <span>{{ error }}</span> {% endfor %} </div> {% else %} {{ form.delivery_contact_name(class="form-control form-control-lg") }} {% endif %} </div> <div class="form-group"> {{ form.delivery_contact_phone.label(class="form-control-label") }} {% if form.delivery_contact_phone.errors %} {{ form.delivery_contact_phone(class="form-control form-control-lg is-invalid") }} <div class="invalid-feedback"> {% for error in form.delivery_contact_phone.errors %} <span>{{ error }}</span> {% endfor %} </div> {% else %} {{ form.delivery_contact_phone(class="form-control form-control-lg") }} {% endif %} </div> <div class="form-group"> {{ form.delivery_contact_email.label(class="form-control-label") }} {% if form.delivery_contact_email.errors %} {{ form.delivery_contact_email(class="form-control form-control-lg is-invalid") }} <div class="invalid-feedback"> {% for error in form.delivery_contact_email.errors %} <span>{{ error }}</span> {% endfor %} </div> {% else %} {{ form.delivery_contact_email(class="form-control form-control-lg") }} {% endif %} </div> <div class="form-group"> {{ form.suggested_price.label(class="form-control-label") }} {% if form.suggested_price.errors %} {{ form.suggested_price(class="form-control form-control-lg is-invalid") }} <div class="invalid-feedback"> {% for error in form.suggested_price.errors %} <span>{{ error }}</span> {% endfor %} </div> {% else %} {{ form.suggested_price(class="form-control form-control-lg") }} {% endif %} </div> <div class="form-group"> {{ form.total_amount_due.label(class="form-control-label") }} {% if form.total_amount_due.errors %} {{ form.total_amount_due(class="form-control form-control-lg is-invalid") }} <div class="invalid-feedback"> {% for error in form.total_amount_due.errors %} <span>{{ error }}</span> {% endfor %} </div> {% else %} {{ form.total_amount_due(class="form-control form-control-lg") }} {% endif %} </div> </fieldset> <div class="form-group"> {{ form.get_price(class="btn btn-outline-info") }} </div> <div class="form-group"> {{ form.submit(class="btn btn-outline-info") }} </div> </form> </div> {% endblock content %} 

Answer 1

you can add some javascript code to auto-populate it based on your other field. please refer to this Auto populate field base on what was entered in another field simultaneously