我有一个表单，在提交时，我需要在提交表单之前进行一些额外的处理。我可以阻止默认的表单提交行为，然后进行额外的处理（它基本上是调用 Google Maps API 并向表单添加一些隐藏字段）——然后我需要提交表单。
有没有办法“防止默认”，然后在某个时候“继续默认”？
【问题讨论】：
标签： javascript jquery
使用jQuery.one()
将处理程序附加到元素的事件。每个事件类型的每个元素最多执行一次处理程序
$('form').one('submit', function(e) {
e.preventDefault();
// do your things ...
// and when you done:
$(this).submit();
});
one 的使用也防止了无限循环，因为这个自定义的submit 事件在第一次提交后被分离。
【讨论】：
$(this).unbind(); $(this).submit();
当您将.submit() 事件绑定到表单，并在返回之前执行您想要执行的操作（true）时，这些操作会在实际提交之前发生。
例如：
$('form').submit(function(){
alert('I do something before the actual submission');
return true;
});
jquery.com 上的另一个例子：http://api.jquery.com/submit/#entry-examples
【讨论】：
我会这样做：
$('#submiteButtonID').click(function(e){
e.preventDefault();
//do your stuff.
$('#formId').submit();
});
如果只需要提交表单，请先调用preventDefault，稍后使用submit()函数
【讨论】：
使用这种方式你会在你的 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.
希望对你有帮助！ 谢谢！
【讨论】：
$('#myform').on('submit',function(event){
// block form submit event
event.preventDefault();
// Do some stuff here
...
// Continue the form submit
event.currentTarget.submit();
});
【讨论】：
event.target.submit()
target 或 currentTarget）在工作。
submit
恕我直言，这是最通用和最可靠的解决方案（如果您的操作是用户触发的，例如“用户点击按钮”）：
例如，请注意这个添加“您确定吗？”的优雅解决方案。只需用属性装饰按钮即可弹出任何按钮。 如果用户不选择退出，我们将有条件地继续默认行为。
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 答案的一个小变化：.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>祝你好运……
【讨论】：
“没有提交循环的验证注入”：
我只是想在 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() never calls onSubmit()。所以我们依赖于那个奇怪的规范来提交表单，就好像它在这里没有自定义的 onsubmit 处理程序一样。
var submitHandler = (event) => {
event.preventDefault()
console.log('You should only see this once')
document.getElementById('formId').submit()
}
有关同步请求，请参阅 this fiddle。
等待异步请求完成同样简单：
var submitHandler = (event) => {
event.preventDefault()
console.log('before')
setTimeout(function() {
console.log('done')
document.getElementById('formId').submit()
}, 1400);
console.log('after')
}
您可以查看我的小提琴以获取异步请求的 example。
如果你对承诺感到失望：
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')
}
这里是that request。
【讨论】：
您可以使用e.preventDefault() 来停止当前操作。
你做不到$("#form").submit();
$('#form').submit(function (e)
{
return !!e.submit;
});
if(blabla...)
{...
}
else
{
$('#form').submit(
{
submit: true
});
}
【讨论】：