时间戳

首页 > 解决方案 > 在 HTML 表单（Flask）上提交按钮后启用引导程序 4“微调器”

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

问题描述

我要做的是

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

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

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

大多数都有一些 JS 函数，例如 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>```

标签： javascriptcssformstwitter-bootstrapflask

解决方案

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

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

推荐阅读