У меня есть форма, при отправке которой мне нужно выполнить дополнительную обработку, прежде чем она должна будет отправить форму. Я могу предотвратить отправку формы по умолчанию, затем выполнить дополнительную обработку (в основном это вызов Google Maps API и добавление нескольких скрытых полей в форму), а затем мне нужна форма для отправки.
Есть ли способ «предотвратить дефолт», а затем через некоторое время «продолжить дефолт»?
Ответы:
Использовать jQuery.one()
Прикрепите обработчик к событию для элементов. Обработчик выполняется не более одного раза для каждого элемента для каждого типа события.
$('form').one('submit', function(e) {
e.preventDefault();
// do your things ...
// and when you done:
$(this).submit();
});Использование oneпредотвращения также бесконечный цикл, потому что это настраиваемое 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.Я надеюсь, что это помогает! Спасибо!
Это, IMHO, наиболее универсальное и надежное решение (если ваши действия инициируются пользователем, например, «пользователь нажимает кнопку»):
В качестве примера обратите внимание на это элегантное решение для добавления «Вы уверены?» всплывающее окно для любой кнопки, просто украсив кнопку атрибутом. Мы условно продолжим поведение по умолчанию, если пользователь не откажется.
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
});Вот и все.
$('#myform').on('submit',function(event){
// block form submit event
event.preventDefault();
// Do some stuff here
...
// Continue the form submit
event.currentTarget.submit();
});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>Удачи...
В чистом виде 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')
}И вот эта просьба .
Вы можете использовать, e.preventDefault()который остановит текущую операцию.
чем ты можешь сделать$("#form").submit();
$('#form').submit(function (e)
{
return !!e.submit;
});
if(blabla...)
{...
}
else
{
$('#form').submit(
{
submit: true
});
}«Внедрение валидации без цикла отправки»:
Я просто хочу проверить reCaptcha и некоторые другие вещи перед проверкой HTML5, поэтому я сделал что-то вроде этого (функция проверки возвращает 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();
});
});