jQuery：表单提交-多个事件处理程序

当前我的项目中的jQuery Form Submissions存在一些问题。

我的项目包含一个通用的jQuery代码，可防止表单重复提交（例如，某人多次单击“提交”按钮）。

//prevent multiple form submissions
jQuery.fn.preventDoubleSubmission = function () {
    $(document).on('submit',this,function (e) {
        let $form = $(this);
        if ($form.data('submitted') === true) {
            e.preventDefault();
        } else {
            $form.data('submitted',true);
        }
    });
    return this;
};


$(function () {
    $('form').preventDoubleSubmission();
});

此代码包含在每个页面中-因此，每个表格都应受到“保护”。

对于某些特定的表单，我需要在提交某些值之前对其进行检查-如果缺少某些值，则显示一个确认框（例如，您确定要提交不带值X的此表单吗？）

代码如下：

$(document).on('submit','form[name="article"]',function (e) {
    e.preventDefault();
    let form = this;
    let $form = $(form);
    let $category = $form.find('select#article_category'); //get category

    if ($category.length && !$category.val()) { //check if category is selected
        $.confirm({ //jquery confirm plugin
            title: "Are you sure?",content: "Value X is missing - continue?",buttons: {
                confirm: {
                    action: function () {
                        $form.off('submit');
                        form.submit();
                    }
                }
            }
        });
    } else {
        $form.off('submit');
        form.submit();
    }
});

因此，基本上，如果用户尝试提交表单，但缺少值X，则将首先显示“是/否”弹出窗口-如果该值存在，则将立即提交表单。

问题： 当我要提交表单时，我致电$form.off('submit');删除事件处理程序，然后再向form.submit();提交。遗憾的是，这也删除了我的 preventDoubleSubmission 事件处理程序，该事件处理程序允许再次提交两次。

是否可以解决我的问题？谢谢

下面是具有正确解决方案的代码段。您的原始方法存在多个问题，在代码段下方突出显示。最好在其他代码游乐场中运行此代码段，例如，使用JavaScript进行操作的代码JSFiddle。

//prevent multiple form submissions
function submitOnce (e,$form) {
  alert('submitted = ' + $form.data('submitted'));
  if ($form.data('submitted') === true) {
    e.preventDefault();
    alert('Double-submission prevented!');
  } else {
    $form.data('submitted',true);
    alert('Double-submission param saved');
  }
}


$(document).on('submit','form[name="article"]',function (e) {
		let form = this;
    let $form = $(form);
    
    let $category = $form.find('select#article_category'); //get category

    if ($category.length && !$category.val()) { //check if category is selected
    
      if ( confirm("Are you sure?") ){
        submitOnce(e,$form);
      }
      else {
      	e.preventDefault();
      }
        
    } else {
        submitOnce(e,$form);
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="article" action="javascript:alert('Form submitted!');">
  <select id="article_category" name="select1">
    <option></option>
    <option>option1</option>
    <option>option2</option>
  </select>
  <input type="submit" />
</form>

编辑：添加说明

如果您直接在表单元素上绑定“提交”事件处理程序，则

$form.off()将起作用，但是在两种情况下，处理程序都在文档上注册。

调用form.submit()是不必要的，因为我们已经在一个Submit处理程序中，因此Submit已经被调用。我们只需要阻止提交即可继续。

最好是只有一个提交处理程序，并在那里处理两次提交。

对于未确认的情况，

e.preventDefault();必须位于else子句中，而submitOnce()必须位于

form.submit()中。您在主处理程序的开头就拥有了它，但是在那里没有用，因为function remove_body_classes( $wp_classes ) { if ( is_page_template( 'inc/home-template-page.php' ) ) { $page = array( 'page' ); $wp_classes = array_diff( $wp_classes,$page ); } return $wp_classes; } add_filter( 'body_class','remove_body_classes',10,2 );在内部再次被调用，并且此调用不会阻止默认操作。

我的方法不是防弹的，只是为了说明需要更改的内容。

一种方法是将正常范围与click事件一起使用。单击它后，您可以禁用它（例如使用一个类），然后提交表单。这种方法使您可以控制表单提交，而无需额外的编码。

请参见以下示例：

$submitBtn = jQuery(".submit");
$form = jQuery("form[name='article']");

$submitBtn.on("click",function() {
  if (jQuery(this).hasClass("disabled"))
    return;

  let $category = $form.find('.name'); //get value

  if ($category.length && !$category.val()) { //check if value is set
    $.confirm({ //jquery confirm plugin
      title: "Are you sure ?",content: 'Value x is missing - continue ?',buttons: {
        confirm: {
          action: function() {
            $form.submit();
            $submitBtn.addClass("disabled");
          }
        },cancel: function() {
          //$.alert('canceled');
        }
      }
    });

    return;
  }

  $submitBtn.addClass("disabled");
  $form.submit();

});

form {
  border: 1px solid rgba(0,0.1);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  width: 200px;
}

form input {
  margin-bottom: 0.5rem;
  padding: 0.3rem;
  border-radius: 3px;
  border: 1px solid gray;
}

form .submit {
  padding: 0.3rem 1rem;
  cursor: pointer;
  border-radius: 3px;
  background-color: rgba(0,0.1);
  text-align: center;
  transition: all 0.3s;
}

form .submit.disabled {
  opacity: 0.5;
  cursor: default;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.4/jquery-confirm.min.js"></script>

<form action="" name='article'>
  First name:<br>
  <input type="text" name="firstname" value="My First Name" class='name'>
  <br> Last name:<br>
  <input type="text" name="lastname" value="My Last Name">
  <br><br>
  <span class='submit'>Submit</span>
</form>

所以我终于找到了一个相对不错的解决方案。但是，它非常简单，我可能会坚持下去。

//form submission function
function submitForm(form) {
    let $form = $(form);
    let $submit = $form.find('button[type=submit]'); //find submit button

    $submit.attr('disabled',true); //disable button = prevent double submission
    form.submit(); //submit form
}

//submission for every form but not .form-confirm
$(document).on('submit','form:not(.form-confirm)',function (e) {
    e.preventDefault();
    submitForm(this); //call function
});

$(document).on('submit',function (e) {
    e.preventDefault();
    let form = this;
    let $form = $(form);

    let $category = $form.find('select#article_category'); //get category

    if ($category.length && !$category.val()) { //check if category is selected
        $.confirm({
            title: "Are you sure?",content: "Value X is missing - continue?",buttons: {
                confirm: {
                    action: function () {
                        submitForm(form); //call function
                    }
                }
            }
        });
    } else {
        submitForm(form); //call function
    }
});

那它如何工作？

基本上，我只是在提交后禁用了提交按钮（=防止重复提交）。我在弹出窗口应显示的特定表单中添加了一个名为form-confirm的类，因此一般规则在此处不起作用。我总是使用preventDefault并使用form.submit()在我的代码中立即提交。

jQuery：表单提交-多个事件处理程序

bmlun 回答：jQuery：表单提交-多个事件处理程序

大家都在问