jQuery - запретить по умолчанию, затем продолжить по умолчанию
У меня есть форма, которая при отправке требует дополнительной обработки перед отправкой формы. Я могу предотвратить поведение при отправке формы по умолчанию, затем выполнить дополнительную обработку (это в основном вызов API Google Maps и добавление нескольких скрытых полей в форму), а затем мне нужно отправить форму.
Есть ли способ "предотвратить дефолт", а потом "продолжить дефолт"?
9 ответов
Использование jQuery.one()
Присоедините обработчик к событию для элементов. Обработчик выполняется не более одного раза для каждого элемента для каждого типа события
$('form').one('submit', function(e) {
e.preventDefault();
// do your things ...
// and when you done:
$(this).submit();
});
Он делает то, что вы хотите, и вам не нужно беспокоиться о множественной отправке.
Когда вы связываете .submit() событие в форме, и вы делаете то, что вы хотите сделать, прежде чем вернуть (true), эти вещи происходят до фактического представления.
Например:
$('form').submit(function(){
alert('I do something before the actual submission');
return true;
});
Другой пример на jquery.com: http://api.jquery.com/submit/
Я бы просто сделал..
$('#submiteButtonID').click(function(e){
e.preventDefault();
//do ur stuff.
$('#formId').submit();
});
вызов preventDefault сначала и использовать submit() функция позже.. если вам просто нужно отправить форму
$('#myform').on('submit',function(event){
// block form submit event
event.preventDefault();
// Do some stuff here
...
// Continue the form submit
event.currentTarget.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.
Я надеюсь, что это помогает! Спасибо!
ИМХО, это наиболее общее и надежное решение (если ваши действия инициируются пользователем, например, "пользователь нажимает кнопку"):
- при первом вызове обработчика проверки ВОЗ его запустила:
- если пользователь пометил его - делайте свое дело, а затем запускайте его снова (если хотите) - программно
- в противном случае - ничего не делать (= "продолжить по умолчанию")
В качестве примера обратите внимание на это элегантное решение для добавления "Вы уверены?" всплыть на любую кнопку, просто украсив кнопку с атрибутом. Мы условно продолжим поведение по умолчанию, если пользователь не откажется.
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 = true; // `true` or `false` condition
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!" />
</form>Удачи...
"Проверка правильности внедрения без отправки цикла":
Я просто хочу проверить 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();
});
});
В чистом виде Javascript вы можете отправить форму после предотвращения по умолчанию.
Это потому что HTMLFormElement.submit() никогда не называет 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
});
}