Редирект после отправки письма с конкретной формы?

Question

[Mesuti]

Привет!
Есть html страница (Песочница jsFiddle)
На ней есть:
- несколько кнопок на одну всплывающую форму обратной связи (товары) С кнопок при нажатии берется value и прописывается в скрытое поле формы.
- просто отдельная форма обратной связи.

Отправка писем обрабатываются одним Ajax скриптом:

Spoiler

$(document).ready(function() {
            $("form").submit(function() {
                var $cfsubmit = $("#cfsubmit"),
                    cfsubmitText = $cfsubmit.text();
                var th = $(this);
                $.ajax({
                    type: "POST",
                    url: "contact-form/mail.php",
                    data: th.serialize()
                }).done(function() {
                    notie.alert({
                        type: 1,
                        text: 'Отправлено! Мы свяжемся с Вами',
                        time: 3
                    });
                    setTimeout(function() {
                        th.trigger("reset");
                    }, 1000);
                });
                return false;
            });             
        });

С кнопок на всплывающую форму берется value и прописывается в форму этим скриптом:

Spoiler

(function() {
    function buttonClick() {
      document.getElementById("buttonInfo").value = this.value;
    }
    var buttons = document.querySelectorAll("#item");
    for (var i = 0; i < buttons.length; i++) {
      buttons[i].addEventListener("click", buttonClick);
    }
  })();

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

p.s. Ищу варианты с onclick на кнопку и без onclik (прописывается в скрипте по id)
p.p.s window.location.href = 'your_url'; после триггера будет работать вообще для всех форм. А нужно настраиваемый вариант о вызову кнопки

Answer 1

[Антон Спирин]

У вас после отправки всплывает нотификация, а затем через секунду по таймауту срабатывает триггер reset можно написать редирект в таймаут:

setTimeout(function() {
  th.trigger("reset");  // удалить если не нужен
  window.location.href = 'your_url';
}, 1000);

Comments

[Mesuti]

Спасибо. Однако, этот вариант будет направлять вообще все формы.
А нужно в зависимости от настроек кнопки.
Кнопок несколько

[Антон Спирин]

Александр Сорокин, ну так перепишите метод. В чем проблема? Делайте сабмит не по 'submit', а по 'click'.
И в зависимости например от атрибута кнопки делаете редирект:

setTimeout(function() {
  if ($(e.target).data('redirect')) {
     window.location.href = 'your_url';
  } else {
    th.trigger("reset"); 
  }
}, 1000);

<button data-redirect=true>Send form</button>

[Mesuti]

Антон Спирин, спасибо! Подскажете, как будет выглядеть вариант, когда кнопке прописывается url ? чтобы разные редиректы можно было делать

[Антон Спирин]

Александр Сорокин,

<button data-redirect=true data-url="your_url">Send form</button>

[Антон Спирин]

Александр Сорокин, надо протокол указывать:
data-url="http://www.yandex.ru"

[Mesuti]

Антон Спирин, все равно не работает.
Подскажете, может быть не подходит метод?
Кнопка

<button data-redirect="true" data-url="http://yandex.ru">ОТПРАВИТЬ</button>

Обработка

$(document).ready(function() {
            $("form").submit(function() {
                var $cfsubmit = $("#cfsubmit"),
                    cfsubmitText = $cfsubmit.text();
                 $cfsubmit.html('<i class="far fa-paper-plane"></i> ОТПРАВКА');
                var th = $(this);
                $.ajax({
                    type: "POST",
                    url: "contact-form/mail.php",
                    data: th.serialize()
                }).done(function() {
                    notie.alert({
                        type: 1,
                        text: 'Отправлено! Мы свяжемся с Вами',
                        time: 3
                    });
                    $cfsubmit.html('<i class="far fa-envelope"></i> ОТПРАВИТЬ');
                    setTimeout(function() {

// Редирект обработчик
                  if ($(e.target).data('redirect')) {
                     window.location.href = button.getAttribute('data-url');
                  } else {
                    th.trigger("reset"); 
                  }
                }, 1000);
                });
                return false;
            });             
        });

[Антон Спирин]

Александр Сорокин, надо заменить:
$("form").submit(function() {
на
$(".buttonClass").click(function(e) {
где .buttonClass класс ваших кнопок которые будут отправлять форму.
строку:
button.getAttribute('data-url');
так же надо заменить на:
$(e.currentTarget).data('url');

[Mesuti]

Спасибо за столь полный ответ!
Тема полностью решена.

Answer 2

[Александр Талалаев]

Http-редирект реализуется так:
window.location.replace("https://ya.ru");
Поэтому пиши все свои обработчики, проверки и тп, а затем перенаправляй на нужно тебе страницу.

Comments

[Mesuti]

Спасибо. Однако, этот вариант будет направлять вообще все формы.
А нужно в зависимости от настроек кнопки.
Кнопок несколько

[Александр Талалаев]

Александр Сорокин, ну так я ж написал после всех проверок и условий. Ты же дал полное ТЗ, я думаю логику и проверку условий ты уж сам напишешь. Хранить атрибуты можешь в доп полях у html элемента, даже той же кнопки условно: data-redirect=true, подобным образом и урл для редиректа можешь хранить, а далее уже получаешь эти значения и на основе условий делаешь или не делаешь редирект.