在 HTML 表单（Flask）上的提交按钮后启用引导程序 4“微调器”

Question

我要做的是

a) 显示常规提交按钮 b) 当您点击提交时，出现微调器版本 c) 表单提交，我的 Flask 代码进入数据库调用。 d) 然后当数据库调用完成时，它会在新页面上显示结果。

我对 A、C 和 D 没意见……它们现在可以工作，但我无法理解微调器开关位。

我一直在尝试从大量的 stackoverflow 搜索中复制和粘贴各种 javascript，但失败了。

大多数都有一些 JS function 像 on('click', function ......但我不知道在 HTML 中放置它的位置......

我可以做一些 CSS 容器交换技巧吗？

作为新手道歉！！

这是我的小表格和按钮。

<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

认为我已经为任何感兴趣的人解决了这个问题。

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

因此，我使用 $(document).ready(function() 对 JS Fiddle 中的工作微调器（见上文）进行了排序，但它不会在我的网页上触发。

我在页面底部的 HTML 末尾有我的 JS，所以事实证明你需要在$(document).ready(function()之前加载 JS。

所以我在 $(document) src="https://code.jquery.com/jquery-3.4.1.slim.min.js" (function()

然后我遇到了另一个问题，微调器工作但表单从未提交。 它只是坐在那里永远旋转。

所以我在“battery-form”表单中添加了一个 id 标签，然后在 $(document).ready(function() 的末尾进行了提交调用

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

希望这可以帮助某人。

Answer 2

这对我有用。 尽管由于某种原因我无法让微调器旋转，但略有改变：

<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>