Как с помощью JavaScript после первой отправки можно сделать кнопку отправки disabled?

Question

[Gambi Titto]

document.addEventListener("DOMContentLoaded", function(){
  /*****************************************************************/
  document.getElementById('feedback-form').addEventListener('submit', function(evt){
    var http = new XMLHttpRequest(), f = this;
    evt.preventDefault();
    http.open("POST", "contacts.php", true);
    http.onreadystatechange = function() {
    if (http.readyState == 4 && http.status == 200) {
        alert(http.responseText); // это лучше убрать, чтобы сразу переадресация была, без ожидания пока пользователь нажмет кнопку "OK" 
        window.location.replace("https://www.site.ru");
      }
    }
    http.send(new FormData(f));
  }, false);
  /*****************************************************************/
            var form = document.querySelector('.needs-validation');
        form.addEventListener('submit', function(event) {
            if (form.checkValidity() === false) {
                event.preventDefault();
                event.stopPropagation();
            }
            form.classList.add('was-validated');
        })
/******************************************************************/
$(".custom-file-input").on("change", function() {
  var fileName = $(this).val().split("\\").pop();
  $(this).siblings(".custom-file-label").addClass("selected").html(fileName);
});
/*****************************************************************/
});

Answer 1

[Павел Диденко]

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

Самый простой способ - выведите сообщение-статус в форме. Если форма ушла успешно - выведите "Бла-бла-бла успешно" и задайте какой-нибудь класс "bla-lba__success", если нет - "bla-lba_failure". Дальше проверяйте через JS, если сообщение статус "успешно" есть - дизейблите кнопку, если нет - дайте возможность отправить еще раз.

Код отправки видимо не ваш? У вас там прямая подсказка - после валидации формы вешается класс. Что мешает таким же макаром повесить класс после статуса 200 ОК? А перед отправкой просто проверять - если класс есть return, если нет - выполнить

Comments

[Gambi Titto]

Код отправки видимо не ваш? У вас там прямая подсказка - после валидации формы вешается класс. Что мешает таким же макаром повесить класс после статуса 200 ОК? А перед отправкой просто проверять - если класс есть return, если нет - выполнить

Покажи на примере...

[Павел Диденко]

Gambi Titto, а напрячь извилины?

Вот строка кода:

form.addEventListener('submit', function(event) {
            if (form.checkValidity() === false) {
                event.preventDefault();
                event.stopPropagation();
            }
            form.classList.add('was-validated');
        })

Конкретно эта строка говорит тебе: "При отправке формы повесь ей класс 'was-validated'"
form.classList.add('was-validated');

Вот это условие говорит "Если форма успешно отправлена....":

if (http.readyState == 4 && http.status == 200) {};

Вот внутри этого условия так же повесь какой-нибудь класс, .form-success например. И добавь проверку, что если такой класс висит - ничего не делать.

[Gambi Titto]

Павел Диденко, спасибо, хорошо объясняешь))

[Gambi Titto]

Павел Диденко, Покажи пример пожалуйста как добавь проверку, что если какой-та класс висит - ничего не делать.

if (http.readyState == 4 && http.status == 200) {};

внутри этого условия. Буду тебе очень благодарен.

[Павел Диденко]

Ну можно даже и не внутри. Можно добавить условие "&& form.classList.contains('form-already-send')" - оно говорит "и если у формы есть в списке классов нет класса form-already-send".
А внутри самой формы - добавь вот это "form.classList.add('form-already-send')"

if (http.readyState == 4 && http.status == 200 && !form.classList.contains('form-already-send')) {
        alert(http.responseText);
       form.classList.add('form-already-send');
        window.location.replace("https://www.site.ru");
      }

Вот только не забудь, что твой пользователь должен понимать, почему отправка формы не срабатывает. Выводи какое-нибудь сообщение