Javascript jQuery-防止默认，然后继续默认

我有一个表单，当提交时，我需要在它提交表单之前做一些额外的处理。我可以阻止默认的表单提交行为，然后进行额外的处理（基本上是调用GoogleMapsAPI并在表单中添加一些隐藏字段）——然后我需要表单提交

是否有一种方法可以“防止违约”，然后在稍后的某一点上“继续违约？”

我会这样做：

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

---

首先调用

preventDefault

，然后使用

submit（）

函数，如果您只需要提交表单

，可以使用

e.preventDefault（）

，这将停止当前操作

比你能做的更多。

$（“#表单”）.submit（）

当您将
.submit（）
事件绑定到表单，并在返回（true）之前执行您想要执行的操作时，这些操作发生在实际提交之前

例如：

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


jquery.com上的另一个例子：
使用这种方式，您将在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.

我希望有帮助！
谢谢
 使用
jQuery.one（）

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

使用
one
还可以防止无限循环，因为此自定义
submit
事件在第一次提交后被删除。
“无提交循环的验证注入”：

我只是想在HTML5验证之前检查reCaptcha和其他一些东西，所以我做了类似的事情（验证函数返回true或false）：

通过纯Javascript的方式，您可以在阻止默认设置后提交表单

这是因为
HTMLFormElement.submit（）
onSubmit（）

。因此，我们依赖于这个奇怪的规范来提交表单，就好像这里没有自定义的onsubmit处理程序一样

var submitHandler = (event) => {
  event.preventDefault()
  console.log('You should only see this once')
  document.getElementById('formId').submit()
}

有关同步请求，请参阅

---

等待异步请求完成也很容易：

var submitHandler = (event) => {
  event.preventDefault()
  console.log('before')
  setTimeout(function() {
    console.log('done')
    document.getElementById('formId').submit()
  }, 1400);
  console.log('after')
}

您可以查看我的小提琴，了解异步请求的详细信息

---

如果你对承诺感到失望：

var submitHandler = (event) => {
  event.preventDefault()
  console.log('Before')
    new Promise((res, rej) => {
      setTimeout(function() {
        console.log('done')
        res()
      }, 1400);
    }).then(() => {
      document.getElementById('bob').submit()
    })
  console.log('After')
}

---

以下是。

这是IMHO最通用、最强大的解决方案（如果您的操作是由用户触发的，例如“用户单击按钮”）：

• 第一次调用处理程序时，请检查是谁触发了它：
  • 如果一个用户触发了它-做你的事情，然后再次触发它（如果你愿意）-编程
  • 否则-不执行任何操作（“继续默认”）

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

一,。 让我们在每个需要弹出“确定”弹出窗口的按钮上添加一条警告文本：

<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>

就是这样。

使用

jQuery

和上面@Joepreludian的答案的一个小变化： 要记住的要点：

• .one（…）

  改为

  。on（…）或.submit（…）

• 命名了

  函数，而不是

  匿名函数

  ，因为我们将在

  回调中引用它

---

您可以将下面代码段中

allIsWell

变量的值更改为

true

或

false

，以测试功能：

$（'form#my form'）。一个（'submit'，函数myFormSubmitCallback（evt）{
evt.stopPropagation（）；
evt.preventDefault（）；
var$this=$（this）；
var allIsWell=$（'#allIsWell'）。获取（0）。选中；
如果（allIsWell）{
$this.submit（）；
}否则{
$this.one（'submit'，myFormSubmitCallback）；
}
});



一切都很好
不要在单击事件处理程序中包含逻辑。将其委托给其他人负责。这假定“确定”将单击一个按钮。如果用户只是在表单中点击“回车”按钮，该怎么办？这也将提交表格。所以，依靠点击提交按钮可能不是一个好主意。我只是举了一个点击的例子。。。因为在这个问题上没有提到相关的代码……无论如何，你给出的代码片段只有在用户点击一个按钮时才起作用。表单不是这样工作的。还有其他建议吗？绑定单击，防止其默认值并触发提交按钮单击您是说表单在执行“return true；”语句之前的所有代码之前都不会提交吗？是的，这正是函数所做的。这不是一个好例子，因为它是同步的。如果我需要做的是异步调用呢？因此，案例是“单击提交->执行异步操作，不提交表单->在异步回调中填写表单中的一些字段->从回调中提交表单”运行一些异步jQuery代码怎么样？！也行吗？这对我来说很好。我用它来控制提交前的事情，如果事情不正确，我使用“返回错误”。我已经寻找这个解决方案一天了。非常感谢。@FelixKling你的意思是什么？实际上，最好的方法是使用异步函数的变化-@bjornmelgaard我必须记住异步是。这让我很困惑。。这不就是一个又一个的循环吗？它会在再次单击后提交：（可能您会遇到无限循环无限循环，函数应该是.on not.one要防止无限循环，请首先解除窗体事件的绑定并提交它。
$（this.unbind（）；$（this.submit（））
回答得很好！我不知道您可以向.trigger（）类型传递额外参数错误：event.currentTarget.submit不是函数在我的情况下，我必须使用
event.target.submit（）
var submitHandler = (event) => {
  event.preventDefault()
  console.log('before')
  setTimeout(function() {
    console.log('done')
    document.getElementById('formId').submit()
  }, 1400);
  console.log('after')
}

var submitHandler = (event) => {
  event.preventDefault()
  console.log('Before')
    new Promise((res, rej) => {
      setTimeout(function() {
        console.log('done')
        res()
      }, 1400);
    }).then(() => {
      document.getElementById('bob').submit()
    })
  console.log('After')
}

<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>

$('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
});

$('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...
    }
});

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

        // Do some stuff here
        ...

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