代码之家 › 专栏 › 技术社区 › Chris

jQuery多种形式。需要在“提交”时捕获$(this)表单

onsubmit forms jquery

-1

Chris · 技术社区 · 9 月前

我在一个页面上有几个表单,其中包含类似小部件的元素来上传图像。可能有一个,也可能有十个。我试图动态地、单独地捕捉特定的表单 on submit 。这是我有的,但还有 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...

    })
    )

})

1 回复 | 直到 9 月前

1

0

Phil 9 月前

这里有几个问题。。。

不要在事件处理程序中注册事件处理程序。那是 rarely / never what you want to do
跑步 submit() 绕过任何事件处理,直接提交表单。您可能希望 HTMLFormElement: requestSubmit() method 虽然它看起来像jQuery的 .submit() / .trigger('submit') 做类似的事情
你真的 don't need jQuery 为了这个

相反,添加两个委托的事件处理程序;一个用于监听文件更改并触发提交事件,另一个用于侦听表单提交事件

document.addEventListener('change', (e) => {
  if (e.target.matches('input[type=file].media_blog_file')) {
    e.target.closest('form')?.requestSubmit();
  }
});

document.addEventListener('submit', (e) => {
  if (e.target.matches('form.med_blog_form')) {
    e.preventDefault();
    const blog_med_id = e.target.querySelector(
      'input[type=file][data-blog_med_id]',
    )?.dataset.blog_med_id;

    // alert(`form submit ${blog_med_id}`);
    console.log('form submit:', blog_med_id);
  }
});

<!-- note PHP parts have been replaced with static values -->
<form id="med_blog_form_1" name="med_blog_form" class="med_blog_form" action="#" method="post">
  <label for="media_blog_file_1">
         <div class="btn_sm edit_blog_med_btn">UPLOAD</div>
         <input type="file" id="media_blog_file_1" data-blog_med_id="1" 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="1" />
         <input type="hidden" name="filename" value="my_file" />
     </label>
</form>