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

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

  •  -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 月前

    这里有几个问题。。。

    1. 不要在事件处理程序中注册事件处理程序。那是 rarely / never what you want to do

    2. 跑步 submit() 绕过任何事件处理,直接提交表单。您可能希望 HTMLFormElement: requestSubmit() method 虽然它看起来像jQuery的 .submit() / .trigger('submit') 做类似的事情

    3. 你真的 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>