jQuery动态设置表单提交Action在IE和Edge中失效求助

我之前也踩过IE和旧版Edge这个坑！你遇到的问题本质是IE的表单提交事件处理时机和其他浏览器不一样——当你在submit事件回调里修改action时，IE可能已经提前读取了表单初始的action值，导致你的动态修改根本没被用上，所以点击提交只会刷新页面，不会跳转到目标地址。

你的代码问题点 #

• 没有阻止默认的提交行为，IE会优先执行默认提交，忽略后续的action修改
• 多个独立的if判断可能导致action被覆盖（比如如果payment_method是Card同时x是0，最后action会被设为confirmation-2，如果这不是你的预期，得调整条件顺序）
• 直接依赖jQuery的submit事件回调修改属性，IE不认可这个时机的变更

修复后的代码 #

var $j = jQuery.noConflict();
$j(document).ready(function() {
    $j('#booking').submit(function(e) {
        // 第一步：阻止浏览器默认的提交行为，避免IE提前读取旧action
        e.preventDefault();
        
        // 用this指代当前表单，比getElementById更简洁
        var theForm = this;
        // 用jQuery选择器获取表单值，更统一
        var chargeTotal = $j(this).find('[name="chargetotal"]').val();
        var paymentMethod = $j(this).find('[name="payment"]').val();
        var targetAction = '';

        // 按逻辑确定目标action地址，用else if避免重复赋值
        if (paymentMethod === "Card") {
            targetAction = '<?php bloginfo('url'); ?>/confirmation';
        } else if (paymentMethod === "Transfer") {
            targetAction = '<?php bloginfo('url'); ?>/confirmation-bacs';
        } else if (chargeTotal === '0.00' || chargeTotal === '0') {
            targetAction = '<?php bloginfo('url'); ?>/confirmation-2';
        }

        // 确认有目标地址后，设置action并手动提交表单
        if (targetAction) {
            $j(this).attr('action', targetAction);
            // 用原生DOM方法提交，避免再次触发jQuery的submit事件导致循环
            theForm.submit();
        }
    });
});

关键修复说明 #

• e.preventDefault()：必须先阻止默认提交，让浏览器等待我们修改完action后再执行提交
• 原生theForm.submit()：jQuery的$j(this).submit()会再次触发我们绑定的submit事件，导致无限循环，而原生DOM元素的submit()方法只会直接提交表单，不会触发事件回调
• else if优化：确保只有第一个满足条件的分支会设置action，避免不必要的覆盖（如果你的业务逻辑允许多个条件同时生效，可以改回独立if，但一般建议用分支判断）

另外，如果你想更稳妥，也可以直接给表单的提交按钮绑定click事件，在点击时先修改action再让表单提交，原理是一样的，不过上面的方法更贴合你原来的代码结构。

内容的提问来源于stack exchange，提问作者Dipak G.