В кнопке отправки HTML, как мне отложить отправку с помощью js?
То, что я пытаюсь достичь, выглядит примерно так:
Пользователь нажимает кнопку -> кнопка становится неактивной (и сверху появляется счетчик) -> форма отправляется.
Я пробовал это, и это работает только иногда (внутри кнопки HTML):
onclick = "
this.classList.toggle('button--loading'); // triggers spinner (created in CSS)
this.disabled=true; // disabled button
this.form.submit();" // submits form
Иногда это работает, иногда пропускает запуск счетчика и просто отключает кнопку и после этого отправляет. Я думаю, что реализация задержки после создания счетчика заставит его работать в 100% случаев, но я не могу этого понять.
Обратите внимание, что я совсем новичок в программировании и действительно пытаюсь понять, как все работает. Спасибо!
![Интервьюер: Почему '[] instanceof Object' возвращает "true"?](https://cdn-images-1.medium.com/max/120/0*3Q2LAQJh9HQrdTPK)
Ответы 1
Несколько вещей:
Не используйте встроенные атрибуты HTML-событий, как onclick - - это 25-летняя техника, которая не умрет, потому что люди просто продолжают копировать и вставлять чужой код. Вместо этого используйте современный API .addEventListener().
Далее, click — это неправильное событие для использования с form. Вы должны использовать submit на form.
Наконец, чтобы выполнить то, что вы хотите, вам нужно отменить собственное событие в обработчике submit, использовать таймер, чтобы вызвать задержку, а затем вручную отправить, как только задержка пройдет.
Вот пример:
// Set up the event handler the correct way:
const form = document.querySelector("form");
form.addEventListener("submit", function(event){
// Cancel the event
event.preventDefault();
document.querySelector("button").disabled = true;
// Initiate a 3 second delay with a timer
let timer = setTimeout(function(){
// This function's code will run after the timer's delay
// do watever you want here. This is just an example:
alert("time's up!");
// But, after that, manually subnit the form
form.submit();
}, 3000);
});<form action = "http://example.com" method = "post">
<button>Click to submit</button>
</form>Это фантастические знания! Большое спасибо.
Недостаточно репутации, чтобы проголосовать, но отметить как ответ. Еще раз спасибо!
Использование такого onclick будет беспорядок .. в любом случае вы можете попробовать использовать setTimeout, передавая код для выполнения в качестве обратного вызова. Вы можете найти множество предложений как на мероприятии click, так и setTimeout здесь, на SO.