Порекомендуйте типовой скрипт

@vlad-55 · Регистрация: 21.02.2009

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

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

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

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

@kalabuni · 20.05.2014, 15:36

понимаете ли, vlad-55, всплывающая форма с полями и кнопкой - это всё HTML+JS

а вот чтобы появилась надпись "Письмо отправлено" -- причём не фейковая, а настоящая (когда письмо реально отправится по нужному адресу) -- должен участвовать ещё и сервер (т.е. специальная программа, написанная на серверном языке, например, на PHP)

т.е. вам на вашем хостинге нужен доступ к серверному языку
он у вас есть?

я почему спрашиваю: людям объясняешь-объясняешь, а потом выясняется, что у них сайт на Народе или на Юкозе, где доступа к серверу у них нет... и все объяснения мои - напрасны

@amadey18 · 20.05.2014, 15:38

Примерно это

HTML5
1
2
3
4
5
<div id="msg" style="display:none;text-align:center;vertical-align:middle;position:absolute;width:120px;height:30px; z-index:100;background-color: #CCCCCC;">
    <p style="padding-top:5px;color:#000000;">
        Сохранено
    </p>
</div>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function ShowMessage() {
  $("#msg").css('top',$(window).height()/2-$("#msg").height()/2);
  $("#msg").css('left',$(window).width()/2-$("#msg").width()/2);
  $("#msg").css('opacity',0);
  $("#msg").css('display','block');
  $('#msg').animate({
        opacity: 1,
      }, 400, function() {
        $('#msg').delay(1100);
      $('#msg').animate({
          opacity: 0,
        }, 300, function() {
          $("#msg").css('display','none');
      });
    });
}

@vlad-55 · 20.05.2014, 16:04 **[ТС]**

Добавлено через 17 минут

Сообщение от amadey18

Примерно это

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

Сообщение от kalabuni

т.е. вам на вашем хостинге нужен доступ к серверному языку
он у вас есть?

Да, доступ к серверу есть. Более того, с РНР я достаточно хорошо знаком, а самое жуткое для меня - это JS...

@amadey18 · 20.05.2014, 16:11

Сообщение от vlad-55

Тут с сервером никакой связи не видно

ее здесь нет, это временный вывод сообщения, что сообщение отправлено.
Для отправки письма используем ajax запрос на наш сервер, который формирует письмо и отправляет его на почту, при этом будет выдано true/false. На succes ajax выполняем функцию ShowMessage.
mail() php

@kalabuni · 20.05.2014, 16:14

Сообщение от vlad-55

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

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

в общем, вам нужны:
1) реальная форма - тег <FORM>, но без указанного ACTION и -- главное -- без кнопки <input type="submit" value="Отправить">, вместо последней вам нужно использовать <input type="button" value="Отправить">

2) форму эту "украшаете" разными стилями (бордером, паддингом и прочими наворотами), позиционируете её по центру окна (или где вам нужно) и -- главное -- делаете её невидимой style="display: none"

3) по нажатию на ссылку "Пригласить в клуб" делаете форму видимой -- style.display = 'block'

4) на кнопку <input type="button" value="Отправить"> на событие onclick вешаете функцию, коя AJAX'ом отправляет данные заполненных полей вашей программе на PHP, которая и отправляет письмо по нужному адресу и -- главное -- возвращает странице ответ об удаче/неудаче операции отправки письма

5) и только получив этот ответ, скрипт пишет "Отправлено" или "Не отправлено" и запускает таймер для "удерживания" этой надписи на странице

пытавшийся вам выше помочь коллега amadey18, полагаю, с этим всем прекрасно справится

@vlad-55 · 20.05.2014, 17:46 **[ТС]**

Пытаюсь реализовать, но без action как обойтись не знаю, поэтому начал пока так:

HTML5
1
2
3
4
5
6
7
    <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:

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

Как из всего этого сделать скрипт?

@amadey18 · 21.05.2014, 08:56

vlad-55, на кнопку сделать обработчик события js jquery - click(), а затем ajax отправляет запрос на сервер server-test.php, на методе success проверяем что пришло, в вашем случае

JavaScript
1
if(data == 'Отправлено') ShowMessage();

Добавлено через 12 минут

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
jQuery('#id_button').click(function(e) {
    e.stopPropagation();
    e.preventDefault();
        var email = ...
        var msg = ...
    jQuery.ajax({ 
        type: "POST", 
        url: "server-test.php",
        data: ({
            "email" : email,
                        "msg" : msg
        }), 
        success: function(data) {
            if(data == 'Отправлено')
            {   
                        ShowMessage();
            }
        },
        error: function(){alert("Что-то пошло не так, попробуйте снова, обновив страницу.");}
    });
});

@kalabuni · 21.05.2014, 09:32

Сообщение от vlad-55

form action="server-test.php" method="post">

очень жаль, но вы, оказывается, читать совсем не умеете

я написал вам выше:

вам нужны: 1) реальная форма - тег <FORM>, но без указанного ACTION

все эти значения -- ACTION, METHOD -- они будут указаны в параметрах скрипта, организующего AJAX-связь с сервером

но у вас в полный рост в теге <FORM> - и ACTION, и METHOD...

зачем вопросы задаёте, если ответы не читаете?

@vlad-55 · 21.05.2014, 10:07 **[ТС]**

Сообщение от kalabuni

зачем вопросы задаёте, если ответы не читаете?

Ответы я читаю, и опираюсь на них. Но когда в ответе детализации не хватает, то что же далать?

HTML5
1
2
3
4
5
6
7
    <script type="text/javascript" src="jquery.js"></script>
    <div style="display:none;">
            <form>
            <input type="text" name="test" value="ПРИВЕТ!">
            <input type="button" value="Пригласить">
            </form>
    </div>

Исправил в полном соответствии с Вашей рекомендацией.

Что же дальше?

@amadey18 · 22.05.2014, 12:10

Сообщение от vlad-55

Что же дальше?

HTML5
1
<input id="id_button" type="button" value="Пригласить">

и использовать код, написанный выше.

@vlad-55 · 22.05.2014, 12:53 **[ТС]**

Код вцелом такой имеется в виду?
Если так, то это не работает.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<script src="test/jquery.js"></script>
 
<script>
jQuery('#id_button').click(function(e) {
    e.stopPropagation();
    e.preventDefault();
        var email = '123@bk.ru';
        var msg = 'Test';
 
    jQuery.ajax({ 
        type: "POST", 
        url: "server-test.php",
        data: ({
            "email" : email,
                        "msg" : msg
        }), 
        success: function(data) {
            if(data == 'Отправлено')
            {   
                        ShowMessage();
            }
        },
        error: function(){alert("Что-то пошло не так, попробуйте снова, обновив страницу.");}
    });
});
</script>
 
<input id="id_button" type="button" value="Пригласить">

@amadey18 · 22.05.2014, 16:00

Вы почти у цели

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<script type="text/javascript" src="jquery.js"></script>
<div id="msg" style="display:none;text-align:center;vertical-align:middle;position:absolute;width:120px;height:30px; z-index:100;background-color: #CCCCCC;">
    <p style="padding-top:5px;color:#000000;">
        Сохранено
    </p>
</div>
    <div style="display:none;">
            <form>
            <input type="text" name="test" value="ПРИВЕТ!">
            <input id="id_button" type="button" value="Пригласить">
            </form>
    </div>
<script>
jQuery('#id_button').click(function(e) {
    e.stopPropagation();
    e.preventDefault();
        var email = '123@bk.ru';
        var msg = 'Test';
 
    jQuery.ajax({ 
        type: "POST", 
        url: "server-test.php",
        data: ({
            "email" : email,
                        "msg" : msg
        }), 
        success: function(data) {
            if(data == 'Отправлено')
            {   
                        ShowMessage();
            }
        },
        error: function(){alert("Что-то пошло не так, попробуйте снова, обновив страницу.");}
    });
});
 
function ShowMessage() {
  $("#msg").css('top',$(window).height()/2-$("#msg").height()/2);
  $("#msg").css('left',$(window).width()/2-$("#msg").width()/2);
  $("#msg").css('opacity',0);
  $("#msg").css('display','block');
  $('#msg').animate({
        opacity: 1,
      }, 400, function() {
        $('#msg').delay(1100);
      $('#msg').animate({
          opacity: 0,
        }, 300, function() {
          $("#msg").css('display','none');
      });
    });
}
</script>

Если так, то это не работает.

Что за ошибка? что выводит?

@kalabuni · 22.05.2014, 16:23

amadey18, перечитайте топик
топикстартер изначально хотел 2 кнопки - "Пригласить" и "Отправить",
причём первая имеется на странице всегда, а вторая появляется и потом исчезает

затем топикстартер сам запутался в этих кнопках и запутал вас

дайте ему код с двумя кнопками - это, ИМХО, решит проблему

@vlad-55 · 22.05.2014, 16:35 **[ТС]**

Сообщение от kalabuni

топикстартер изначально хотел 2 кнопки - "Пригласить" и "Отправить",
причём первая имеется на странице всегда, а вторая появляется и потом исчезает

Так оно и есть, этот тезис остается; путаницы здесь никакой нет.

Добавлено через 52 секунды

Сообщение от amadey18

Что за ошибка? что выводит?

Собственно, ничего и не выводит. Вот посмотрите сами: http://fh7929mi.bget.ru/test/562.html

@amadey18 · 22.05.2014, 17:57

Сообщение от vlad-55

Собственно, ничего и не выводит. Вот посмотрите сами: http://fh7929mi.bget.ru/test/562.html

если используете firefox, установите firebug, нажмите F12.
У меня выводит такое сообщение
"NetworkError: 407 Proxy Authentication Required - http://fh7929mi.bget.ru/test/562.html"
562.html
"NetworkError: 407 Proxy Authentication Required - http://fh7929mi.bget.ru/test/jquery.js"
jquery.js

Попробуйте обновить jquery(ну, или у меня что то не так).
на счет двух кнопок
кнопка "Пригласить", есть 2 решения:
1)использовать модальное окно, сообщение на форуме, с помощью bootstrap
2) сделать похожий обработчик, как и на кнопке "отправить", только менять параметр display

JavaScript
1
2
3
4
5
6
jQuery('#id_button').click(function(e) {
    e.stopPropagation();
    e.preventDefault();
$('#id_div').show(); //открывает: display:inline;/display:block;
$('#id_div').hide(); // закрывает: display:none;
});

HTML5
1
2
3
4
5
6
<div id='id_div' style="display:none;">
            <form>
            <input type="text" name="test" value="ПРИВЕТ!">
            <input id="id_button" type="button" value="Пригласить">
            </form>
    </div>

на кнопку "отправить" кинуть предыдущий скрипт отправки.

@vlad-55 · 22.05.2014, 18:05 **[ТС]**

Похоже, что мне придется вернуться к идее поиска типового скрипта...

Спасибо за очень интересную иформацию!

@amadey18 · 22.05.2014, 21:47

Сообщение от vlad-55

типового скрипта

что вы под этим подразумеваете? Готовую сборку кода, которую можно вставить и использовать?

@kalabuni · 22.05.2014, 21:58

я ж вам написал, amadey18, что требуется код кнопки "Пригласить", по клику на которую появится скрытая до этого форма с кнопкой "Отправить", по клику на которую на сервер уйдёт AJAX-запрос, по ответу на который где-то в форме пропишется "Усё отправлено", повисит это немного и пропадёт (вместе с кнопкой "Отправить")... а кнопка "Пригласить" так и будет торчать на странице...

а в вашем коде только одна кнопка "Пригласить", которая неизвестно как появляется, потом исчезает...
товарищу непонятно - как это всё работает...
вам чё, трудно?

@vlad-55 · 23.05.2014, 00:51 **[ТС]**

Сообщение от amadey18

Готовую сборку кода, которую можно вставить и использовать?

Вот неплохая демка http://online-dohod.ru/demo/ContactForm/, только непонятно, как убрать ее черный фон и почему после открытия формы курсор все время показывает часы (Хром, ФФ).

Новые блоги и статьи Все статьи Все блоги /
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .

@vlad-55 156 / 20 / 5 Регистрация: 21.02.2009 Сообщений: 2,787

	Порекомендуйте типовой скрипт 20.05.2014, 15:14. Показов 2186. Ответов 20 Метки нет (Все метки) На главной странице есть кнопка «Пригласить в Клуб». При клике по этой кнопке должна появиться всплывающая форма с полями (адрес, текст) и кнопкой «Отправить». При этом после отправки должно появиться на небольшое время сообщение «Письмо отправлено» и само закрыться. В сети есть несколько разных вариантов, но все они без сообщения об отправке. Задача, в общем-то, совершенно типична. Может быть, есть и типовой скрипт? 0

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	20.05.2014, 15:36
	понимаете ли, vlad-55, всплывающая форма с полями и кнопкой - это всё HTML+JS а вот чтобы появилась надпись "Письмо отправлено" -- причём не фейковая, а настоящая (когда письмо реально отправится по нужному адресу) -- должен участвовать ещё и сервер (т.е. специальная программа, написанная на серверном языке, например, на PHP) т.е. вам на вашем хостинге нужен доступ к серверному языку он у вас есть? я почему спрашиваю: людям объясняешь-объясняешь, а потом выясняется, что у них сайт на Народе или на Юкозе, где доступа к серверу у них нет... и все объяснения мои - напрасны 0

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	22.05.2014, 16:23
	amadey18, перечитайте топик топикстартер изначально хотел 2 кнопки - "Пригласить" и "Отправить", причём первая имеется на странице всегда, а вторая появляется и потом исчезает затем топикстартер сам запутался в этих кнопках и запутал вас дайте ему код с двумя кнопками - это, ИМХО, решит проблему 0

@vlad-55 156 / 20 / 5 Регистрация: 21.02.2009 Сообщений: 2,787
	22.05.2014, 18:05 [ТС]
	Похоже, что мне придется вернуться к идее поиска типового скрипта... Спасибо за очень интересную иформацию! 0

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	22.05.2014, 21:58
	я ж вам написал, amadey18, что требуется код кнопки "Пригласить", по клику на которую появится скрытая до этого форма с кнопкой "Отправить", по клику на которую на сервер уйдёт AJAX-запрос, по ответу на который где-то в форме пропишется "Усё отправлено", повисит это немного и пропадёт (вместе с кнопкой "Отправить")... а кнопка "Пригласить" так и будет торчать на странице... а в вашем коде только одна кнопка "Пригласить", которая неизвестно как появляется, потом исчезает... товарищу непонятно - как это всё работает... вам чё, трудно? 1

Порекомендуйте типовой скрипт

Решение