Python Flask When form option is selected, run script and display results in table?

Question

So I am running Python Flask with Bootstrap. And when both of my form selects are filled in I would like to submit the form, which would then run my script. My script is already made and works fine. It outputs data for every new line like so:

1.25:7000
2.75:13000
6.40:50400

(Sometimes the output is more or less than 3 lines as it varies per product) So after somebody fills out the two select options, I will pass the two select options onto my script in order to fetch the prices and stocks for each seller, which the output is displayed like so above.

Then I would like to update and display this data onto my website. In the example above, the script should make the Price update to 1.25 and stock 70,400 (since 7000+13000+50400) Then I would like to display a table, which would only appear after the two options are selected and it would look like this:

Price|Stock
1.25 |7000
2.75 |13000
6.40 |50400

I would like this to appear under everything on the form.

My template code:

{% extends "_base.html" %}
{% block content %}
{% if current_user.is_authenticated %}
<h3 class="text-center">Welcome {{current_user.email}}!</h3>
{% else %}
<h3 class="text-center">Price List</h3>
{% endif %}
<br>
<div class="form-group">
<form action="" method="post">
<div class="input-group mb-3-center" style="display: flex;justify-content: center;">
    <div class="input-group-prepend">
    <label for="inputsm">Country</label>
    <br>
    <select class="selectpicker" title="Choose a country..." data-live-search="true" id="country">
      <option value="uk">United Kingdom</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
    <br>
    <br>
    <label for="inputsm">Service</label>
    <br>
    <select class="selectpicker" title="Choose a service..." data-live-search="true" id="service">
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
    <br>
    <br>
    <label for="inputsm">Price</label>
    <span class="input-group-text" style="font-size: medium;">$</span>
    <br>
    <label for="inputsm">Stock</label>
    <span class="input-group-text" style="font-size: medium;">-</span>
    <br>
  </div>
</div>
</form>
{% endblock %}

Python file:

from flask import Blueprint, render_template
from flask_login import login_required

core_bp = Blueprint("core", __name__)


@core_bp.route("/")
#@login_required
def home():
    return render_template("core/index.html")

def getPrices(service,country):
    if service=="1" and country=="uk":
        return("1.25:7000\n2.75:13000\n6.40:50400")

Answer 1

You can add an onchange listener to the selects in your HTML. It would be easiest to add an additional value to the selects, e.g. "Choose a value" so that you could test whether the user has selected it or not.

Updated template:

<div class="form-group">
<form action="" method="post">
<div class="input-group mb-3-center" style="display: flex;justify-content: center;">
    <div class="input-group-prepend">
    <label for="inputsm">Country</label>
    <br>
    <select class="selectpicker" title="Choose a country..." data-live-search="true" id="country" onchange="update()">
      <option value="select">Select a country</option>
      <option value="uk">United Kingdom</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
    <br>
    <br>
    <label for="inputsm">Service</label>
    <br>
    <select class="selectpicker" title="Choose a service..." data-live-search="true" id="service" onchange="update()">
      <option value="select">Select a service</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
    <br>
    <br>
    <label for="inputsm">Price</label>
    <span class="input-group-text" style="font-size: medium;">$</span>
    <br>
    <label for="inputsm">Stock</label>
    <span class="input-group-text" style="font-size: medium;">-</span>
    <br>
  </div>
</div>
</form>
</div>
<script>
function update() {
  const countrySelect = document.getElementById('country').value;
  const serviceSelect = document.getElementById('service').value;

  if (countrySelect !== 'select' && serviceSelect !== 'select') {
    // POST req to your server with the country and service
    // use the return val to populate the table 
  }
}
</script>
{% endblock %}

And the server would have to be updated with something like:

@core_bp.route("/")
#@login_required
def home():
    return render_template("core/index.html")

@core_bp.post('/prices')
def getPrices():
    country = request.values.get('country')
    service = request.values.get('service')
    if service=="1" and country=="uk":
        return("1.25:7000\n2.75:13000\n6.40:50400")

It'd probably be better to return a JSON object so you can get the values more easily back in your JS.