Как добавить класс кнопке на время после отправки формы?

Question

[Denir0]

Нужно сделать так, чтобы когда кнопка уже отправляла форму ей присваивался класс на 2-3 секунды.
И чтобы она не срабатывала просто при клике. Как на чистом JS можно реализовать подобное?

Comments

[Andrew]

Вы хоть примерный код накидайте, а-то сильно на задание смахивает.
Вешаете обработчик на форму, с превент дефолтом, добавляете класс, далее по сетТаймАут убираете класс.

Answer 1

[Pavlo Zhak]

Наверно как-то так

document.getElementById("sendButton").addEventListener("click", function() {
  //this.classList.add("class_1");
  this.disabled = true;
    
    setTimeout(function() {
        document.getElementById("sendButton").disabled = false;
    }, 3000);
  
});

Comments

[Andrew]

И чтобы она не срабатывала просто при клике

когда кнопка уже отправляла форму ей присваивался класс

[Pavlo Zhak]

Andrew,

И чтобы она не срабатывала просто при клике

имеешь в виду чтобы она не срабатывала при клике на пустой форме или после отправки блокировалась?

[Andrew]

StrangeDev, задание не моё. Кажись, чтобы не срабатывала когда форма не заполнена, поэтому я бы вешал на сабмит.

[Pavlo Zhak]

ну тогда:

document.getElementById("form").addEventListener("submit", function() {
    document.getElementById("button").classList.add("class_1");
    setTimeout(function() {
         document.getElementById("button").classList.remove("class_1");
    }, 3000);
});

+ валидацию

function validateForm() {
    var x = document.forms["myForm"]["fname"].value;
    if (x == "") {
        alert("Name must be filled out");
        return false;
    }
}