Update a Flask input to HTML without reloading the page using jQuery

Question

I am currently outputting a Total Gross Price, which is a sum of the Product Price and the Labour Cost. However, when a user has a certain discount, he should be able to fill this in and the total price should be recalculated, applying the discount on the product price only.

<body>
  <p>The total gross price is: <b>€{{ total_price }}</b></p>
  <form action="{{ url_for('sent') }}" id="formEmail" method="POST">
    <div class="row">
      <div class="column">
        % Discount:
      </div>
      <div class="column">
        <input type="number" name="discount" min="0" value="0">
      </div>
    </div>
    <!---->
    <div class="row">
      <div class="column">
        Email Address*:
      </div>
      <div class="column">
        <input type="email" name="email" required />
      </div>
    </div>
    <input type="submit" value="Send Price Estimate" />
  </form>
</body>

The total price is input from the Flask function. However, when the user enters a discount above 0%, this should change to (product price(1-discount) + labour cost).

Can I use a jQuery function to real-time update this value?

Yes you can use JQuery. Why not ? There is nothing particular to knw, except using javascript and as you request JQuery. Here is an [exemple](https://flask.palletsprojects.com/en/1.1.x/patterns/jquery/) — Pyglouthon, Dec 03 '19 at 14:33

score 0 · Accepted Answer · answered Dec 03 '19 at 14:58

For those who might be interested in the answer:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
    $("div.price").text("€{{ total_price }}");
    $('input[type=number]').on('change', function (e) {
                if ($('input[type=number]').val() > 0) {
                    var new_price = parseFloat({{ purchase_price }}*(1 - $('input[type=number]').val()/100) + {{ work }});
                    $("div.price").text("€ "+new_price.toFixed(2));
                } else {
                    $("div.price").text("€ {{ total_price }}");
                }
            });
</script>

Update a Flask input to HTML without reloading the page using jQuery

1 Answers1