如何检测表单是否已提交？解决e.type无法识别submit的问题

这个问题我碰到过好几次啦！核心原因其实是表单默认的提交行为会直接刷新页面，导致你还没看到submit类型的日志，页面就已经重新加载了，自然捕获不到。下面给你几个实用的解决办法：

1. 阻止默认提交行为，保留日志输出 #

在事件处理函数里，针对submit类型的事件阻止默认刷新，这样就能正常打印出submit的事件类型了，还能自定义后续的提交逻辑：

$(document).on('keyup submit click', '#myForm', function(e) {
    // 针对submit事件阻止页面刷新
    if (e.type === 'submit') {
        e.preventDefault();
    }
    console.log(e.type); // 现在就能看到submit、keyup、click三种类型了
    
    // 如果是submit事件，在这里处理你的提交逻辑（比如AJAX提交）
    if (e.type === 'submit') {
        console.log('表单正式提交中！');
        // 示例：AJAX提交表单数据
        // $.ajax({
        //     url: $(this).attr('action'),
        //     method: $(this).attr('method'),
        //     data: $(this).serialize(),
        //     success: res => console.log('提交成功:', res)
        // });
    }
});

2. 单独绑定submit事件，逻辑更清晰 #

把submit事件和其他事件分开绑定，代码可读性更强，也更容易维护：

// 处理keyup和click事件
$(document).on('keyup click', '#myForm', function(e) {
    console.log(e.type);
});

// 单独处理表单提交事件
$(document).on('submit', '#myForm', function(e) {
    e.preventDefault(); // 必须阻止默认刷新
    console.log(e.type); // 这里稳定输出'submit'
    
    // 在这里执行表单提交的核心逻辑
    const formData = $(this).serialize();
    // 后续提交操作...
});

额外注意点 #

• 如果你的表单按钮是type="button"，点击它不会触发表单的submit事件，需要手动调用$('#myForm').submit()来触发；
• 要是你需要保留表单的默认提交（比如跳转到其他页面），可以在submit事件里先完成日志或检测逻辑，再延迟执行默认行为，不过这种场景比较少见。

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