jQuery - 防止默认,然后继续默认

Question

我有一个表单,在提交时,我需要在提交表单之前做一些额外的处理.我可以阻止默认表单提交行为,然后进行我的额外处理(它基本上调用Google Maps API并在表单中添加一些隐藏字段) - 然后我需要提交表单.

有没有办法"防止默认",然后某些点"继续默认？"

Answer 1

当您将.submit()事件绑定到表单,并且在返回之前执行您想要执行的操作(true)时,这些事情会在实际提交之前发生.

例如:

$('form').submit(function(){
    alert('I do something before the actual submission');
    return true;
});

简单的例子

jquery.com上的另一个例子:http://api.jquery.com/submit/#entry-examples

Answer 2

使用 jQuery.one()

将处理程序附加到元素的事件.每个事件类型的每个元素最多执行一次处理程序

$('form').one('submit', function(e) {
    e.preventDefault();
    // do your things ...

    // and when you done:
    $(this).submit();
});

它做你想要的,你不需要担心多次提交.

Answer 3

我会做..

 $('#submiteButtonID').click(function(e){
     e.preventDefault();
     //do ur stuff.
     $('#formId').submit();
 });

preventDefault首先调用 并submit()稍后使用函数..如果你只需要提交表单

Answer 4

使用这种方式你将在你的JS上做一个无限循环.要做得更好,可以使用以下方法

var on_submit_function = function(evt){
    evt.preventDefault(); //The form wouln't be submitted Yet.
    (...yourcode...)

    $(this).off('submit', on_submit_function); //It will remove this handle and will submit the form again if it's all ok.
    $(this).submit();
}

$('form').on('submit', on_submit_function); //Registering on submit.

我希望它有所帮助!谢谢!

Answer 5

      $('#myform').on('submit',function(event){
        // block form submit event
        event.preventDefault();

        // Do some stuff here
        ...

        // Continue the form submit
        event.currentTarget.submit();
  });

Answer 6

恕我直言，这是最通用和最强大的解决方案（如果您的操作是用户触发的，例如“用户点击按钮”）：

• 第一次调用处理程序时检查谁触发了它：
  • 如果用户触发它 - 做你的事情，然后再次触发它（如果你愿意） - 以编程方式
  • 否则 - 什么都不做（=“继续默认”）

例如，请注意添加“您确定吗？”的优雅解决方案。只需使用属性装饰按钮即可弹出任何按钮。如果用户不选择退出，我们将有条件地继续默认行为。

1. 让我们为每个我们想要“你确定”弹出的按钮添加一个警告文本：

<button class="btn btn-success-outline float-right" type="submit"  ays_text="You will lose any unsaved changes... Do you want to continue?"                >Do something dangerous</button>

2. 将处理程序附加到所有此类按钮：

$('button[ays_text]').click(function (e, from) {
    if (from == null) {  // user clicked it!
        var btn = $(this);
        e.preventDefault();
        if (confirm() == true) {
            btn.trigger('click', ['your-app-name-here-or-anything-that-is-not-null']);
        }
    }
    // otherwise - do nothing, ie continue default
});

就是这样。

Answer 7

jQuery上面@Joepreludian 的答案有一个小小的变化：

需要记住的要点：

• .one(...)相反.on(...) or .submit(...)
• named函数而不是anonymous function因为我们将在callback.

$('form#my-form').one('submit', function myFormSubmitCallback(evt) {
    evt.stopPropagation();
    evt.preventDefault();
    var $this = $(this);
    if (allIsWell) {
        $this.submit(); // submit the form and it will not re-enter the callback because we have worked with .one(...)
    } else {
        $this.one('submit', myFormSubmitCallback); // lets get into the callback 'one' more time...
    }
});

allIsWell您可以将以下代码片段中的变量值更改为true或false来测试功能：

$('form#my-form').one('submit', function myFormSubmitCallback(evt) {
    evt.stopPropagation();
    evt.preventDefault();
    var $this = $(this);
    if (allIsWell) {
        $this.submit(); // submit the form and it will not re-enter the callback because we have worked with .one(...)
    } else {
        $this.one('submit', myFormSubmitCallback); // lets get into the callback 'one' more time...
    }
});

$('form#my-form').one('submit', function myFormSubmitCallback(evt){
  evt.stopPropagation();
  evt.preventDefault();
  var $this = $(this);
  var allIsWell = $('#allIsWell').get(0).checked;
  if(allIsWell) {
    $this.submit();
  } else {
    $this.one('submit', myFormSubmitCallback);
  }
});

祝你好运...