Chrome中提交按钮onclick="return SubmitConfirmation()"失效问题排查

首先，我一眼就发现了问题的核心——Chrome和Firefox对disabled状态提交按钮的处理逻辑存在差异。

咱们拆解下你的代码执行流程：

1. 点击submit按钮触发onclick，调用SubmitConfirmation()
2. 第一步就执行showLoading()，直接把submit按钮设为disabled状态
3. 完成总价计算、提示弹窗后，调用confirm()让用户确认操作
4. 如果用户点取消（_userConfirm=false），会执行hideLoading()恢复按钮可用；但如果用户点确认（_userConfirm=true），你没调用hideLoading()，按钮会一直处于disabled状态！

Firefox对这种情况比较宽松：哪怕按钮是disabled的，只要onclick返回true，表单依然会提交；但Chrome严格遵循规范——disabled的表单控件无法触发表单提交动作，哪怕你的事件处理函数返回了true，浏览器也会因为按钮处于disabled状态而终止提交流程。

修复方案 #

你可以通过调整逻辑，避免按钮在提交时处于disabled状态，这里有两种靠谱的方法：

方案1：用户确认后恢复按钮状态再返回 #

修改SubmitConfirmation()函数，当用户确认提交时，先移除按钮的disabled属性：

function SubmitConfirmation() {
    showLoading();
    var total = 0;
    $(".table-success").each(function () {
        total += parseFloat($("input[id$='price']", this).val());
    });
    if (total > 50000) alert("Please attach details!");
    
    var _userConfirm = confirm('Do you want to continue?');
    
    if (_userConfirm != true) {
        hideLoading();
    } else {
        // 用户确认提交，先恢复按钮可用，再返回true
        $("input[type=submit]").removeAttr("disabled");
    }
    
    return _userConfirm;
}

方案2：改用表单onsubmit事件，延迟禁用按钮 #

更稳妥的方式是把校验逻辑绑定到表单的onsubmit事件上，等用户确认提交后再显示loading、禁用按钮：

<!-- 将onclick从按钮转移到表单标签上 -->
<form onsubmit="return SubmitConfirmation();">
    <!-- 你的表单内容 -->
    <input type="submit" value="Submit" class="btn btn-default" />
</form>

function SubmitConfirmation() {
    var total = 0;
    $(".table-success").each(function () {
        total += parseFloat($("input[id$='price']", this).val());
    });
    if (total > 50000) alert("Please attach details!");
    
    var _userConfirm = confirm('Do you want to continue?');
    
    if (_userConfirm) {
        // 确认提交后再显示loading并禁用按钮
        showLoading();
    }
    
    return _userConfirm;
}

补充说明 #

Chrome 66的行为其实是符合规范的，Firefox的处理反而属于兼容式的宽松逻辑。修复后的代码在两个浏览器里都会正常运行。

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