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

我有一个表单,当提交时,我需要做一些额外的处理之前,它应该提交表单。我可以防止默认的表单提交行为,然后进行额外的处理(基本上就是调用 Google Maps API 并向表单添加一些隐藏字段)——然后我需要提交表单。

有没有一种方法可以“防止违约”,然后在某个时候“继续违约?”

190510 次浏览

我会这么做:

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

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

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

比你能做的还多

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

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

例如:

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

举个简单的例子

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

使用这种方式,您将在 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()

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

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


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

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

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

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


});
});

以纯 Javascript 的方式,您可以在阻止默认值之后提交表单。

这是因为 HTMLFormElement.submit()。所以我们依赖于这个奇怪的规范来提交表单,就好像它在这里没有一个自定义的 on 提交处理程序一样。

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. 让我们添加到每个按钮,我们想要一个“你确定”弹出一个警告文本:

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

就是这样。

随着 jQuery和@Joepreludian 上面回答的一个小变化:

要记住的重点是:

  • 取而代之的是 .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变量的值更改为 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>

祝你好运..。

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


// Do some stuff here
...


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