title: Enable bootstrap 4 'spinner' after submit button on HTML form (Flask)
body: <p>What i'm after doing is</p>
  
  <p>a) show the regular submit button
  b) when you hit submit, the spinner version appears
  c) the form submits and my Flask code goes to the database call.
  d) then when the database call is finished it shows the result on a new page.</p>
  
  <p>I'm okay with A, C and D..... they work right now, but I can't fathom out the spinner switch bit.</p>
  
  <p>I've been trying and failing miserably to get all sorts of javascript copied and pasted from a whole host of stackoverflow searches.</p>
  
  <p>Most have some JS function like on('click', function..... but I don't know where to place that in the HTML....</p>
  
  <p>Could I do some CSS container swap trick?</p>
  
  <p>Apologies for being a newb!!</p>
  
  <p>Here's my little form and buttons.</p>
  
  <pre><code>&lt;form class = "js-battery-form" action="/home" method="POST"&gt;
  
    &lt;div class="input-group mb-3"&gt;
      &lt;div class="input-group-prepend"&gt;
        &lt;label class="input-group-text form-control-sm" for="battery_size"&gt;Battery size&lt;/label&gt;
      &lt;/div&gt;
      &lt;select class="custom-select custom-select-sm" id="battery_size", name="battery_size"&gt;
        &lt;option value="1.2"&gt;1.2kWh&lt;/option&gt;
        &lt;option value="2.4"&gt;2.4kWh&lt;/option&gt;
        &lt;option value="3.6" selected&gt;3.6kWh&lt;/option&gt;
        &lt;option value="4.8"&gt;4.8kWh&lt;/option&gt;
        &lt;option value="7.2"&gt;7.2kWh&lt;/option&gt;
      &lt;/select&gt;
    &lt;/div&gt;
  
   &lt;button type="submit" id="btn" class="btn btn-primary btn-sm btn-block" &gt;Submit Query&lt;/button&gt;
  
    &lt;button class="btn btn-primary btn-sm btn-block"&gt;Submit Query 
    &lt;span class="spinner-border spinner-border-sm"&gt;&lt;/span&gt;
  &lt;/button&gt;
  
  
  &lt;/form&gt;``` 
  </code></pre>