@losso_lapolososso

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

Здравствуйте, мне при успешной отправке формы на почту нужно, чтобы всплывало модальное окно, как это сделать на 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 = "mamcenn@gmail.com"; 
        // тема письма
        $subject = "Письмо с обратной связи";
         
        // заголовок письма
        $headers= "MIME-Version: 1.0\r\n";
        $headers .= "Content-type: text/html; charset=utf-8\r\n"; // кодировка письма
        $headers .= "From: Тестовое письмо <no-reply@test.com>\r\n"; // от кого письмо
         
        // отправляем письмо 
        mail($mail_to, $subject, $message, $headers);
    }
     
?>
  • Вопрос задан
  • 2900 просмотров
Решения вопроса 1
@zkrvndm
Софт для автоматизации
Для начала сверстайте само модальное окно - ведь нельзя вывести то, чего нет. В интернете полно примеров модальных окон. Функцию для вызова модального окна пихайте внутрь success, на этом все.

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы