Всплывающее окно после отправки формы

@Kapux · Регистрация: 29.03.2015

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

Доброго времени суток, форумчане!

Речь пойдет о сайте.

Как после отправки формы (клика по кнопке "Отправить"), не уводить посетителя в файл обработки данных (в моем случае это "mail.php"), а вывести всплывающее окно с текстом (Ваша заявка принята и тд.). Буду очень благодарен за помощь.

PS: Перепробовал, все находящиеся на сайте варианты, не 1 не подошел.

Форма:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<form method="post" action="mail.php">
<div class="row 50%">
<div class="6u"><input type="text" name="name" required placeholder="Имя" /></div>
<div class="6u"><input type="tel" name="tel" required placeholder="Телефон" /></div>
</div>
<div class="row 50%">
<div class="12u"><textarea name="message" required placeholder="Сообщение?" rows="6"></textarea></div>
</div>
<div class="row">
<div class="12u">
<ul class="actions">
<li><input type="submit" value="Отправить" /></li>
</ul>
</div>
</div>
</form>

Файл обработки - mail.php:

PHP
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Обратная связь</title>
</head>
<body>
<?php
if (isset($_POST['name'])) {$name = $_POST['name'];}
if (isset($_POST['email'])) {$email = $_POST['email'];}
if (isset($_POST['mess'])) {$mess = $_POST['mess'];}
 
$to = "***@***.ru";
$headers = "Content-type: text/plain; charset = utf-8";
$subject = "Сообщение с вашего сайта";
$message = "Имя пославшего: $name \nЭлектронный адрес: $email \nСообщение: $mess";
$send = mail ($to, $subject, $message, $headers);
if ($send == 'true')
 
{
echo "<b>Спасибо за отправку вашего сообщения!<p>";
echo "<a href=index.html>Нажмите,</a> чтобы вернуться на главную страницу";
}
else 
{
echo "<p><b>Ошибка. Сообщение не отправлено!";
}
?>
</body>
</html>

@Пифагор · 30.03.2015, 00:15

Я предлагаю смотреть с сторону JS. Через поисковик по запросу что нить типа "Всплывающее окно JS" будет много готовых примеров.

@Kapux · 30.03.2015, 00:50 **[ТС]**

Сообщение от Пифагор

Я предлагаю смотреть с сторону JS. Через поисковик по запросу что нить типа "Всплывающее окно JS" будет много готовых примеров.

Тут скорее вопрос в реализации, что нужно я впринцепе знаю. Вопрос стоит как?

@Пифагор · 30.03.2015, 00:58

Вот именно так, как я и написал)) Или обратитесь в раздел JS. Только средствами Пыха это вряд-ли можно реализовать.

@Виталюска · 30.03.2015, 01:04

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

{
echo "<b>Спасибо за отправку вашего сообщения!<p>";
echo "<a href=index.html>Нажмите,</a> чтобы вернуться на главную страницу";
}

тут сделай так:

PHP
1
2
3
4
5
6
7
{ ?>
<script type="text/javscript">
alert("Спасибо за отправку вашего сообщения!");
</script>
<?php
echo "<a href=index.html>Нажмите,</a> чтобы вернуться на главную страницу";
}

@Kapux · 30.03.2015, 01:09 **[ТС]**

Сообщение от Виталюска

тут сделай так:

PHP
1
2
3
4
5
6
7
{ ?>
<script type="text/javscript">
alert("Спасибо за отправку вашего сообщения!");
</script>
<?php
echo "<a href=index.html>Нажмите,</a> чтобы вернуться на главную страницу";
}

Все так же уводит на mail.php. Алерт не где не всплывает

@Виталюска · 30.03.2015, 01:12

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

Все так же уводит на mail.php. Алерт не где не всплывает

alert должен всплыть на mail.php перед echo "<a href=index.html>Нажмите,</a> чтобы вернуться на главную страницу";

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

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<?php
if (isset($_POST['name'])) {$name = $_POST['name'];}
if (isset($_POST['email'])) {$email = $_POST['email'];}
if (isset($_POST['mess'])) {$mess = $_POST['mess'];}
 
$to = "***@***.ru";
$headers = "Content-type: text/plain; charset = utf-8";
$subject = "Сообщение с вашего сайта";
$message = "Имя пославшего: $name \nЭлектронный адрес: $email \nСообщение: $mess";
$send = mail ($to, $subject, $message, $headers);
if ($send == 'true')
 
{?>
<script type="text/javscript">
alert("Спасибо за отправку вашего сообщения!");
</script>
<?php
echo "<a href=index.html>Нажмите,</a> чтобы вернуться на главную страницу";
}
else 
{
echo "<p><b>Ошибка. Сообщение не отправлено!";
}
?>

@Kapux · 30.03.2015, 01:18 **[ТС]**

Сообщение от Виталюска

alert должен всплыть на mail.php перед echo "<a href=index.html>Нажмите,</a> чтобы вернуться на главную страницу";

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

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<?php
if (isset($_POST['name'])) {$name = $_POST['name'];}
if (isset($_POST['email'])) {$email = $_POST['email'];}
if (isset($_POST['mess'])) {$mess = $_POST['mess'];}
 
$to = "***@***.ru";
$headers = "Content-type: text/plain; charset = utf-8";
$subject = "Сообщение с вашего сайта";
$message = "Имя пославшего: $name \nЭлектронный адрес: $email \nСообщение: $mess";
$send = mail ($to, $subject, $message, $headers);
if ($send == 'true')
 
{?>
<script type="text/javscript">
alert("Спасибо за отправку вашего сообщения!");
</script>
<?php
echo "<a href=index.html>Нажмите,</a> чтобы вернуться на главную страницу";
}
else 
{
echo "<p><b>Ошибка. Сообщение не отправлено!";
}
?>

Код стоит так же, алерта нет. Мб причина в том что сайт у меня на html?
И я хотел не уводить пользователей с главной страницы в файл обработки (mail.php), а оставить на странице и просто добавить всплыв. окно

@Виталюска · 30.03.2015, 01:22

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

я хотел не уводить пользователей с главной страницы в файл обработки (mail.php)

а как тогда отправляется форма, если делать без перезагрузки то ajax

@Kapux · 30.03.2015, 01:24 **[ТС]**

Сообщение от Виталюска

как тогда отправляется форма, если делать без перезагрузки то ajax

Сообщение от Пифагор

Только средствами Пыха это вряд-ли можно реализовать.

Я только за использование явы + аякс, в этом и есть суть вопроса, как его правильно реализовать.

@Виталюска · 30.03.2015, 09:50

1.

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

заменить на

HTML5
1
<form method="post" id="mail_form" action="mail.php">

2.

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

заменить на

HTML5
1
<input type="submit" id='mail_send' value="Отправить" />

3. создать my_script.js (или как самому нравиться обозвать)

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
$('#mail_send').click(function () {
$.post( $("#mail_form").attr("action"), $("#mail_form").serializeArray(), function(info){ $("#result").html(info); } );
clearInput();
});
 
$('#mail_send').submit(function () {
 return false;
});
 
function clearInput {
$('#mail_send').each(function () {
$(this).val('');
});
}

4. создай в html

HTML5
1
<div id='result'></div>

5. подключи все это дело

вместо <div id='result'></div> можешь использовать всплывающее окно, я сам только учусь может чтото и накосячил

@Kapux · 30.03.2015, 20:59 **[ТС]**

не помогло, все так же выкидывает на mail/php

@Виталюска · 30.03.2015, 21:02

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

не помогло, все так же выкидывает на mail/php

а ты jquery подключил? создал файлы?

@Kapux · 30.03.2015, 22:15 **[ТС]**

Сообщение от Виталюска

а ты jquery подключил? создал файлы?

Создал, 1 файл верно?

@Виталюска · 30.03.2015, 22:30

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

Создал, 1 файл верно?

1. файл index.html
2. файл my_script.js
3. файл mail.php

в index.php подключаем jquery

PHP/HTML
1
<script type="text/javascript" src="jquery-2.1.3.min.js"></script>

ну и проверь еще раз ид формы, кнопки, див блока

@Kapux · 30.03.2015, 22:35 **[ТС]**

Сообщение от Виталюска

1. файл index.html
2. файл my_script.js
3. файл mail.php
в index.php подключаем jquery
Код PHPHTML
1
<script type="text/javascript" src="jquery-2.1.3.min.js"></script>
ну и проверь еще раз ид формы, кнопки, див блока

Все так и сделал, в index.html подключил скрипт и jquery и my_script.js.
Выкидывает на страницу mail.php

@PCGeek · 30.03.2015, 23:20

Предложу вариант: переносим обработку формы в тот же index.php, а не в отдельный mail.php.

Например:

содержимое index.php

PHP
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
54
<?php
if (!empty($_POST['name']))
{
    if (isset($_POST['name']))
    {
        $name = $_POST['name'];
    }
    if (isset($_POST['email']))
    {
        $email = $_POST['email'];
    }
    if (isset($_POST['mess']))
    {
        $mess = $_POST['mess'];
    }
 
    $to = "***@***.ru";
    $headers = "Content-type: text/plain; charset = utf-8";
    $subject = "Сообщение с вашего сайта";
    $message = "Имя пославшего: $name \nЭлектронный адрес: $email \nСообщение: $mess";
    $send = mail($to, $subject, $message, $headers);
    if ($send == 'true')
    {
        ?>
         <script type="text/javascript">
            alert("Спасибо за отправку вашего сообщения!");
        </script>
        <?php
    } else
    {
        ?>
         <script type="text/javascript">
            alert("Ошибка. Сообщение не отправлено!");
        </script>
        <?php
    }
}
?>
<form method="post">
    <div class="row 50%">
        <div class="6u"><input type="text" name="name" required placeholder="Имя" /></div>
        <div class="6u"><input type="tel" name="tel" required placeholder="Телефон" /></div>
    </div>
    <div class="row 50%">
        <div class="12u"><textarea name="message" required placeholder="Сообщение?" rows="6"></textarea></div>
    </div>
    <div class="row">
        <div class="12u">
            <ul class="actions">
                <li><input type="submit" value="Отправить" /></li>
            </ul>
        </div>
    </div>
</form>

P.S. У тега form нужно удалить аттрибут action. В общем, считаю вывод через alert не очень красивым, поэтому в данном варианте можно сделать вывод html вместо алерта.

@Kapux · 30.03.2015, 23:50 **[ТС]**

Спасибо за интерес и помощь, но у меня сайт на html...

@PCGeek · 31.03.2015, 15:42

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

Спасибо за интерес и помощь, но у меня сайт на html...

Так вы же используете php для отправки почты? Я не предлагаю вам переделывать весь сайт на php. Нужно всего лишь код переместить из одного файла в другой. И это один из вариантов решения вашей задачи.

Или вы хотите полностью отказаться от php? Зачем тогда пишите в ветке про php?

@Kapux · 31.03.2015, 16:01 **[ТС]**

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

Так вы же используете php для отправки почты? Я не предлагаю вам переделывать весь сайт на php. Нужно всего лишь код переместить из одного файла в другой. И это один из вариантов решения вашей задачи.
Или вы хотите полностью отказаться от php? Зачем тогда пишите в ветке про php?

Нет, просто я начинающий)
Смотрите что получается:
Алерт с кнопочкой окей всплывает сразу при заходе на сайт, а за ним сразу же идет алерт об ошибке, после отправки они то же оба всплывают, но сообщение так и не уходит. Собственно результат

Добавлено через 10 минут
На сайт идет трафик, поэтому перенес в отдельную папку

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@Пифагор 2172 / 1655 / 840 Регистрация: 10.01.2015 Сообщений: 5,207
	30.03.2015, 00:15
	Я предлагаю смотреть с сторону JS. Через поисковик по запросу что нить типа "Всплывающее окно JS" будет много готовых примеров. 0

@Пифагор 2172 / 1655 / 840 Регистрация: 10.01.2015 Сообщений: 5,207
	30.03.2015, 00:58
	Вот именно так, как я и написал)) Или обратитесь в раздел JS. Только средствами Пыха это вряд-ли можно реализовать. 0

@Kapux 0 / 0 / 0 Регистрация: 29.03.2015 Сообщений: 12
	30.03.2015, 20:59 [ТС]
	не помогло, все так же выкидывает на mail/php 0

@Kapux 0 / 0 / 0 Регистрация: 29.03.2015 Сообщений: 12
	30.03.2015, 23:50 [ТС]
	Спасибо за интерес и помощь, но у меня сайт на html... 0

Всплывающее окно после отправки формы

Решение