两个HTML提交按钮总触发第一个提交 如何用纯HTML解决该问题

问题排查方向 #

你贴出的代码从语法上看是两个独立表单，理论上不会出现点第二个按钮提交第一个接口的问题，优先排查两类前端问题：

• 用浏览器F12元素面板检查实际渲染的DOM结构，确认是否存在未闭合的<form>标签，导致浏览器把两个按钮识别为同一个表单的元素
• 排查是否有全局JS拦截了submit事件强制提交第一个表单地址，可临时禁用所有JS测试按钮功能是否正常，排除JS干扰

纯HTML实现方案 #

方案1：保留多表单结构（当前写法的修复版）

给每个表单添加唯一name属性避免浏览器识别混淆，修改后代码如下：

<h3> Backtest ID: {{ backtestID }} </h3>
<div class="row">
    <div class="col-md-1" >
        <form method="post" name="save_backtest_form">
            <button type="submit" class="btn btn-success" 
                    formaction="{{ url_for('results.save_backtest', id=backtestID) }}">Save</button>
        </form>
    </div>
    <div class="col-md-1" >
        <form method="post" name="rerun_backtest_form">
            <button type="submit" class="btn btn-info" 
                    formaction="{{ url_for('results.rerun_backtest', id=backtestID) }}">Run</button>
        </form>
    </div>
</div>

方案2：单表单多按钮（对应你参考的同表单多提交按钮方案）

如果业务需要两个按钮归属同一个表单，直接用HTML5原生的formaction属性即可，浏览器会自动用点击按钮指定的地址提交表单，无需额外代码：

<h3> Backtest ID: {{ backtestID }} </h3>
<div class="row">
    <form method="post">
        <div class="col-md-1" >
            <button type="submit" class="btn btn-success" 
                    formaction="{{ url_for('results.save_backtest', id=backtestID) }}">Save</button>
        </div>
        <div class="col-md-1" >
            <button type="submit" class="btn btn-info" 
                    formaction="{{ url_for('results.rerun_backtest', id=backtestID) }}">Run</button>
        </div>
    </form>
</div>

如果需要兼容不支持HTML5的旧浏览器，可给两个按钮添加不同的name属性，后端根据接收到的参数名判断执行对应逻辑即可，同样是纯HTML实现。

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