Форум Сайтостроение Веб-строительство

Помогите с модальным окном

AGRESSOR
На сайте с 04.07.2010
Offline
79
AGRESSOR
7500

Добрый вечер всем!

есть форма отправки на имейл, при нажатии на кнопку Оставить заявку

нужно чтобы выскакивало сообщение аля Спасибо! В ближайшее время Вам будет отправлен каталог

вот сама форма.. 

        

<form action="mail.php" method="post">

            <input type="text" name="name" value="Ваше имя" onfocus="if (this.value=='Ваше имя') this.value='';" onblur="if (this.value==''){this.value='Ваше имя'}" />

            <input type="text" name="email" value="e-mail" onfocus="if (this.value=='e-mail') this.value='';" onblur="if (this.value==''){this.value='e-mail'}" />

            <input type="text" name="phone" value="Телефон" onfocus="if (this.value=='Телефон') this.value='';" onblur="if (this.value==''){this.value='Телефон'}" />

            <input type="submit" value="Оставить заявку" />

</form>

вот файл mail.php 


<?php



$adminemail="admin@gmail.com";  // e-mail админа 

$date=date("d.m.y"); // число.месяц.год 

$time=date("H:i"); // часы:минуты:секунды 

$backurl="http://immortality.org.ua";  // На какую страничку переходит после отправки письма 

 

// Принимаем данные с формы 

$name=$_POST['name']; 

$email=$_POST['email']; 

$phone=$_POST['phone']; 



// Проверяем валидность e-mail 

if (!preg_match("|^([a-z0-9_\.\-]{1,20})@([a-z0-9\.\-]{1,20})\.([a-z]{2,4})|is", 

strtolower($email))) 

{  

echo "<center>Вернитесь <a href='javascript:history.back(1)'><B>назад</B></a>. Вы указали неверные данные!";

}

else 

{ 

$phone=" 



Имя: $name



E-mail: $email



Телефон: $phone



"; 

// Отправляем письмо админу  

mail("$adminemail", "$date $time Сообщение 

от $name", "$phone"); 



// Выводим сообщение пользователю 

print "<script language='Javascript'><!-- 

function reload() {location = \"$backurl\"}; setTimeout('reload()', 4000); 

//--></script>

$phone 

<p>Сообщение отправлено! Подождите, сейчас вы будете перенаправлены на главную страницу...</p>";  

exit;

} 



?>

Все работает, письмо отсылает на имейл..

Помогите пожайлуста настроит модальное окно при отправке..

Сейчас оно перенаправляет на страницу mail.php а надо чтобы осталась на главной и выскакивало сообщение об отправке..

R
На сайте с 18.12.2009
Offline
92
rerighter
#1

А Вам принципиально нужно именно модальное окно?

Если из form убрать action="mail.php", то значением action будет страница, с которой идет отправка post запроса.

В код этой страницы Вы можете встроить php обработчик, например:


<?php
if($POST) {
    ...
    echo '<p>Сообщение отправлено! Подождите, сейчас вы будете перенаправлены на главную страницу...</p>'; 
}
?>
<form method="post">
  ...
</form>

Также, можно организовать отправку по AJAX, в таком случае вообще не будет обновления страницы.

Например, реализация на jQuery:


<script>
$("form").submit(function() {
    $.ajax({
        type: "POST",
        url: "mail.php",
        data: $(this).serialize(),
        dataType: "html", //или, например, json, если нужно логически обрабатывать ответ
        success: function (data) {
            $("selector").html(data); //или вызов модального окна с результатом, в зависимости от ответа php
        });
    });
});
</script>
Stroke
На сайте с 12.09.2013
Offline
0
Stroke
#2

Дело было вечером, делать было нечего.

Код лежит тут 

<?php 



    #### Stroke

    ##### следующий код получает данные и высылает их на почту, указанную в парметре $admin_mail

    ##### параметр $mail_template - оформление письма

    ##### параметр $mail_subject - заголовок письма

    $admin_mail = "strokeru@gmail.com";

    $mail_subject = "Новая заявка на сайте";

    $mail_template = 

        "Поступила новая заявка на сайте. Пользователь указал следующие данные\r\n".

        "Имя: {%name%}\r\n".

        "Почтовый ящик: {%email%}\r\n".

        "Телефон: {%phone%}\r\n".

        "Время отправления : {%send_time%}\r\n";

    if( isset( $_POST['name'] ) ){

        $replace_array = array( "{%name%}" => htmlspecialchars( $_POST['name'] ), 

                                "{%email%}" => htmlspecialchars( $_POST['email'] ),

                                "{%phone%}" => htmlspecialchars( $_POST['phone'] ),

                                "{%send_time%}" => date("d.m в H:i", gmdate( "U", time() ) ) );

        $mail_template = strtr( $mail_template, $replace_array );

        mail( $admin_mail, $mail_subject, $mail_template );

        exit( );

        

    }  

?>



<!doctype html>

    <html lang="ru-RU">

    <head>

        <meta charset="UTF-8">

        <title>Обратная связь</title>



        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

        <script src="http://malsup.github.com/jquery.form.js"></script> 

        <script type="text/javascript">

            $(document).ready(function() {

                $(".required_field").click(function() { 

                    $(".required_field").css("border", "#CCC 1px solid") ;

                });

                $("#send").click(function() { 

                    /* Проверяем наличие двух полей, имени и почтового ящика, если они пустые, то на этом все */

                    if( $('#name').val() == "" || $('#email').val() == "" ){

                        $('#name').css("border", "red 1px solid") ;

                        $('#email').css("border", "red 1px solid")

                    } 

                    else{

                        $.ajax({

                            url: "<?=$_SERVER["SCRIPT_NAME"];?>",

                            type: "post",

                            data: $("#feedback_form").serialize(),

                            success: function(){

                                $("#info_block").removeClass("error_block");

                                $("#info_block").html('Сообщение отправлено. ');

                                $("#feedback_form").fadeOut( 1200 );

                                $("#info_block").fadeIn( 900 );

                            },

                            error:function(){

                                $("#info_block").addClass("error_block");

                                $("#info_block").html('Какая-то ошибка. ');

                                $("#info_block").fadeIn( 500 );

                                return false;

                            }

                        });

                    }

                });     

            }); 

            </script>

            <style type="text/css">

            .form_block input {

                height: 30px;

                width: 220px;

                border: 1px solid #CCC;

                padding: 4px;

            }

            .form_block input[type="button"]{

                padding: 10px;

                width: 232px;

                height: 40px;

                background-color: #3774A4;

                color: #FFF;

                cursor: pointer;

            }

            .info_block{

                display:none;

                padding: 10px;

                width: 212px;

                border: 1px solid #000;

                background-color: #f6f6f6; 

            }

            .error_block{

                border: 1px solid red;

            }

            </style>

        </head>

        <body>

            <div style="padding:10px;" class="form_block">

                <div id="info_block" class="info_block"></div>

                <form  id="feedback_form">

                <p><input type="text" class="required_field" name="name" id="name" placeholder="Ваше имя" /></p>

                <p><input type="text" class="required_field" name="email" id="email" placeholder="E-mail" /></p>

                <p><input type="text" name="phone" id="phone" placeholder="Телефон" /></p>

                <p><input type="button" name="send" id="send" value="Отправить" /></p>

                </form>

            </div>

        </body>

    </html>
AGRESSOR
На сайте с 04.07.2010
Offline
79
AGRESSOR
#3

Сам сайт на html

в футере стоит форма, при заполнение полей и нажатии отправить высветилось модальное окно что отправило или не отправило..

как в html страницу впихнуть <?php ?> ?

doctorpc
На сайте с 12.07.2009
Offline
112
doctorpc
#4

Попробуйте плагин, который отправляет форму с помощью ajax запроса.

http://malsup.com/jquery/form/



<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
        <script src="http://malsup.github.com/jquery.form.js"></script>

        <script>
            // wait for the DOM to be loaded
            $(document).ready(function() {
                // bind 'myForm' and provide a simple callback function
                $('#myForm').ajaxForm(function() {
                    alert("Thank you for your comment!");
                });
            });
        </script>
    </head>
    <body>
        <form action="mail.php" method="post" id="myForm">
            <input type="text" name="name" value="Ваше имя" />
            <input type="text" name="email" value="e-mail" />
            <input type="text" name="phone" value="Телефон" />
            <input type="submit" value="Оставить заявку" />
        </form>
    </body>
</html>

Stroke
На сайте с 12.09.2013
Offline
0
Stroke
#5

Сохраните код, который я приложил выше в файл mailer.php

И iframe в футер.

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий