Модальное окно формы обратной связи

@leprekon46 · Регистрация: 31.07.2013

Author24 — интернет-сервис помощи студентам

Доброго времени суток. Вот такая проблема есть.
Есть форма отправки данных на e-mail. Расположена она в модальном окне на js. То есть при клике на ссылку (в которой класс указан как class="osx demo") у нас открывается модальное окно, а там форма обратной связи (мыло, имя, телефон, отправить). Проблема в том после отправки окно закрывается. А должно быть в нем же написано, сообщение успешно отправлено, или ошибка о введеных данных.

PHP

<?php 
                    function show_form() 
                    { 
                    ?> 
    
                
                
                
                    
                    <form action="" method=get class="form_pad">
                        <span class="style_3">Ваше имя:</span><br>
                        <input type="text" name="name" class="input_style2"><br>
                        
                        <span class="style_3">E-mail:</span><br>
                        <input type="text" name="email" class="input_style2"><br>
                        
                        <span class="style_3" >Телефон:</span><br>
                        <input type="text" name="tel" class="input_style2"><br>
                        
                        <input type="submit"  class="button" name="submit" value="Отправить">
                        
                    </form>
                    
                    
                    
                    
                    
                    
                    
                    <? 
} 
 
function complete_mail() { 
        $_GET['name'] =  substr(htmlspecialchars(trim($_POST['name'])), 0, 30); 
        $_GET['tel'] =  substr(htmlspecialchars(trim($_POST['tel'])), 0, 30); 
        $_GET['email'] =  substr(htmlspecialchars(trim($_POST['email'])), 0, 50); 
        // если не заполнено поле "Имя" - показываем ошибку 0 
        if (empty($_GET['name'])) 
             output_err(0); 
        // если неправильно заполнено поле email - показываем ошибку 1 
        if(!preg_match("/[0-9a-z_]+@[0-9a-z_^\.]+\.[a-z]{2,3}/i", $_GET['email'])) 
             output_err(1); 
        // если не заполнено поле "Сообщение" - показываем ошибку 2 
        if(empty($_GET['tel'])) 
             output_err(2); 
        // создаем наше сообщение 
        $mess = ' 
        Имя отправителя:'.$_GET['name'].' 
        Контактный телефон:'.$_GET['tel'].' 
        Контактный email:'.$_GET['email']; 
        // $to - кому отправляем 
        $to = 'safonov.vlvl@yandex.ru'; 
        // $from - от кого 
        $from='test@test.ru'; 
        mail($to, $_POST['title'], $mess, "From:".$from); 
        echo 'Спасибо! Ваше письмо отправлено.'; 
} 
 
function output_err($num) 
{ 
    $err[0] = 'ОШИБКА! Не введено имя.'; 
    $err[1] = 'ОШИБКА! Неверно введен e-mail.'; 
    $err[2] = 'ОШИБКА! Не введен телефон.'; 
    echo '<p>'.$err[$num].'</p>'; 
    show_form(); 
    exit(); 
} 
 
if (!empty($_GET['submit'])) complete_mail(); 
else show_form(); 
?>

Javascript

/*
 * SimpleModal OSX Style Modal Dialog
 * [url]http://www.ericmmartin.com/projects/simplemodal/[/url]
 * [url]http://code.google.com/p/simplemodal/[/url]
 *
 * Copyright (c) 2010 Eric Martin - [url]http://ericmmartin.com[/url]
 *
 * Licensed under the MIT license:
 *   [url]http://www.opensource.org/licenses/mit-license.php[/url]
 *
 * Revision: $Id: osx.js 238 2010-03-11 05:56:57Z emartin24 $
 */
 
jQuery(function ($) {
    var OSX = {
        container: null,
        init: function () {
            $("input.osx, a.osx").click(function (e) {
                e.preventDefault(); 
 
                $("#osx-modal-content").modal({
                    overlayId: 'osx-overlay',
                    containerId: 'osx-container',
                    closeHTML: null,
                    minHeight: 80,
                    opacity: 65, 
                    position: ['0',],
                    overlayClose: true,
                    onOpen: OSX.open,
                    onClose: OSX.close
                });
            });
        },
        open: function (d) {
            var self = this;
            self.container = d.container[0];
            d.overlay.fadeIn('slow', function () {
                $("#osx-modal-content", self.container).show();
                var title = $("#osx-modal-title", self.container);
                title.show();
                d.container.slideDown('slow', function () {
                    setTimeout(function () {
                        var h = $("#osx-modal-data", self.container).height()
                            + title.height()
                            + 20; // padding
                        d.container.animate(
                            {height: h}, 
                            200,
                            function () {
                                $("div.close", self.container).show();
                                $("#osx-modal-data", self.container).show();
                            }
                        );
                    }, 300);
                });
            })
        },
        close: function (d) {
            var self = this; // this = SimpleModal object
            d.container.animate(
                {top:"-" + (d.container.height() + 20)},
                500,
                function () {
                    self.close(); // or $.modal.close();
                }
            );
        }
    };
 
    OSX.init();
 
});

@pavlinmavlin · 31.07.2013, 22:41

Для отправки запроса перезагружается страница и окно соответственно исчезает до нового клика по ссылке.
А чтобы страница не перезагружалась - для этого существует Ajax.
Отправка POST запроса без перезагрузки страницы

p.s.
В форме правда указан GET запрос(method=get), можно заменить на method=post, а можно в коде Ajax'a заменить post на get.

@HWOARANG · 01.08.2013, 00:41

Еще можно через iframe, но нормальных уроков в инете не нашел.
Хотя смысл оставаться в этой форме не вижу. Ее открывали для отправки текста на мыло, текст отправлен, смысл оставлять пользователя в этой же форме? Не лучше ли будет уже на новой странице вывести сообщение об успешной отправке?

@pavlinmavlin разработчик 258 / 48 / 22 Регистрация: 24.07.2012 Сообщений: 219 Записей в блоге: 17
	31.07.2013, 22:41	2
	Для отправки запроса перезагружается страница и окно соответственно исчезает до нового клика по ссылке. А чтобы страница не перезагружалась - для этого существует Ajax. Отправка POST запроса без перезагрузки страницы p.s. В форме правда указан GET запрос(method=get), можно заменить на method=post, а можно в коде Ajax'a заменить post на get. 0

@HWOARANG 33 / 33 / 9 Регистрация: 26.07.2013 Сообщений: 148
	01.08.2013, 00:41	3
	Еще можно через iframe, но нормальных уроков в инете не нашел. Хотя смысл оставаться в этой форме не вижу. Ее открывали для отправки текста на мыло, текст отправлен, смысл оставлять пользователя в этой же форме? Не лучше ли будет уже на новой странице вывести сообщение об успешной отправке? 0

Опции темы