JS событие отправки формы

В Тильде заложены определенные event события, которые позволяют отслеживать открытие попапов, изменения суммы корзины и прочее. В этой статье мы рассмотрим одно из этих событий

Введение

При отправке любой формы обычно срабатывает событие submit , оно обычно используется для проверки формы перед её отправкой или для предотвращения отправки с целью переработать определенные поля с последующей отправкой. В тильде данное событие не срабатывает, в документации достаточно сложно написано для новичка, поэтому распишу более подробно здесь

Как бы мы прослушали обычную форму пример на JavaScript

const elementForm = document.querySelector('form');
elementForm.addEventListener('submit', function(e) {
  e.preventDefault(); // Остановить форму от посылки на сервер
  // Ваш код
  console.log('happened');
});

Пример на jQuery

const elementForm = $('form');
elementForm.on('submit', function(e) {
  e.preventDefault(); // Остановить форму от посылки на сервер
  // Ваш код
  console.log('happened');
});

Для чего это нужно

Вообще идей куча из того что я использовал или придумал

• Запретить заказывать второй раз если уже заказал что то
• Отправка цели если человек выбрал оплату на сайте и не оплатил
• Отправка данных на свой скрипт
• Отправка целей в зависимости от того как форма заполнена

Код на чистом JS

if (document.readyState !== 'loading') {
    beforeSend();
  } else {
    document.addEventListener('DOMContentLoaded', beforeSend);
  }
  
function beforeSend() {
      document.querySelector('#form650111004').addEventListener('tildaform:aftersuccess', function() {
        console.log('Отправлено')
      })
  }

form650111004 – id формы, посмотреть можно в коде, в теге form

Код на jQuery

$(document).ready(function(){
      $('#form650111004').on('tildaform:aftersuccess', function() {
          console.log('Отправлено jQuery')
      })
  })

Заключение

Как видите взаимодействовать с кодом тильды достаточно просто и удобно. Умение пользоваться данным функционалом оттягивает вас или вашего клиента переезд на другую более управляемую платформу на долгие годы ну или совсем навсегда

Что бы закрепить материал посмотрите видео в начале статьи

ВК: https://vk.com/lllyx

Инста: https://www.instagram.com/lllyx1/

Канал в телеграмме: https://t.me/+qGa5iG60EDNiZTE6