HTML+CSS+JavaScript

На главной странице есть кнопка «Пригласить в Клуб». При клике по этой кнопке должна появиться всплывающая форма с полями (адрес, текст) и кнопкой «Отправить». При этом после отправки должно появиться на небольшое время сообщение «Письмо отправлено» и само закрыться.

В сети есть несколько разных вариантов, но все они без сообщения об отправке.

Задача, в общем-то, совершенно типична. Может быть, есть и типовой скрипт?

============

По идее, как-то так, но до конца сделать не получилось:

<script type="text/javascript" src="jquery.js"></script>     <div style="display:none;">             form action="server-test.php" method="post">             <input type="text" name="test" value="ПРИВЕТ!">             <input type="button" value="Пригласить">             </form>     </div>

А в файле server-test.php:

$test = $_POST['test'];   // Тут какие-то коды отправки письма   // Тут сообщение о результатах:   if (@flag) echo "Отправлено"; else echo "Не отправлено";

Сами РНР коды отправки письма вопросов не вызывают, но вот сделать эти окна не удается!

// показали форму   $(function() {    $('#r').click(function(){               $('.zabor').css('display', 'block');        $('body').css('overflow', 'hidden');        $('#ajax').load(          'reg-form.php',           {             lang: $('#lang').val()           }           //,function(){}        );        return false;     });            }); // отправили форму $(function() {   $('body').on('click', '.send', function(){       $.post(       'registration.php',       {         fio: $('#fio').val(),         milo: $('#milo').val(),         pass: $('#pass').val(),         tel: $('#tel').val(),         skype: $('#skype').val(),         lang: $('#lang').val()       },       onAjaxSuccess       );     });          });     function onAjaxSuccess(data)      {       if(data == 1)        {     $('#ajax').load('reg-success.php');     setTimeout(function(){               $('#success,.zabor').fadeOut('fast');              $('body').css('overflow', 'none');                }, 2000);       }       else $('.aj-f p').html(data);      }

Вы уж если используете jQuery, то используйте возможности его методов, а не ради того, чтобы document.getElementByID(id) заменять на $('#id').
В jQuery есть два метода сериализации данных формы: .serialize() - возвращает строку в виде GET url-запроса; .serializeArray() - возвращает массив объектов данных формы. И это безобразие

fio: $('#fio').val(),  milo: $('#milo').val(),  pass: $('#pass').val(),  tel: $('#tel').val(),  skype: $('#skype').val(),  lang: $('#lang').val()

нужно записывать как

$(form).serialize(); или $(form).serializeArray();

Это плохо:

$('#r').click(function(){                 $('.zabor').css('display', 'block');         $('body').css('overflow', 'hidden');         $('#ajax').load(           'reg-form.php',            {              lang: $('#lang').val()            }            //,function(){}         );         return false;      })

>Вы уж если используете jQuery, то используйте возможности его методов, а не ради того, чтобы document.getElementByID(id) заменять на $('#id').
>В jQuery есть два метода сериализации данных формы: .serialize() - возвращает строку в виде GET url-запроса; .serializeArray() - возвращает массив объектов данных формы. И это безобразие
>
>

fio: $('#fio').val(),  >milo: $('#milo').val(),  >pass: $('#pass').val(),  >tel: $('#tel').val(),  >skype: $('#skype').val(),  >lang: $('#lang').val()

>
>нужно записывать как
>
>

>$(form).serialize(); >или >$(form).serializeArray();  >

>
>Это плохо:
>

$('#r').click(function(){  >        >       $('.zabor').css('display', 'block');  >       $('body').css('overflow', 'hidden');  >       $('#ajax').load(  >         'reg-form.php',  >          {  >            lang: $('#lang').val()  >          }  >          //,function(){}  >       );  >       return false;  >    })

понял, спс
и
насчет последнего чем плохо?

Тем, что если так писать, то клиентский код будет представлять из себя большую портянку из лоскутов.

Вы просто прочли что-то о jQuery, и теперь то, что увидели в нем перечисляете по порядку. А ведь формы, сообщения сервера, это диалог клиента с сервером, и при всем их многообразии в них есть много общего. Следовательно писать надо функцию которая бы выполняла задачу запуска диалогов, их сопровождение и закрытие.

Запускать событие можно щелчком по любому элементу на странице, а не только по тегу А, привычка использовать для подобного всегда именно тег А, и потом return false, говорит об необдуманности похода.

Нужно определить один единственный php-сценарий выдачи и обработки диалогов, основываясь, например, на их номерах, при этом запускать такой диалог можно кнопками, другими элементами стилизованными под кнопки и т.п. Главное, что все эти элементы должны иметь идентификатор определяющий запуск диалога и его номер/тип.

Стили окна диалога и его элементов, это прерогатива CSS, а JS для этого, это только в случаях чего-то обособленного в диалогах, или для акцентирования на событиях или ошибках.

Если опустить всю крутость метода ajax, которая в вашем случае вообще никакой существенной роли не играет, и использовать упрощенные методы асинхронных запросов jQuery, которых вполне хватает, то функция управления и обработки всех диалогов клиент-сервер будет проста:

$('[id|=dialog]').on('click', function() {     var btn = $(this).prop('disable', 1);     $.post('dialog.php', this.id.replace('-','='), function(d) {         //кеширование объекта для которого необходимо выполнять операции         //и выполнение операций         var dialog = $(d).appendTo('body').find('form').on('submit', function() {             $.post('dialog.php', $(this).serializeArray(), function(d) {                 //диалог клиент-сервер, работа над ошибками и т.д..             }, 'json').end().find('#close').click(function() {                 dalog.remove();                 btn.prop('disable', 0);                 //выполнение операций для кешированного объекта             }).end();         });         }, 'html'); });

насчет ф-ции - у меня тупо штучный пример - диалогов больше нет поэтому внимания на что-то целостное не обратил. насчет ф-ции согласен конечно.
хрень в том, что ссылки меню это массив из БД - одни элементы переходы по <a> и лишь 1 элемент запускает попап.

тег а - потому что это элемент в общем списке меню в href находится ссылка на случай не отработки js
по поводу других элементов - использую и их.

спасибо за пример.

подскажите еще
в чем суть замены this.id.replace('-','=')
без этого post пустой)

Ну как в чем, ровно в том же, в чем и суть передаваемого на сервер имени и значения элемента формы, то есть для сервера это ключ->значение. Например, организуем три диалога клиент-сервер: почта - mail; личный кабинет - main: и редактирование корзины - basket. Не обязательно идентифицировать эти диалоги по указанным именам, можно и по номерами, но суть от этого не изменяется. Ключ этих имен для сервера всегда постоянен и равен - dialog.

<? if($_POST['dialog'] {     //принимаем запросы клиента     $form = &$_SESSION['form_dialog'];     switch($name = $_POST['dialog']) {         case 'mail' :   //обработка формы диалога почты                         $form == $name {                             //запрос от формы                         } else sendForm('mail'); //иначе отправляем код формы                         break;         case 'main' :  //обработка формы диалога личного кабинета                         $form == $name {                             //запрос от формы                         } else sendForm('main'); //иначе отправляем код формы                         break;         case 'basket' : //обработка формы диалога корзины                         $form == $name {                             //запрос от формы                         } else sendForm('basket'); //иначе отправляем код формы     }     exit; }

А запустить этот диалог, это объединить кнопки их запусков в именованную группу, к которой можно обратиться по части имени определяющей такую группу и являющаяся ключом, а вторая часть имени, это значение:

<button id="dialog-mail">Mail</button> <button id="dialog-main">Main</button> <button id="dialog-basket">Basket</button>

Заменив в значении id "-" на "=" и получим нужный параметр запроса к серверу.

попутал присвоение)
тоже самое что {dialog: 1}
спс

Нет смысла прописывать {dialog: 1}, если все можно делать автоматически, "анонимно", а посему и выбран такой принцип именования.