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

Question

[losso_lapolososso]

Здравствуйте, мне при успешной отправке формы на почту нужно, чтобы всплывало модальное окно, как это сделать на ajax.
вот форма:

<div class="message"></div>
				<div class="form">
					<div class="in">
						<input type="text" name="name" id="user_name" placeholder="Ваше имя*"><br>
						<input type="text" name="name" id="user_phone" placeholder="Ваш телефон*"><br>
						<input type="text" name="name" id="user_email" placeholder="Ваш email*"><br>
						<input type="text" name="name" id="user_town" placeholder="Ваш город*"><br>
					</div>
					<div class="modalPar">
						<p>Нажимая на кнопку «Получить презентацию», Вы подтверждаете, что ознакомились с <a href="">Политикой конфиденциальности.</a></p>
					</div>
					<div class="button" id="btn_submit">
						<a>Получить презентацию</a>
						<i class="fa fa-long-arrow-right" aria-hidden="true"></i>
					</div>
				</div>

вот ajax:

$('#btn_submit').click(function(){
                // собираем данные с формы
                var user_name    = $('#user_name').val();
                var user_email   = $('#user_email').val();
                var user_phone = $('#user_phone').val();
                var user_town = $('#user_town').val();
                // отправляем данные
                $.ajax({
                    url: "action.php", // куда отправляем
                    type: "post", // метод передачи
                    dataType: "json", // тип передачи данных
                    data: { // что отправляем
                        "user_name":    user_name,
                        "user_email":   user_email,
                        "user_phone":   user_phone,
                        "user_town":    user_town 
                    },
                    // после получения ответа сервера
                    success: function(data){
                        $('.message').html(data.result); // выводим ответ сервера
                    }
                });
            });

вот php:

<?php
    $msg_box = ""; // в этой переменной будем хранить сообщения формы
    $errors = array(); // контейнер для ошибок
    // проверяем корректность полей
    if($_POST['user_name'] == "")    $errors[] = "Поле 'Ваше имя' не заполнено!";
    if($_POST['user_email'] == "")   $errors[] = "Поле 'Ваш e-mail' не заполнено!";
    if($_POST['user_phone'] == "") $errors[] = "Поле 'Ваш номер телефона' не заполнено";
    if($_POST['user_town'] == "") $errors[] = "Поле 'Ваш город' не заполнено";
 
    // если форма без ошибок
    if(empty($errors)){     
        // собираем данные из формы
        $message  = "Имя пользователя: " . $_POST['user_name'] . "<br/>";
        $message .= "E-mail пользователя: " . $_POST['user_email'] . "<br/>";
        $message .= "Телефон пользователя: " . $_POST['user_phone'] . "<br/>";
        $message .= "Город пользователя: " . $_POST['user_town'] . "<br/>";
        send_mail($message); // отправим письмо
        // выведем сообщение об успехе
        $msg_box = "<span style='color: green;'>Сообщение успешно отправлено!</span>";
    }else{
        // если были ошибки, то выводим их
        $msg_box = "";
        foreach($errors as $one_error){
            $msg_box .= "<span style='color: red;'>$one_error</span><br/>";
        }
    }
 
    // делаем ответ на клиентскую часть в формате JSON
    echo json_encode(array(
        'result' => $msg_box
    ));
     
     
    // функция отправки письма
    function send_mail($message){
        // почта, на которую придет письмо
        $mail_to = "[e-mail]"; 
        // тема письма
        $subject = "Письмо с обратной связи";
         
        // заголовок письма
        $headers= "MIME-Version: 1.0\r\n";
        $headers .= "Content-type: text/html; charset=utf-8\r\n"; // кодировка письма
        $headers .= "From: Тестовое письмо <[e-mail]>\r\n"; // от кого письмо
         
        // отправляем письмо 
        mail($mail_to, $subject, $message, $headers);
    }
     
?>

Comments

[Дмитрий]

Добрый день.
Форму оформите как положено, с использованием тега form.

<form id='form'>
<!-- остальной код формы -->
</form>

Данный с формы проще собрать так

$('#btn_submit').click(function(){
                // собираем данные с формы
               var dataForm = $('#form').serialize()
                // отправляем данные
                $.ajax({
                    url: "action.php", // куда отправляем
                    type: "post", // метод передачи
                    dataType: "json", // тип передачи данных
                    data: dataForm,
                    // после получения ответа сервера
                    success: function(data){
                        $('.message').html(data.result); // выводим ответ сервера
                    }
                });
            });
}

Здесь получить ответ сервера и показать в модальном окне. Модальное окно может быть скрыто при помощи css, как только добавляется ответ при помощи того же css модальное окно показывается на сайте.

success: function(data){
                        $('.message').html(data.result); // выводим ответ сервера
                    }

Answer 1

[Надим]

Для начала сверстайте само модальное окно - ведь нельзя вывести то, чего нет. В интернете полно примеров модальных окон. Функцию для вызова модального окна пихайте внутрь success, на этом все.

P. S. Если вам лень верстать модальное окно, то тогда берите что-то готовое, например AlertifyJS здесь подойдёт.

Comments

[losso_lapolososso]

Спасибо большое, модальное окно уже готово

[Надим]

losso_lapolososso, тогда просто замените функцию:
$('.message').html(data.result);
На вызов своего модального окна. Или допишите вызов после него.