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

Question

[UncleMisha]

Суть такая: у меня есть две формы:
Форма №1

<form enctype="multipart/form-data" method="post" id="form1">
						<h1>Заказать бесплатный звонок</h1>
						<p>заполните форму и мы перезвоним вам в течение 5 мин</p>
						<input type="hidden" name="form_subject" value="Клиент заказал бесплатный звонок">
						<input type="hidden" name="source" value="<?php echo isset($_GET['utm_source']) ? $_GET['utm_source'] : '' ;?>" />
						<input type="hidden" name="medium" value="<?php echo isset($_GET['utm_medium']) ? $_GET['utm_medium'] : '' ;?>" />
						<input type="hidden" name="campaign" value="<?php echo isset($_GET['utm_campaign']) ? $_GET['utm_campaign'] : '' ;?>" />
						<input type="hidden" name="content" value="<?php echo isset($_GET['utm_content']) ? $_GET['utm_content'] : '' ;?>" />
						<input type="hidden" name="term" value="<?php echo isset($_GET['utm_term']) ? $_GET['utm_term'] : '' ;?>" />
						<input type="text" name="name" placeholder="Ваше имя" required><br>
						<input type="text" name="phone" placeholder="Контактный телефон"><br>
						<button type="submit" class="btn btn-success">Заказать бесплатный звонок</button>
					</form>

Форма №2

<form enctype="multipart/form-data" method="post" id="form2">
						<h1>Заполните форму</h1>
						<p>и скачайте планировку квартир за 1 минуту</p>
						<input type="hidden" name="form_subject" value="Клиент скачал презентацию">
						<input type="hidden" name="source" value="<?php echo isset($_GET['utm_source']) ? $_GET['utm_source'] : '' ;?>" />
						<input type="hidden" name="medium" value="<?php echo isset($_GET['utm_medium']) ? $_GET['utm_medium'] : '' ;?>" />
						<input type="hidden" name="campaign" value="<?php echo isset($_GET['utm_campaign']) ? $_GET['utm_campaign'] : '' ;?>" />
						<input type="hidden" name="content" value="<?php echo isset($_GET['utm_content']) ? $_GET['utm_content'] : '' ;?>" />
						<input type="hidden" name="term" value="<?php echo isset($_GET['utm_term']) ? $_GET['utm_term'] : '' ;?>" />
						<input type="text" name="name" placeholder="Ваше имя" required><br>
						<input type="text" name="phone" placeholder="Контактный телефон" required><br>
						<button type="submit" class="btn btn-success">Скачать презентацию</button>
						<p style="padding-top: 30px;"><span style="border-bottom: 1px solid #000;">328</span> человек скачали презентацию планировок</p>
					</form>

И JS:

$('form').trigger('reset');
				$(function() {
					'use strict';
					$('form').on('submit', function(e) {
						e.preventDefault();
						alert('Наш менеджер в скором времени свяжется с вами!');
						$.ajax({
							url: 'send.php',
							type: 'POST',
							contentType: false,
							processData: false,
							data: new FormData(this),
							success: function(msg) {
								console.log(msg);
								if (msg == 'ok') {

          $('#form').trigger('reset'); // очистка формы
        } else {
        	alert('Ошибка');
        }
      }
    });
					});
				});

Теперь вопрос обработчик берет все формы с сайта $('form').trigger('reset'); и после нажатия на кнопку submit выдает данное сообщение

alert('Наш менеджер в скором времени свяжется с вами!');

. Вопрос: как сделать так, что-бы после заполнения формы у каждой формы открывался свой popap? Допустим заполнил форму "id="form1" и открылся ".popap1", а если заполнил форму "id="form2" то открылся ".popap2".

Comments

[Stalker_RED]

Алерт блокирует отправку формы. Пока его не закроют форма не отправится.
Если пользователь увидев "наш менеджер свяжется" закроет вкладку, то отправки вообще не будет.

Вот там где у вас console.log(msg); проверьте какая из форм была отправлена и покажите нужный попап.

[UncleMisha]

Stalker_RED, Вы правы. Но передача сообщения идет аж 7-8 секунд. Перерыл кучу документации все говорят проблема с smpt но и там все проверил все ок не знаю как исправить. Вы мне прям задачу поставили) Спасибо.

[Stalker_RED]

UncleMisha, можно показывать сразу после отправки, не дожидаясь success.
Но в случае глюка на стороне сервера все равно будет обман:)

Answer 1

[Никита Ермиличев]

$('form').trigger('reset');
        $(function() {
          'use strict';
          $('form').on('submit', function(e) {
            e.preventDefault();
            alert('Наш менеджер в скором времени свяжется с вами!');

            var popupClass = $(this).attr('id').replace('form', 'popup');

            $.ajax({
              url: 'send.php',
              type: 'POST',
              contentType: false,
              processData: false,
              data: new FormData(this),
              success: function(msg) {
                console.log(msg);
                if (msg == 'ok') {
                    console.log('Нужный класс попапа: ' + popupClass);
                    $('#form').trigger('reset'); // очистка формы
        } else {
        	alert('Ошибка');
        }
      }
    });
          });
        });

Answer 2

[Alams Stoyne]

$('form').trigger('reset');
        $(function() {
          'use strict';
          $('form').on('submit', function(e) {
            e.preventDefault();
if($(this).attr('id') == 'form1'){alert('Наш менеджер в скором времени свяжется с вами form1!');}
if($(this).attr('id') == 'form2'){alert('Наш менеджер в скором времени свяжется с вами form2!');}
            $.ajax({
              url: 'send.php',
              type: 'POST',
              contentType: false,
              processData: false,
              data: new FormData(this),
              success: function(msg) {
                console.log(msg);
                if (msg == 'ok') {

          $('#form').trigger('reset'); // очистка формы
        } else {
        	alert('Ошибка');
        }
      }
    });
          });
        });

Comments

[UncleMisha]

А если нужно отправить на страницу благодарности? Допустим "spasibo.html" то как и где правильно указать window.location.href = "spasibo.html" Я указывал так:

$('form').on('submit', function(e) {
window.location.href = "spasibo.html"
)};

Но не работало (((

[Stalker_RED]

UncleMisha, а у вас вообще генерируется событие submit? ajax отправка его не генерирует.
Ну и логичто было бы преключать страницу только после отправки, а не сразу.

[UncleMisha]

Stalker_RED, Разобрался))) Открывает сразу и на почту заявка падает.

[UncleMisha]

Stalker_RED, Вы хотите что бы я сделал так:

$('form').trigger('reset');
				$(function() {
					'use strict';
					$('form').on('submit', function(e) {
						e.preventDefault();
						$.ajax({
							url: 'send.php',
							type: 'POST',
							contentType: false,
							processData: false,
							data: new FormData(this),
							success: function(msg) {
								console.log(msg);
								if (msg == 'ok') {
									window.location.href = "spasibo.html";
          $('#form').trigger('reset'); // очистка формы
        } else {
        	alert('Ошибка');
        }
      }
    });
					});
				});

Но отправка формы идет аж 7-8 секунд посмотрите сами. Клиент столько ждать не будет или на оборот сто раз нажмет на кнопку скачать, что в итоге засрет почтовый ящик.

[Stalker_RED]

UncleMisha, нет, success вызывается при получении ответа с сервера, а не сразу после отправки.
Можно послушать readyState и уже на уровне loading показывать попап.
Данные в этот момент уже будут отправлены, но ответ еще не получен.