Приходят много сообщений с формы

115
12 августа 2021, 20:50

При отправке формы аяксом сначала приходит одно сообщение если, если еще раз отправить форму то 3 сообщения и с каждым отправление число отправленных сообщений увеличивается. Вот весь код.Подскажите пожалуйста в чём может быть проблема?

$(document).ready(function() {
for (var i = 0; i < $("#callbackOkModal").find("button").length; i++) { //закрытие окна
$("#callbackOkModal")
  .find("button")
  [i].addEventListener("click", function() {
    $("#callbackOkModal").fadeOut("fast");
    $("#callbackOkModal").removeClass("in");
    $(".modal-backdrop").remove();
  });
}
var ShowPopUp = $(".btn-popup");//получение всех кнопок открытия форм
for (var i = 0; i < ShowPopUp.length; i++)
ShowPopUp[i].addEventListener("click", function() {
  var NameShowForm = $(this).attr("data-popup-name");забираю какую форму открыть
  var IdShowForm = $("#" + NameShowForm);
  $(IdShowForm).before('<div class="modal-backdrop fade in">');
  $(IdShowForm).fadeIn("fast");
  $(IdShowForm).addClass("in");
  $(IdShowForm)[0].addEventListener("click", function(e) {//закрытие формы вне попапа
    var container = $(this);
    if (container.has(e.target).length === 0) {
      $(IdShowForm).fadeOut("fast");
      $(IdShowForm).removeClass("in");
      $(IdShowForm)
        .prev()
        .closest(".modal-backdrop")
        .remove();
    }
  });
  ClosePopUp(IdShowForm.find(".close")[0], $(IdShowForm));//закрытие на элемент
  Send(IdShowForm);
 });
function Send(elem) {//отправка формы
elem.find(".btn-send")[0].addEventListener("click", function() {
  elem.find("form").submit(function() {
    var form = $(this);
    var error = false;
    form.find("input").each(function() {
      if ($(this).val() == "") {
        $(this).addClass("has-error");
        $(this)
          .next()
          .text("");
        $(this)
          .next()
          .append(document.createTextNode("Поле не может быть пустым"));
        error = true;
      } else {
        $(this)
          .next()
          .text("");
        $(this).removeClass("has-error");
      }
    });
    if (!error) {
      var form_data = $(this).serialize();
      $.ajax({
        type: "POST",
        dataType: "html",
        url: "http://flyart.byhelp.by/wp-content/themes/flyart/send.php",
        data: form_data,
        success: function(data, xhr) {
          ShowFormSucess($("#callbackOkModal"));
          elem.fadeOut("fast");
          elem.removeClass("in");
          form.trigger("reset");
        },
        beforeSend: function(data) {
          elem.find(".btn-send").attr("disabled", "disabled");
        },
        error: function(xhr, ajaxOptions, thrownError) {
          console.log(xhr.status);
          console.log(thrownError);
        },
        complete: function(data) {
          elem.find(".btn-send").prop("disabled", false);
        }
      });
    }
    return false;
  });
});
 } function ShowFormSucess(form) {//показ формы при успешной отправке
form.fadeIn("fast");
form.addClass("in");
 } function ClosePopUp(elem, form) {
elem.addEventListener("click", function() {
  form.fadeOut("fast");
  form.removeClass("in");
  form
    .prev()
    .closest(".modal-backdrop")
    .remove();
});
 }});
Answer 1

Дело в том, что когда через addEventListener добавляешь обработчик после того, как ранее его уже добавлял, он не перезаписывается, а добавляется. Таким образом с каждым разом на одно событие одинаковых обработчиков становится все больше.

Попробуй использовать метод removeEventListener перед тем, как добавить обработчик.

READ ALSO
Получение файла по ссылке в javascript

Получение файла по ссылке в javascript

Нужно получить файл таким образом

151
Доступ к DOM при клике на кнопку в меню [Electron]

Доступ к DOM при клике на кнопку в меню [Electron]

Начал работать с электроном, попытался реализовать простой парсер по сайтуИдея: есть окно с сайтом в main

164
Текст в поле Input не появляется

Текст в поле Input не появляется

Пишу калькулятор и столкнулась с проблемой, что текст не выводится при работе скрипта в поле с id summa2

197