119

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

有没有办法“防止默认”，然后某个时候“继续默认”？

4

10 回答 10

68

利用jQuery.one()

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

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

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

使用one防止也是无限循环，因为此自定义submit事件在第一次提交后被分离。

于 2017-01-03T10:04:54.693 回答
56

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

例如：

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

简单的例子

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

于 2013-01-17T08:57:20.327 回答
30

我会这样做：

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

先调用 preventDefault后使用submit()函数，如果只需要提交表单

于 2013-01-17T08:49:18.187 回答
19

使用这种方式，您将在您的 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.

我希望它有帮助！谢谢！

于 2015-02-09T18:10:16.457 回答
14 
      $('#myform').on('submit',function(event){
        // block form submit event
        event.preventDefault();

        // Do some stuff here
        ...

        // Continue the form submit
        event.currentTarget.submit();
  });
于 2019-07-25T09:27:27.087 回答
9

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

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

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

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
});

而已。

于 2018-05-10T07:50:15.940 回答
3

上面有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);
  var allIsWell = $('#allIsWell').get(0).checked;
  if(allIsWell) {
    $this.submit();
  } else {
    $this.one('submit', myFormSubmitCallback);
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="/" id="my-form">
  <input name="./fname" value="John" />
  <input name="./lname" value="Smith" />
  <input type="submit" value="Lets Do This!" />
  <br>
  <label>
    <input type="checkbox" value="true" id="allIsWell" />
    All Is Well
  </label>
</form>

祝你好运...

于 2018-08-29T09:04:27.420 回答
2

“没有提交循环的验证注入”：

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

$(document).ready(function(){
   var application_form = $('form#application-form');

   application_form.on('submit',function(e){

        if(application_form_extra_validation()===true){
           return true;
        }

        e.preventDefault();

   });
});
于 2017-07-28T16:07:05.040 回答
2

以纯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')
}

这就是那个请求。

于 2017-10-26T18:28:35.590 回答
1

您可以使用e.preventDefault()which 将停止当前操作。

比你能做的$("#form").submit();

 $('#form').submit(function (e)
{
    return !!e.submit;
});
if(blabla...)
{...
}
else
{
    $('#form').submit(
    {
        submit: true
    });
}
于 2013-01-17T08:49:27.300 回答