jQuery多表单提交问题：捕获单个表单submit事件并阻止页面刷新

问题场景 #

页面中有1~10个以组件形式存在的图片上传表单，尝试动态捕获对应表单的submit事件，但提交时页面会直接刷新。

表单代码 #

<form id="med_blog_form_<?=$b['blog_med_id']?>" name="med_blog_form" class="med_blog_form" action="#" method="post">
    <label for="media_blog_file_<?=$b['blog_med_id']?>">
         <div class="btn_sm edit_blog_med_btn">UPLOAD</div>
         <input type="file" id="media_blog_file_<?=$b['blog_med_id']?>" data-blog_med_id="<?=$b['blog_med_id']?>" class="media_blog_file" name="media_upload" hidden/>
         <input type="hidden" name="upload_type" value="blog_media_upload" />
         <input type="hidden" name="blog_id" value="<?=$blog_id?>" />
         <input type="hidden" name="filename" value="<?=$b['src']?>" />
     </label>
</form>

原jQuery代码 #

$(".media_blog_file").change(function() {

    blog_med_id = $(this).data("blog_med_id");

    this_form = $(this).closest("form");
    this_form.submit();

    this_form.on('submit',(function(e) {

        e.preventDefault();

        alert("form submit "+blog_med_id);
        //do other stuff here...

    })
    )

})

问题原因 #

原代码逻辑顺序错误：先调用this_form.submit()触发了表单的默认提交行为，之后才绑定submit事件。此时页面刷新的操作已经执行，后续绑定的事件根本无法生效。

修正方案 #

方案1：提前给所有表单绑定submit事件 #

将submit事件绑定放在change事件外部，确保触发提交时事件已存在：

// 先给所有上传表单绑定submit事件
$(".med_blog_form").on('submit', function(e) {
    e.preventDefault();
    // 获取当前表单对应的blog_med_id
    const blog_med_id = $(this).find(".media_blog_file").data("blog_med_id");
    alert("form submit " + blog_med_id);
    // 在这里执行文件上传逻辑，比如FormData提交等
});

// 文件选择change事件
$(".media_blog_file").change(function() {
    const this_form = $(this).closest("form");
    // 触发表单提交
    this_form.submit();
});

方案2：在change事件中直接处理逻辑 #

无需触发submit，直接在文件选择事件里处理上传逻辑：

$(".media_blog_file").change(function(e) {
    // 阻止默认行为
    e.preventDefault();
    
    const blog_med_id = $(this).data("blog_med_id");
    const this_form = $(this).closest("form");
    
    alert("form submit " + blog_med_id);
    // 示例：执行AJAX上传逻辑
    // const formData = new FormData(this_form[0]);
    // $.ajax({
    //     url: '你的上传接口地址',
    //     type: 'POST',
    //     data: formData,
    //     processData: false,
    //     contentType: false,
    //     success: function(res) {
    //         // 处理上传成功回调
    //     }
    // });
});

补充说明 #

如果表单是通过AJAX动态生成的，需要用事件委托的方式绑定submit事件：

$(document).on('submit', ".med_blog_form", function(e) {
    e.preventDefault();
    const blog_med_id = $(this).find(".media_blog_file").data("blog_med_id");
    alert("form submit " + blog_med_id);
    // 上传逻辑
});

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