Enable bootstrap 4 'spinner' after submit button on HTML form (Flask)

Question

What i'm after doing is

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.

I'm okay with A, C and D..... they work right now, but I can't fathom out the spinner switch bit.

I've been trying and failing miserably to get all sorts of javascript copied and pasted from a whole host of stackoverflow searches.

Most have some JS function like on('click', function..... but I don't know where to place that in the HTML....

Could I do some CSS container swap trick?

Apologies for being a newb!!

Here's my little form and buttons.

<form class = "js-battery-form" action="/home" method="POST">

  <div class="input-group mb-3">
    <div class="input-group-prepend">
      <label class="input-group-text form-control-sm" for="battery_size">Battery size</label>
    </div>
    <select class="custom-select custom-select-sm" id="battery_size", name="battery_size">
      <option value="1.2">1.2kWh</option>
      <option value="2.4">2.4kWh</option>
      <option value="3.6" selected>3.6kWh</option>
      <option value="4.8">4.8kWh</option>
      <option value="7.2">7.2kWh</option>
    </select>
  </div>

 <button type="submit" id="btn" class="btn btn-primary btn-sm btn-block" >Submit Query</button>

  <button class="btn btn-primary btn-sm btn-block">Submit Query 
  <span class="spinner-border spinner-border-sm"></span>
</button>


</form>``` 

Answer 1

Think i've solved this one for anyone interested.

https://jsfiddle.net/zarch/2w6Lnp4m/3/

So I sorted a working spinner in JS Fiddle (see above) using $(document).ready(function(), but it wouldn't fire on my webpage.

I've got my JS at the end of my HTML at the bottom of the page, so it turns out you need to load the JS before the $(document).ready(function() .

So I moved the src="https://code.jquery.com/jquery-3.4.1.slim.min.js" etc to BEFORE the $(document).ready(function()

Then I hit another problem, the spinner worked but the form never submitted. It just sat there spinning forever.

So I added an id tag to the form "battery-form" and then made a submit call at the end of the $(document).ready(function()

$("#battery-form").submit();

Hope this helps someone out.

Answer 2

this worked for me. Altered slightly though as for some reason i couldn't get the spinner to spin:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<script>

    $(document).ready(function() {
        $("#btnFetch").click(function() {
            // disable button
            $(this).prop("disabled", true);
            // add spinner to button
            $(this).html(
            `<i class="fa fa-spinner fa-spin"></i> Loading`
            );
            $("#batteryform").submit();
        });
    });
</script>