Как сделать так, чтобы ajax окно после отправки письма открыло другое окно?

Question

[Константин]

Есть файл send.php

<?php
$name = $_POST['name'];
$tel = $_POST['tel'];

$name = htmlspecialchars($name);
$tel = htmlspecialchars($tel);

$name = urldecode($name);
$tel = urldecode($tel);

$name = trim($name);
$tel = trim($tel);

if (mail("почта@yandex.ru", "Заказ обратного звонка", "Имя:".$name.". Телефон: ".$tel ,"From: почта@yandex.ru \r\n"))
 {     echo "сообщение успешно отправлено"; 
} else { 
    echo "при отправке сообщения возникли ошибки";
}?>

Есть форма отправки

<div class="popup-blank" data-popup-id="request-call">
              <div class="popup-blank__title">Заказ обратного звонка</div>
              <div class="popup-blank__descr"><p>Укажите свои контактные данные и&nbsp;удобное время для связи, чтобы мы&nbsp;позвонили вам и&nbsp;рассказали нужную информацию.</p></div>
              <form class="popup-blank__form form" action="/php/send.php" method="POST" data-ya_type="zvonokniz">
                <div class="form-item">
                  <label class="form-item__name" for="name">Имя</label>
                  <input class="form-item__field ym-record-keys" type="text" name="name" placeholder="Ваше имя" id="name" data-xp="required: true">
                </div>
                <div class="form-item">
                  <label class="form-item__name" for="tel">Телефон</label>
                  <input class="form-item__field ym-record-keys" type="tel" name="tel" placeholder="Ваш телефон" id="tel" autocomplete="new-password" data-xp="type: 'phone', required: true">
                </div>
        <div class="popup-blank__submit">
          <div class="g-recaptcha" id="rct3"></div>
        </div>
        <div class="popup-blank__submit">
                  <input class="btn btn_sexy btn_size_large" value="Заказать звонок" type="submit" data-xp="enabled_on_completed: true, type: 'submit'">

                  <div class="form_policy">Нажимая кнопку «Заказать звонок», я соглашаюсь с условиями <a href="/policy.pdf" target="_blank" rel="nofollow">Политики&nbsp;конфиденциальности</a></div>
                </div>
              </form>
            </div>

Нужно, чтобы после отправки, открывалось данное окно.

<div class="popup-blank" data-popup-id="send-form">
              <div class="popup-blank__title"></div>
              <div class="popup-blank__descr"></div>
              <div class="popup-blank__social">
                <div class="popup-blank__social-descr">Новые идеи для оформления кухни в&nbsp;наших официальных сообществах:</div>
                <div class="popup-blank__social-link">
                  <a href="//vk.com/" target="_blank"><i data-dynamic="icn-logo-vk"></i><span>ВКонтакте</span></a>
                  <a href="//instagr.am/" target="_blank"><i data-dynamic="icn-insta-v2"></i><span>Инстаграм</span></a>
                </div>
              </div>
            </div>

По факту, просто отправляется письмо. Страница не перезагружается и окно не закрывается. Но письмо приходит.
Шаблон сайта стянул.

Answer 1

[Хороший UI]

Вам надо узнать какая функция отвечает за закрытие\открытие модальных окон (либо написать её самому), далее найти в js файлах примерно следующие строки (что то похожее у вас должно быть, форма отправки ajax)

И подставить нужные функции

function sendForm() {
    var msg = $('form').serialize();
    $.ajax({
        type: 'POST',
        url: '/send.php',
        data: msg,
        success: function(data) {
            // Сюда подставить функцию закрытия текущего попап и потом открытия нужного
        },
        error:  function(xhr, str){
            alert('Возникла ошибка: ' + xhr.responseCode);
        }
    });
}

Comments

[Константин]

В JS да и вообще я слаб.
Понравился дизайн. Решил сделать под себя. Скопировал.

Нашел такой код.

endy.run(endy.footer);
var endy = endy || {};
endy.form = {
	send: function(e) {
		var t = this,
			i = $(e),
			a = {},
			s = i.attr("method").toLowerCase(),
			n = i.attr("action");
		i.find("input:not([type=button]):not([type=submit]), textarea").each(function(e, t) {
			("radio" == $(t).attr("type") && "checked" == $(t).attr("checked") || "radio" != $(t).attr("type")) && (a[$(t).attr("name")] = $(t).val())
		}), s && "post" != s ? "get" == s && $.get(n, a, function(e) {
			t.test(i, e)
		}) : $.post(n, a, function(e) {
			t.test(i, e)
		})
	},
	test: function(e, t) {
		var i = this;
		try {
			t = $.parseJSON(t)
		} catch (a) {
			a && console.log(a), i.error(e, t)
		} finally {
			switch (t.type) {
				case "success":
					i.success(e, t);
					break;
				default:
					i.error(e, t)
			}
		}
	},
	success: function(e, t) {
		endy.popup.openAction("send-form");
		var i = endy.popup.el.blank.filter("[data-popup-id=send-form]");
		t.title && i.find(".popup-blank__title").html(t.title), t.descr && i.find(".popup-blank__descr").html(t.descr);
		var a = $(e).attr("data-ya_type");
		a && _yaCounter.reachGoal(a);
		_gaq.push(['_trackEvent', 'Forms', a]);
	},
	error: function(e, t) {
		t.title ? alert(t.title) : console.log(t)
	},
	init: function() {
		var e = this;
		$(document).on("submit", "form.form", function() {
			return e.send(this), !1
		}), expromptum(), $("input[type=tel]").mask("[phone]")
	}
}, endy.run(endy.form), endy.formTime = {
	itemClass: "form-item__time-change-item",
	activeClass: "form-item__time-change-item_active",
	init: function() {
		var e = this;
		$(document).on("click", "." + this.itemClass, function(t) {
			if (!$(this).hasClass(e.activeClass)) {
				$("." + e.activeClass).removeClass(e.activeClass), $(this).addClass(e.activeClass);
				var i = $(this).parent().parent().next();
				i.css("display", "show" == $(this).attr("data-type") ? "table" : "none"), $(this).parent().next().val("show" == $(this).attr("data-type") ? "0" : "1"), t.preventDefault()
			}
		})
	}
}