如何通过HTML、JS、Jinja、Flask等方法让nav-tabs实现提交按钮功能

实现方案1：JavaScript 实现（无需调整原有DOM结构位置，兼容性好） #

步骤1：修改nav-tabs导航栏代码，新增自定义属性标识对应操作类型

<ul class="nav nav-tabs nav-justified" id="workTabs">
  <li role="presentation" class="active"><a href="javascript:void(0)" data-work-type="Work-1">Work-1</a></li>
  <li role="presentation"><a href="javascript:void(0)" data-work-type="Work-2">Work-2</a></li>
</ul>

步骤2：修改表单代码，新增隐藏字段存储提交类型，同时修正原有提交按钮多余的引号错误

<form name='text' id="workForm" action='' method="POST">
  <!-- 新增隐藏字段传递提交类型 -->
  <input type="hidden" name="submit_button" id="submitType">
  <textarea name="text" class="form-control custom-control" rows="3">insert text here</textarea>
    <div style="text-align: center; margin: 10px;">
      <!-- 修正原来多写的双引号 -->
      <input type="submit" name="submit_button" class="btn btn-primary" value="Work-1" />
      <input type="submit" name="submit_button" class="btn btn-primary" value="Work-2"/>
    </div>
</form>

步骤3：新增JS监听逻辑

document.querySelectorAll('#workTabs a').forEach(tab => {
  tab.addEventListener('click', function() {
    // 赋值提交类型
    document.getElementById('submitType').value = this.dataset.workType;
    // 提交表单，逻辑和原按钮完全一致
    document.getElementById('workForm').submit();
  })
})

实现方案2：无JS纯HTML实现（仅需调整导航栏位置） #

将nav-tabs导航栏整体移入<form>标签内部，把a标签替换为提交按钮，用CSS伪装成导航栏样式即可，无需额外JS代码：

<form name='text' action='' method="POST">
  <!-- 导航栏移入form内部 -->
  <ul class="nav nav-tabs nav-justified">
    <li role="presentation" class="active">
      <button type="submit" name="submit_button" value="Work-1" class="nav-link btn btn-link border-0">Work-1</button>
    </li>
    <li role="presentation">
      <button type="submit" name="submit_button" value="Work-2" class="nav-link btn btn-link border-0">Work-2</button>
    </li>
  </ul>
  <textarea name="text" class="form-control custom-control" rows="3">insert text here</textarea>
    <div style="text-align: center; margin: 10px;">
      <input type="submit" name="submit_button" class="btn btn-primary" value="Work-1" />
      <input type="submit" name="submit_button" class="btn btn-primary" value="Work-2"/>
    </div>
</form>

两种方案后端Flask逻辑都不需要做任何修改，提交的请求参数和原有按钮触发的请求完全一致，会自动匹配你已写好的判断逻辑返回对应结果页。

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