点击多个表格请求确认并提交该表格 - Multiple forms on click ask for confirmation and submit that form

Multiple forms on click ask for confirmation and submit that form

本文关键字：表格提交确认请求 | 更新日期: 2023-09-27

所以我有一个表，它有几个条目。你可以这样删除每个条目（这是使用Laravel 5.2的建议方式）：

<form class="delete" action="//localhost:3000/admin/market-managers/11" method="POST">
    <input type="hidden" name="_token" value="XXXXXXXXXXXXXXXXXXX">
    <input type="hidden" name="_method" value="DELETE">
    <button type="submit" class="delete-button"></button>
</form>
<div class="confirmation-buttons">
  <button class="confirm-button">Confirm</button> 
  <button class="cancel-button">Cancel</button>
</div>

现在效果很好。但我想弹出一个"确认或取消"按钮设置。所以我写了这个：

$('.delete').on('submit', function(event) {
  event.preventDefault();
  var form = $(this);
  $(this).next('.confirmation-buttons').show();
  $('.cancel-button').click(function() {
    $(this).parent('.confirmation-buttons').hide();
  });
  $('.confirm-button').click(function() {
    form.submit();
  });
});

它的工作原理如图所示，如果你取消，它们会隐藏起来，但如果你确认什么都没发生。

问题是您要向确认按钮添加多个click处理程序。每次单击表单的提交按钮时，它都会向确认按钮添加另一个单击处理程序。单击"取消"按钮不会删除此项，因此当您最终单击"确认"按钮时，它将运行所有累积的单击处理程序。它们将按照添加的顺序运行，因此它将提交用户提交的第一个表单，即使他们取消了它。由于提交表单会重新加载页面，因此他们确认的实际表单将不会提交。

通常，在其他事件处理程序中添加事件处理程序是错误的。不要每次用户点击提交时都添加点击处理程序，只需绑定一次，使用全局变量记住他们点击提交按钮的最后一个表单。

$(function() {
    var form;
    $('.cancel-button').click(function() {
        $(this).parent('.confirmation-buttons').hide();
        form = null;
    });
    $('.confirm-button').click(function() {
        if (form) {
            form.submit();
        }
    });
    $('.delete').on('submit', function(event) {
        event.preventDefault();
        form = this;
        $(this).next('.confirmation-buttons').show();
    });
});

当设置form时，使用this而不是$(this)，这样form.submit()将只运行标准的Javascript提交函数，而不是重新运行jQuery处理程序。

或者，您可以使用$('.delete-button').on('click')，而不是使用$('.delete').on('submit')，并将删除按钮更改为type="button"而不是type="submit"。