点击禁用提交按钮后无法向控制器传递参数的求助

这个问题我之前也碰到过，核心原因是浏览器不会提交已禁用表单元素的数据——你直接在按钮的onclick事件里设置disabled=true，按钮会在表单收集提交数据之前就被禁用，所以它的name和value根本不会被发送到控制器。下面给你几个靠谱的解决方案：

方法1：用隐藏字段传递参数 #

在表单里添加一个隐藏输入框，点击按钮时先把按钮的value赋值给隐藏字段，再禁用按钮。这样即使按钮被禁用，隐藏字段的参数依然会被提交：

<!-- 添加隐藏字段，name和控制器参数名一致 -->
<input type="hidden" name="submit" id="hiddenSubmit" />

<!-- 修改提交按钮的onclick事件 -->
<input type="submit" value="Save" class="btn btn-default" name="submitBtn" 
       style="float: right; position: relative; right: -18px;" 
       onclick="document.getElementById('hiddenSubmit').value = this.value; this.disabled = true;" />

控制器的EditCall方法不需要修改，依然可以通过string submit参数拿到"Save"的值。

方法2：利用表单的onsubmit事件 #

把禁用按钮的逻辑放到表单的onsubmit事件里——这个事件触发时，浏览器已经完成了表单数据的收集（包括提交按钮的value），之后再禁用按钮就不会影响参数传递了：

<!-- 给表单添加id -->
<form id="callForm" method="post" action="/YourController/EditCall">
    <!-- 其他表单元素 -->
    
    <input type="submit" value="Save" class="btn btn-default" name="submit" 
           style="float: right; position: relative; right: -18px;" />
</form>

<script>
// 监听表单提交事件
document.getElementById('callForm').addEventListener('submit', function() {
    // 找到提交按钮并禁用
    const submitBtn = this.querySelector('input[name="submit"]');
    if (submitBtn) {
        submitBtn.disabled = true;
        // 可选：修改按钮文本，提示用户正在处理
        submitBtn.value = "Saving...";
    }
});
</script>

方法3：jQuery简化版（如果项目用了jQuery） #

如果你的项目已经引入了jQuery，可以用更简洁的代码实现：

<input type="submit" value="Save" class="btn btn-default" name="submit" 
       style="float: right; position: relative; right: -18px;" />

<script>
$('form').submit(function() {
    // 禁用按钮并修改文本
    $(this).find('input[name="submit"]').prop('disabled', true).val('Saving...');
});
</script>

这三种方法都能完美解决「禁用按钮的同时传递参数」的需求，你可以根据项目的技术栈选择最合适的一种。

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