Как сделать уведомление после отправки формы из всплывающего окна?

Question

[lakalov]

У меня есть всплывающая форма, с помощью которой обрабатывается обработчик mail.php.

<div class="popup__shadow">
        <div class="cards__intro4">
            <div class="container">
                <div class="container">
                    <div class="popups__inner">
                        <div class="popup callme__popup">
                            <a class="close__popup">x</a>
                            <h3>Перезвоните мне</h3>
                            <p> Оставьте заявку и мы свяжемся с Вами в ближайшее время</p>
                            <form action="/wp-content/themes/redhat/mail.php" method="post">
                                <input type="text" name="name" placeholder="Ваше имя" >
                                <input type="text" value="+7" name="phone" >

                                <input type="submit" value="Отправить" >
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

JS

const bookButton = document.querySelectorAll(".btn--peru"),
      popUpWindow = document.querySelector(".popup__shadow"),
      closePopUp = document.querySelector(".close__popup"),
      popUp = document.querySelector(".popup");


bookButton.forEach(o => {
    o.addEventListener("click", () => {
        popUpWindow.classList.add("active");
    })
});

closePopUp.addEventListener("click", () => {
    popUpWindow.classList.remove("active");
});

window.addEventListener("click", function (e) {
    if (!popUp.contains(e.target) && popUpWindow.contains(e.target)) {
      popUpWindow.classList.remove('active');
    }
});

css

.popups__inner {
    position: fixed;
    width: 60%;
    display: none; /* changed */
    justify-content: center;
    align-content: center;
    z-index: 1;
    display: flex;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.callme__popup {
    position: relative;
}


.popup {
    width: 400px;
    max-width: 100%;
    margin: 0 auto;
    text-align: center;
    background: #0C2638;
    padding: 40px 70px;
    border-radius: 10px;

}


.popup__shadow {
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1001;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
}

.popup__shadow.active {
    display: flex;
}


.popup input {
    display: block;
    margin: 0 auto 15px;

    width: 250px;
    border: 2px solid #000;
    border-radius: 10px;
    padding: 10px 25px;


}

.popup h3 {
    font-size: 25px;
    text-transform: uppercase;
    font-weight: 600;
    color: #FFFFFF;
}

.popup p {
    padding: 10px 0;
    color: #FFFFFF;
}

.popup form {
    margin-top: 15px;
}

.popup input[type="submit"] {
    margin-bottom: 0;
 }



.close__popup {
    position: absolute;
    top: 17px;
    right: 34px;
    font-size: 27px;
    color: #FFFFFF;
    cursor: pointer;

}

Как мне реализовать всплывающее окно после клика "отправить"? Я пытался сделать вот так

<div class="cards__intro4">
            <div class="container">
                <div class="container">
                    <div class="popups__inner2">
                        <div class="popup2 callme__popup2">
                            <a class="close__popup2">x</a>
                            <h3>Спасибо</h3>
                            <p> Наш менеджер свяжется с Вами в ближайшее время</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

Но не работает, я в кнопку из формы писал класс и делал через querySelector, не получилось.

Сделал через onclick="alert('Форма отправлена');return true;, в целом ок, но стилизовать вроде как это окно нельзя.

Подскажите пожалуйста

Answer 1

[lakalov]

Решено через эту функцию с добалением нового popup окна, который стоит перед 1 окном

$(document).ready(function() {
    $('#form').submit(function() { // проверка на пустоту заполненных полей. Атрибут html5 — required не подходит (не поддерживается Safari)
        if (document.form.name.value == '' || document.form.phone.value == '' ) {
            valid = false;
            return valid;
        }
        $.ajax({
            type: "POST",
            url: "/wp-content/themes/redhat/mail.php",
            data: $(this).serialize()
        }).done(function() {
            $('.js-overlay-thank-you').fadeIn();
            $(this).find('input').val('');
            $('#form').trigger('reset');

        });
        return false;
    });
});

Вдруг кому пригодиться