如何为Flask表单的form.submit按钮添加加载GIF触发事件？

核心问题：参数传递语法错误 #

你之前的写法错误地将onclick直接拼接在class属性后，Flask-WTF的字段渲染要求每个HTML属性作为独立的关键字参数传递，正确写法如下：

<div class="form-group">
    <script type="text/javascript">
      function loading(){
          $("#loading").show();
          $("#content").hide();
          // 额外优化：禁用提交按钮，防止重复提交
          $(event.target).prop('disabled', true);
      }
    </script>
    {{ form.submit(class='btn btn-outline-info', onclick="loading();") }}
</div>

关键注意事项 #

• 确保页面已加载jQuery：如果未引入jQuery库，$("#loading")这类选择器会失效，需在页面中添加jQuery引入（本地文件或CDN均可）。
• 修正模板笔误：你原代码里的form=group是拼写错误，应改为form-group，否则会导致表单样式异常。
• 强化防重复提交：在loading函数中禁用提交按钮，避免用户多次点击触发重复请求。

完整可运行示例 #

<!-- 先引入jQuery -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>

<div class="form-group">
    <script type="text/javascript">
      function loading(){
          $("#loading").show();
          $("#content").hide();
          // 禁用当前提交按钮
          $(event.target).prop('disabled', true);
      }
    </script>
    {{ form.submit(class='btn btn-outline-info', onclick="loading();") }}
</div>

<!-- 加载动画容器 -->
<div id="loading"></div>
<!-- 页面内容容器 -->
<div id="content">
    <!-- 原有页面内容 -->
</div>

内容的提问来源于stack exchange，提问作者asapbeet