JQuery - предотвращать дефолт, а затем продолжать по умолчанию
У меня есть форма, которая при отправке мне нужна дополнительная обработка, прежде чем она представит форму. Я могу предотвратить поведение отправки формы по умолчанию, а затем выполнить свою дополнительную обработку (она в основном вызывает API Карт Google и добавляет несколько скрытых полей в форму), а затем мне нужна форма для отправки.
Есть ли способ "предотвратить по умолчанию", затем какой-то пункт "продолжить по умолчанию?"
Ответы
Ответ 1
Когда вы привязываете событие .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
Используйте jQuery.one()
Присоедините обработчик к событию для элементов. Обработчик выполняется не более одного раза для каждого элемента для каждого типа события
$('form').one('submit', function(e) {
e.preventDefault();
// do your things ...
// and when you done:
$(this).submit();
});
Он делает то, что вы хотите, и вам не нужно беспокоиться о множественной отправке.
Ответ 3
Я бы просто сделал.
$('#submiteButtonID').click(function(e){
e.preventDefault();
//do ur stuff.
$('#formId').submit();
});
сначала вызовите preventDefault
и используйте функцию submit()
позже. Если вам просто нужно отправить форму
Ответ 4
Используя этот путь, вы сделаете бесконечную петлю на своем 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 all ok.
$(this).submit();
}
$('form').on('submit', on_submit_function); //Registering on submit.
Надеюсь, это поможет!
Спасибо!
Ответ 5
Это, IMHO, самое универсальное и надежное решение (если ваши действия инициируются пользователем, например, "пользователь нажимает кнопку"):
- при первом вызове обработчика check ВОЗ его запустила:
- если пользователь пометил его - делайте свое дело, а затем запускайте его снова (если хотите) - программно
- в противном случае - ничего не делать (= "продолжить по умолчанию")
В качестве примера обратите внимание на это элегантное решение для добавления "Вы уверены?" всплыть на любую кнопку, просто украсив кнопку с атрибутом. Мы условно продолжим поведение по умолчанию, если пользователь не откажется.
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
});
Это.
Ответ 6
С 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>
Ответ 7
Вы можете использовать e.preventDefault()
, который остановит текущую операцию.
чем вы можете сделать $("#form").submit();
$('#form').submit(function (e)
{
return !!e.submit;
});
if(blabla...)
{...
}
else
{
$('#form').submit(
{
submit: true
});
}
Ответ 8
В чистом виде 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')
}
Вы можете проверить мою скрипту на пример асинхронного запроса.
И если вы не используете promises:
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')
}
И здесь этот запрос.
Ответ 9
"Ввод проверки без конвейера отправки":
Я просто хочу проверить reCaptcha и некоторые другие вещи до проверки HTML5, поэтому я сделал что-то вроде этого (функция validation возвращает 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();
});
});
Ответ 10
$('#myform').on('submit',function(event){
// block form submit event
event.preventDefault();
// Do some stuff here
...
// Continue the form submit
event.currentTarget.submit();
});