Форум программистов, компьютерный форум, киберфорум
Наши страницы
JavaScript
Войти
Регистрация
Восстановить пароль
 
 
Рейтинг 4.50/6: Рейтинг темы: голосов - 6, средняя оценка - 4.50
vlad-55
12 / 12 / 4
Регистрация: 21.02.2009
Сообщений: 1,818
1

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

20.05.2014, 15:14. Просмотров 1098. Ответов 20
Метки нет (Все метки)

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

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

Задача, в общем-то, совершенно типична. Может быть, есть и типовой скрипт?
0
Лучшие ответы (1)
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
20.05.2014, 15:14
Ответы с готовыми решениями:

Порекомендуйте книги или другие источники по ajax
порекомендуйте книги или другие источники по ajax.

Необходимо вставить в скрипт увеличения картинки, скрипт просмотра панорамы 360
Здравствуйте. У меня такой специфический вопрос, на моем сайте имеется скрипт...

Вызвать скрипт через другой скрипт
Всем привет! Такая ситуация. Есть скрипт 1, который служит для аякс подгрузки...

Ошибка типовой УТ 11.1
Не могу выловить ошибку. Типовая УТ 11.1.2.31, файловый вариант. При открытии...

Типовой расчёт
помогите кто чем может!!! с чего начать, не могу даже начать(( напишите по...

20
kalabuni
Нарушитель
3275 / 2593 / 621
Регистрация: 18.04.2012
Сообщений: 7,811
20.05.2014, 15:36 2
понимаете ли, vlad-55, всплывающая форма с полями и кнопкой - это всё HTML+JS

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

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

я почему спрашиваю: людям объясняешь-объясняешь, а потом выясняется, что у них сайт на Народе или на Юкозе, где доступа к серверу у них нет... и все объяснения мои - напрасны
0
amadey18
91 / 91 / 51
Регистрация: 29.04.2013
Сообщений: 361
20.05.2014, 15:38 3
Примерно это
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');
      });
    });
}
0
vlad-55
12 / 12 / 4
Регистрация: 21.02.2009
Сообщений: 1,818
20.05.2014, 16:04  [ТС] 4
Добавлено через 17 минут
Цитата Сообщение от amadey18 Посмотреть сообщение
Примерно это
Этого я не понял. Тут с сервером никакой связи не видно - ни по передаче туда письма, ни по получению команды оттуда.

Цитата Сообщение от kalabuni Посмотреть сообщение
т.е. вам на вашем хостинге нужен доступ к серверному языку
он у вас есть?
Да, доступ к серверу есть. Более того, с РНР я достаточно хорошо знаком, а самое жуткое для меня - это JS...
0
amadey18
91 / 91 / 51
Регистрация: 29.04.2013
Сообщений: 361
20.05.2014, 16:11 5
Цитата Сообщение от vlad-55 Посмотреть сообщение
Тут с сервером никакой связи не видно
ее здесь нет, это временный вывод сообщения, что сообщение отправлено.
Для отправки письма используем ajax запрос на наш сервер, который формирует письмо и отправляет его на почту, при этом будет выдано true/false. На succes ajax выполняем функцию ShowMessage.
mail() php
0
kalabuni
Нарушитель
3275 / 2593 / 621
Регистрация: 18.04.2012
Сообщений: 7,811
20.05.2014, 16:14 6
Цитата Сообщение от 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, полагаю, с этим всем прекрасно справится
0
vlad-55
12 / 12 / 4
Регистрация: 21.02.2009
Сообщений: 1,818
20.05.2014, 17:46  [ТС] 7
Пытаюсь реализовать, но без 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 "Не отправлено";
Как из всего этого сделать скрипт?
0
amadey18
91 / 91 / 51
Регистрация: 29.04.2013
Сообщений: 361
21.05.2014, 08:56 8
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("Что-то пошло не так, попробуйте снова, обновив страницу.");}
    });
});
0
kalabuni
Нарушитель
3275 / 2593 / 621
Регистрация: 18.04.2012
Сообщений: 7,811
21.05.2014, 09:32 9
Цитата Сообщение от vlad-55 Посмотреть сообщение
form action="server-test.php" method="post">
очень жаль, но вы, оказывается, читать совсем не умеете

я написал вам выше:
вам нужны: 1) реальная форма - тег <FORM>, но без указанного ACTION
все эти значения -- ACTION, METHOD -- они будут указаны в параметрах скрипта, организующего AJAX-связь с сервером

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

зачем вопросы задаёте, если ответы не читаете?
0
vlad-55
12 / 12 / 4
Регистрация: 21.02.2009
Сообщений: 1,818
21.05.2014, 10:07  [ТС] 10
Цитата Сообщение от 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>
Исправил в полном соответствии с Вашей рекомендацией.

Что же дальше?
0
amadey18
91 / 91 / 51
Регистрация: 29.04.2013
Сообщений: 361
22.05.2014, 12:10 11
Цитата Сообщение от vlad-55 Посмотреть сообщение
Что же дальше?
HTML5
1
<input id="id_button" type="button" value="Пригласить">
и использовать код, написанный выше.
1
vlad-55
12 / 12 / 4
Регистрация: 21.02.2009
Сообщений: 1,818
22.05.2014, 12:53  [ТС] 12
Код вцелом такой имеется в виду?
Если так, то это не работает.

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="Пригласить">
0
amadey18
91 / 91 / 51
Регистрация: 29.04.2013
Сообщений: 361
22.05.2014, 16:00 13
Вы почти у цели
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>
Если так, то это не работает.
Что за ошибка? что выводит?
0
kalabuni
Нарушитель
3275 / 2593 / 621
Регистрация: 18.04.2012
Сообщений: 7,811
22.05.2014, 16:23 14
amadey18, перечитайте топик
топикстартер изначально хотел 2 кнопки - "Пригласить" и "Отправить",
причём первая имеется на странице всегда, а вторая появляется и потом исчезает

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

дайте ему код с двумя кнопками - это, ИМХО, решит проблему
0
vlad-55
12 / 12 / 4
Регистрация: 21.02.2009
Сообщений: 1,818
22.05.2014, 16:35  [ТС] 15
Цитата Сообщение от kalabuni Посмотреть сообщение
топикстартер изначально хотел 2 кнопки - "Пригласить" и "Отправить",
причём первая имеется на странице всегда, а вторая появляется и потом исчезает
Так оно и есть, этот тезис остается; путаницы здесь никакой нет.

Добавлено через 52 секунды
Цитата Сообщение от amadey18 Посмотреть сообщение
Что за ошибка? что выводит?
Собственно, ничего и не выводит. Вот посмотрите сами: http://fh7929mi.bget.ru/test/562.html
0
amadey18
91 / 91 / 51
Регистрация: 29.04.2013
Сообщений: 361
22.05.2014, 17:57 16
Лучший ответ Сообщение было отмечено vlad-55 как решение

Решение

Цитата Сообщение от 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>
на кнопку "отправить" кинуть предыдущий скрипт отправки.
1
vlad-55
12 / 12 / 4
Регистрация: 21.02.2009
Сообщений: 1,818
22.05.2014, 18:05  [ТС] 17
Похоже, что мне придется вернуться к идее поиска типового скрипта...

Спасибо за очень интересную иформацию!
0
amadey18
91 / 91 / 51
Регистрация: 29.04.2013
Сообщений: 361
22.05.2014, 21:47 18
Цитата Сообщение от vlad-55 Посмотреть сообщение
типового скрипта
что вы под этим подразумеваете? Готовую сборку кода, которую можно вставить и использовать?
1
kalabuni
Нарушитель
3275 / 2593 / 621
Регистрация: 18.04.2012
Сообщений: 7,811
22.05.2014, 21:58 19
я ж вам написал, amadey18, что требуется код кнопки "Пригласить", по клику на которую появится скрытая до этого форма с кнопкой "Отправить", по клику на которую на сервер уйдёт AJAX-запрос, по ответу на который где-то в форме пропишется "Усё отправлено", повисит это немного и пропадёт (вместе с кнопкой "Отправить")... а кнопка "Пригласить" так и будет торчать на странице...

а в вашем коде только одна кнопка "Пригласить", которая неизвестно как появляется, потом исчезает...
товарищу непонятно - как это всё работает...
вам чё, трудно?
1
vlad-55
12 / 12 / 4
Регистрация: 21.02.2009
Сообщений: 1,818
23.05.2014, 00:51  [ТС] 20
Цитата Сообщение от amadey18 Посмотреть сообщение
Готовую сборку кода, которую можно вставить и использовать?
Вот неплохая демка http://online-dohod.ru/demo/ContactForm/, только непонятно, как убрать ее черный фон и почему после открытия формы курсор все время показывает часы (Хром, ФФ).
0
23.05.2014, 00:51
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
23.05.2014, 00:51

Типовой расчёт
Помогите, пожалуйста, решить дифференциальное уравнение: y'-y/x=1+1/x

типовой расчет по математике
Вот ссылка,там фотография,хорошо видно все ...

Вопрос По Типовой Бухгалтерии 8.2
В бухгалтерии есть регистр остатков НДС по приобретенным товарам ( может...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
20
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru