При нажатии на кнопку открыть pop-up окно, в котором будет происходить ajax запрос

@bb_oo · Регистрация: 22.11.2013

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

Ребят, помогите сделать) В общем имеется форма с полем "Email" и submit "Отправить". Мне нужно, чтобы при нажатии на эту кнопку открывалось pop-up окно, в котором будет происходить ajax запрос. Сам процесс обработки поля у меня написан на php. И нужно чтобы после этой операции в pop-up окне было написано типо "Спасибо за подписку" ну или что-то вроде)

@Eur93 · 27.02.2014, 22:06

bb_oo, неправильно. Сперва отправляется ajax запрос, ответом из сервера и будет ваше модальное окно. Это один из вариантов.
Делается запросто.

в css пишите:

CSS

.popup{
padding:5px 15px 15px;
position:fixed;
top:30%;
left:25%;
display:none;
overflow:hidden;
border:1px solid #ccc;
background:#fff;
-moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;
z-index:2;}
 
.reg_form{
width:450px;
height:450px;}
 
#overlay{
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
display:none;
background:#000;
opacity:.8;
z-index:1;}

в index.php (где должно открываться модальное окно) пишите

HTML5

1	<div class="popup reg_form"></div>

и в хедере(либо вов нешнем файле, если вы там храните скрипты) пишите в аяксе в success:

Javascript

1	$('div.reg_form').fadeIn(500);$("body").append("<div id='overlay'></div>");$('#overlay').show();

@bb_oo · 27.02.2014, 22:11 **[ТС]**

в 3 пункте можете подробно написать?) я не силен в js)

@Eur93 · 27.02.2014, 22:20

bb_oo, У Вас аякс выглядит таким образом:

Javascript

var a = 10; // Это для примера, смотрите ниже
var b = 20; // И это для примера
$.ajax({
    url: "документ.php", //Здесь название страницы .php, где находится Ваш обработчик
    type: 'POST',
    dataType: 'json',
    data: "a="+a+"&b="+b, //Здесь отправляете переменные на сервер, если Вы ничего не отправляете, удалите эту строку.
    success: {$('div.reg_form').fadeIn(500);$("body").append("<div id='overlay'></div>");$('#overlay').show();}//Здесь будет все выполнено после того, как сервер отправит обратно данные аяксу
});

Если что - спрашивайте. Также могу прислать Вам пример.

@bb_oo · 27.02.2014, 22:45 **[ТС]**

Ничего не выходит. (

HTML5

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <script src="jquery-2.1.0.min"></script>
    <title></title>
</head>
<body>
    <div id="container">
 
        <div id="header" style="text-align: center">
            <img src="img/logo.jpg" alt=""><br>
            <span class="logo_desc"></span><br>
            <span class="soon"></span>
        </div>
        <div id="content">
 
        </div>
        <div id="footer">
            <span class="text_subscribe">Узнай об открытии первым!</span>
            <div class="form">
                <form action="send" method="post">
                    <span><input type="text" placeholder="Email" name="email" required><input type="submit" value="Отправить" name="submit"></span>
                </form>
            </div>
 
            <div class="popup reg_form"></div>
 
            <script>
            var a = 10; // Это для примера, смотрите ниже
            var b = 20; // И это для примера
            $.ajax({
                url: send.php, //Здесь название страницы .php, где находится Ваш обработчик
                type: 'POST',
                dataType: 'json',
                data: "a="+a+"&b="+b, //Здесь отправляете переменные на сервер, если Вы ничего не отправляете, удалите эту строку.
                success: {$('div.reg_form').fadeIn(500);$("body").append("<div id='overlay'></div>");$('#overlay').show();}//Здесь будет все выполнено после того, как сервер отправит обратно данные аяксу
            });
            </script>
        </div>
 
    </div>
</body>
</html>

Добавлено через 10 минут
помогите..(((((

@Eur93 · 27.02.2014, 23:02

bb_oo,
Не забудьте только обратно переписать пути style.css и библиотеки jquery.min.js
index.php

HTML5

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link href="css/style.css" type="text/css" rel="stylesheet">
    <script src="../js/jquery.min.js" type="text/javascript" rel="stylesheet"></script>
    <title>Страница</title>
    <script type="text/javascript">
        $(document).ready(function(){
            $('body').on('click','.send_email',function(){
            var a = $('.text_email').val();
            $.ajax({
                url: "send.php", //Здесь название страницы .php, где находится Ваш обработчик
                type: 'POST',
                dataType: 'json',
                data: "a="+a, //Здесь отправляете переменные на сервер, если Вы ничего не отправляете, удалите эту строку.
                success: function(){$('div.reg_form').fadeIn(500);$("body").append("<div id='overlay'></div>");$('#overlay').show();}//Здесь будет все выполнено после того, как сервер отправит обратно данные аяксу
            });
            });
            });
            </script>
</head>
<body>
<div class="popup reg_form"></div>
    <div id="container">
 
        <div id="header" style="text-align: center">
            <img src="img/logo.jpg" alt=""><br>
            <span class="logo_desc"></span><br>
            <span class="soon"></span>
        </div>
        <div id="content">
 
        </div>
        <div id="footer">
            <span class="text_subscribe">Узнай об открытии первым!</span>
            <div class="form">
             
                    <span><input class="text_email" type="text" placeholder="Email" name="email" required><input class="send_email" type="submit" value="Отправить" name="submit"></span>
               
            </div>
 
            
 
  
        </div>
 
    </div>
</body>
</html>

send.php

PHP

<?php
    $db = mysqli_connect("localhost", "root", "", "restoran");
 
    $a = mysqli_real_escape_string($db, $_POST["a"]);
    // Здесь вы делаете что хотите с переменной $a, которая содержит емейл отправителя. Например, пишите код, чтобы действительно отправить что-то на это мыло.
    
    echo json_encode(1); //Делаем просто, чтобы понять аяксу, что сервер способен вернуть что-то.
?>

@bb_oo · 27.02.2014, 23:16 **[ТС]**

в send.php у меня следующее;

PHP

                <?php 
 
                     if (isset($_POST['submit'])) {
                        $email = $_POST['email'];
                        $message = "message";
                        $to = "test@gmail.com";
                        $from = "Me";
                        mail($to,$message,$email, 'From:' .$from);
                        echo '<div class="success1">Success</div>';
                        
 
                     }
 
 
                ?>

Добавлено через 1 минуту
я не знаю что делать( ничего не происходит. Как было так и осталось(

@Eur93 · 27.02.2014, 23:36

bb_oo,

@bb_oo · 28.02.2014, 17:33 **[ТС]**

всё збс) спасибо огромное!) только вот один момент? Как сделать, чтобы при клике на#overlay у меня закрывалось это popup и фон тоже прятался? Пробовал так, не получалось(

Javascript

 $('#overlay').click(function () {
                $('#reg_from').hide("fast");
                $('#popup').hide("fast");
                $("#overlay").hide("fast");
            })

@Eur93 · 28.02.2014, 18:12

bb_oo, Попробуйте это:

Javascript

        <script>
 $(document).click( function(event){
      if( $(event.target).closest(".popup").length ) 
        return;
      $(".popup").fadeOut("slow");
      $("#overlay").remove();
      event.stopPropagation();
    });
    </script>

@bb_oo · 28.02.2014, 18:28 **[ТС]**

thanks!)

Добавлено через 11 минут
а можешь еще показать, как сделать проверку на инпут формы email? через js

Добавлено через 58 секунд
подскажи как еще сделать проверку на поле EMAIL перед отправкой данных?

@Eur93 · 28.02.2014, 18:54

bb_oo, Проверку на то, что в инпуте действительно содержится информация в виде почтового формата? И куда выводить ошибкам? В то модальное окно?

Если да, то

Я уже не помню код который Вам написал, а отсюда скачать почему-то не могу.

Но представим есть инпут и кнопка, там Вы подкорректируйте под свой код.

HTML5

1	<input class="email" type="text"/><div class="send">Отправить</div>

Javascript

1 2	$('.send').click(function(){ if ($('.email').val()==''){$('.reg_form').html('Вы ничего не ввели! Введите свою почту!');}

Это проверит, является ли поле пустым, этот код вам надо вставить после строчки, которая у вас есть

Javascript

1	$('.send').click(function(){

И дальше поставьте else if {} и внутрь вствьте код, который у вас есть (исключительно в $('.send').click(function(){ ).

Чтобы проверить является ли введенная информацию в инпуте почтовым форматом в виде ***@***.***
Предлагаю как вариант заглянуть сюда.Там вы можете скачать и потестировать.

@bb_oo · 28.02.2014, 19:01 **[ТС]**

чтобы это все не писать мне проще написать одно слово "required" и всё. Меня интересует чтобы было правильная форма email. Мне нужно чтобы было обяззательно наличие символов "@" и "."
И чтобы до "@" было минимум 4 символа а после неё минимум 3 символа.и еще минимум два символа.
В общем нужно чтобы минимально email выглядел так: asdf@asd.ru

@Eur93 · 28.02.2014, 19:24

bb_oo, Вот держите пример.

HTML5

<div>
    <input type="text" class="email" width="30"/>
</div>
<div class="send">Отправить</div>

Javascript

$(".send").click(function(){
                var email = $(".email").val();
        
            if(email != '')
            {
                if(isValidEmailAddress(email))
                {
                    // Сюда введите Ваш код с аяксом
                } else {
                    // Здесь неверное значение
                    $(".reg_form").text('NO');
                }
            } else {
                // Если инпут пустой
                $(".reg_form").text('Введите почту!');  
            }
});
    
    function isValidEmailAddress(emailAddress) {
        var pattern = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);
        return pattern.test(emailAddress);
    }

@bb_oo · 28.02.2014, 19:47 **[ТС]**

Все бы вроде отлично, but {
ошибка выводится, но следом же открывается pop-up. Нужно еще какую-то проверку сделать, если есть такие ошибки pop up не открывать!) help)

@Eur93 · 28.02.2014, 19:54

bb_oo, А Вы те три строчки отркытия popup запихайте в то место, где я откомментировал:

Javascript

1	// Сюда введите Ваш код с аяксом

Напомню, что те три строчки это:

Javascript

1
2
3

$('div.reg_form').fadeIn(500);
$("body").append("<div id='overlay'></div>");
$('#overlay').show();

@bb_oo · 28.02.2014, 19:56 **[ТС]**

блин) а можешь еще сделать так, чтобы при нажатии на класс ".close_pp" - pop-up закрывался и страница обновлялась?)

@Eur93 · 28.02.2014, 20:06

bb_oo, Ну тут желательно поконкретней лучше знать какой элемент содержит такой класс. Ну типа кнопка в модальном окне и прочее. Если этот класс находится на модальном окне, то закрыть можно так:

Javascript

$('.close_pp').click(function(){
     $('.popup').fadeOut(200);
     $("body div#overlay").remove();
});

@bb_oo · 28.02.2014, 20:11 **[ТС]**

ооуее) спасибо) Научи меня всему в js) а то я вобще в неём "дерево") Дай какие мануалы или где ты обучался то?)

Добавлено через 1 минуту
а вот по поводу другого. Я все никак не могу понять о чём ты) У меня пишет: "Не верный Email" и открывается pop-up с моим сообщением об успешной отправке. Опиши по подробнее как убрать этот "баг"!))

@Eur93 · 28.02.2014, 20:15

bb_oo,
Ну я надеюсь вы сделали так?

Javascript

if(isValidEmailAddress(email))
                {
                    // Здесь код AJAX и
                    $('div.reg_form').fadeIn(500);
                    $("body").append("<div id='overlay'></div>");
                    $('#overlay').show();
                } else {
                    // Здесь неверное значение
               }

Если и так, то скиньте мне ваш код, я гляну. Мне сложно телепатически узнавать где вы там что написали и исправили

@bb_oo 15 / 15 / 9 Регистрация: 22.11.2013 Сообщений: 762
		1
	При нажатии на кнопку открыть pop-up окно, в котором будет происходить ajax запрос 27.02.2014, 21:41. Показов 14787. Ответов 51 Метки нет (Все метки) Ребят, помогите сделать) В общем имеется форма с полем "Email" и submit "Отправить". Мне нужно, чтобы при нажатии на эту кнопку открывалось pop-up окно, в котором будет происходить ajax запрос. Сам процесс обработки поля у меня написан на php. И нужно чтобы после этой операции в pop-up окне было написано типо "Спасибо за подписку" ну или что-то вроде) 0

@bb_oo 15 / 15 / 9 Регистрация: 22.11.2013 Сообщений: 762
	27.02.2014, 22:11 [ТС]	3
	в 3 пункте можете подробно написать?) я не силен в js) 0

@bb_oo 15 / 15 / 9 Регистрация: 22.11.2013 Сообщений: 762
	28.02.2014, 18:28 [ТС]	11
	thanks!) Добавлено через 11 минут а можешь еще показать, как сделать проверку на инпут формы email? через js Добавлено через 58 секунд подскажи как еще сделать проверку на поле EMAIL перед отправкой данных? 0

@bb_oo 15 / 15 / 9 Регистрация: 22.11.2013 Сообщений: 762
	28.02.2014, 19:01 [ТС]	13
	чтобы это все не писать мне проще написать одно слово "required" и всё. Меня интересует чтобы было правильная форма email. Мне нужно чтобы было обяззательно наличие символов "@" и "." И чтобы до "@" было минимум 4 символа а после неё минимум 3 символа.и еще минимум два символа. В общем нужно чтобы минимально email выглядел так: asdf@asd.ru 0

@bb_oo 15 / 15 / 9 Регистрация: 22.11.2013 Сообщений: 762
	28.02.2014, 19:47 [ТС]	15
	Все бы вроде отлично, but { ошибка выводится, но следом же открывается pop-up. Нужно еще какую-то проверку сделать, если есть такие ошибки pop up не открывать!) help) 0

@bb_oo 15 / 15 / 9 Регистрация: 22.11.2013 Сообщений: 762
	28.02.2014, 19:56 [ТС]	17
	блин) а можешь еще сделать так, чтобы при нажатии на класс ".close_pp" - pop-up закрывался и страница обновлялась?) 0

@bb_oo 15 / 15 / 9 Регистрация: 22.11.2013 Сообщений: 762
	28.02.2014, 20:11 [ТС]	19
	ооуее) спасибо) Научи меня всему в js) а то я вобще в неём "дерево") Дай какие мануалы или где ты обучался то?) Добавлено через 1 минуту а вот по поводу другого. Я все никак не могу понять о чём ты) У меня пишет: "Не верный Email" и открывается pop-up с моим сообщением об успешной отправке. Опиши по подробнее как убрать этот "баг"!)) 0

При нажатии на кнопку открыть pop-up окно, в котором будет происходить ajax запрос

Решение