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


103

我有一个表格,提交后,我需要做一些额外的处理才能提交表格。我可以防止默认的表单提交行为,然后进行其他处理(基本上是在调用Google Maps API并向表单中添加一些隐藏字段)-然后我需要提交表单。

有没有一种方法可以“防止默认设置”,然后再有一些“继续默认设置”呢?


Answers:


53

jQuery.one()

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

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

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

one还使用了prevent无限循环,因为此自定义submit事件在第一次提交后被释放。


2
它将在再次单击后提交:(
好奇心

可能您将面临无限循环
Mehrdad HosseinNejad

无限循环,该函数应为.on而非.one
sgvolpe

52

当您将.submit()事件绑定到表单,并且在返回(true)之前完成了您想做的事情时,这些事情会在实际提交之前发生。

例如:

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

简单的例子

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


2
您是说直到“ return true”之前的所有代码都不会提交表单;语句执行了吗?
developarvin

2
是的,这正是submit()函数的作用。
罗恩·范德

8
这不是一个好例子,因为它是同步的。如果我需要做的事情是异步调用怎么办?因此,案例是“单击提交->做异步操作,不要提交表单->在异步回调中填写表单中的某些字段->从回调中提交表单”
The Godfather

1
怎么样运行一些异步jQuery代码?也会工作吗?
烛台2016年

这对我来说很棒。我用它来控制提交前的事情,如果事情不对,我使用“ return false”。我已经寻找这种解决方案了一天。非常感谢。
livefreeor

26

我会做:

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

如果您只需要提交表单preventDefault,请先调用 并submit()稍后使用函数


不要在点击事件处理程序中涉及逻辑。将其委托给他人负责。
罗伊·纳米尔

27
假设确定会单击一个按钮。如果用户只是从表单中单击“输入”按钮怎么办?那也将提交表格。因此,依靠单击提交按钮可能不是一个好主意。
StackOverflowNewbie 2013年

我只是举一个点击的例子...因为这个问题上没有提到相关的代码....
bipen 2013年

2
无论如何,您提供的摘录仅在用户单击按钮时才起作用。表单不是这样工作的。还有其他建议吗?
StackOverflowNewbie 2013年

绑定点击,防止其默认设置,并触发提交按钮点击
Candlejack

18

使用这种方式,您将对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.

希望对您有所帮助!谢谢!



@bjornmelgaard我必须记住,异步是非标准的
Valerio Bozz

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

而已。


1
好答案!我不知道您可以向.trigger()传递一个额外的参数
James Hibbard

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

  // Do some stuff here
  ...

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

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将以下代码段中的variable 值更改为truefalse测试功能:

$('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>

祝好运...


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

就是请求


1

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

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

 $('#form').submit(function (e)
{
    return !!e.submit;
});
if(blabla...)
{...
}
else
{
    $('#form').submit(
    {
        submit: true
    });
}

这对我来说很混乱。
dapidmini

1

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

我只想在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();

   });
});
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.