Как открыть модальное окно после отправки данных на почту?

@hbloks · Регистрация: 15.11.2011

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

Всем привет! Есть простенький сайт. На нем есть форма для отправки данных.(поля: Имя, email и кнопка сделать заказ.) После нажатия на кнопку, данные отправляются мне на e-mail, а человеку показывается всплывающее окно, сделанное через alert("Спасибо за заявку! ");

Куда и что мне надо прописать, что бы после нажатия на кнопку "сделать заказ" данные отправились мне на email, а пользователю открылось созданное мною модальное окно(сделано оно при помощи bootstrap) .

файл js

JavaScript
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
$(document).ready(function() {
 
    //E-mail Ajax Send
    $("#contact-form").submit(function() { //Change
        var th = $(this);
        $.ajax({
            type: "POST",
            url: "mail.php", //Change
            data: th.serialize()
            
        })
        .done(function() {
            alert("# Спасибо за заявку! ");
                       
            setTimeout(function() {
                            // Done Functions
                th.trigger("reset");
            }, 1000);
        });
        return false;
 
  
    });
 
});

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
<?php
 
$method = $_SERVER['REQUEST_METHOD'];
 
//Script Foreach
$c = true;
if ( $method === 'POST' ) {
 
    $project_name = trim($_POST["project_name"]);
    $admin_email  = trim($_POST["admin_email"]);
    $form_subject = trim($_POST["form_subject"]);
 
    foreach ( $_POST as $key => $value ) {
        if ( $value != "" && $key != "project_name" && $key != "admin_email" && $key != "form_subject" ) {
            $message .= "
            " . ( ($c = !$c) ? '<tr>':'<tr style="background-color: #f8f8f8;">' ) . "
            <td style='padding: 10px; border: #e9e9e9 1px solid;'><b>$key</b></td>
            <td style='padding: 10px; border: #e9e9e9 1px solid;'>$value</td>
        </tr>
        ";
    }
}
} else if ( $method === 'GET' ) {
 
    $project_name = trim($_GET["project_name"]);
    $admin_email  = trim($_GET["admin_email"]);
    $form_subject = trim($_GET["form_subject"]);
 
    foreach ( $_GET as $key => $value ) {
        if ( $value != "" && $key != "project_name" && $key != "admin_email" && $key != "form_subject" ) {
            $message .= "
            " . ( ($c = !$c) ? '<tr>':'<tr style="background-color: #f8f8f8;">' ) . "
            <td style='padding: 10px; border: #e9e9e9 1px solid;'><b>$key</b></td>
            <td style='padding: 10px; border: #e9e9e9 1px solid;'>$value</td>
        </tr>
        ";
    }
}
}
 
$message = "<table style='width: 100%;'>$message</table>";
 
function adopt($text) {
    return '=?UTF-8?B?'.Base64_encode($text).'?=';
}
 
$headers = "MIME-Version: 1.0" . PHP_EOL .
"Content-Type: text/html; charset=utf-8" . PHP_EOL .
'From: '.adopt($project_name).' <'.$admin_email.'>' . PHP_EOL .
'Reply-To: '.$admin_email.'' . PHP_EOL;
 
mail($admin_email, adopt($form_subject), $message, $headers );

модальное окно. кусок кода из index.html

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
<!-- HTML-код модального окна -->
<div id="myModal" tabindex="-1" class="modal fade" ">
  <div class="modal-dialog">
    <div class="modal-content">
      <!-- Заголовок модального окна -->
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4 class="modal-title">Заголовок модального окна</h4>
      </div>
      <!-- Основное содержимое модального окна -->
      <div class="modal-body">
        Содержимое модального окна...
        Получите каталог !                <br>
                <br>
                <a href="asd.pdf" class="btn btn-lg btn-promo">получить каталог</a>
      </div>
      <!-- Футер модального окна -->
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button>
        <button type="button" class="btn btn-primary">Сохранить изменения</button>
      </div>
    </div>
  </div>
</div>

@kposs · 09.12.2016, 18:23

hbloks,

JavaScript
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
$(document).ready(function() {
 
    //E-mail Ajax Send
    $("#contact-form").submit(function() { //Change
        var th = $(this);
        $.ajax({
            type: "POST",
            url: "mail.php", //Change
            data: th.serialize()
            
        })
        .done(function() {
            //alert("# Спасибо за заявку! ");
                       
            setTimeout(function() {
                            // Done Functions
                th.trigger("reset");
            }, 1000);
        $( ".modal-body" ).show();
        });
        return false;
 
  
    });
 
});

Добавлено через 4 минуты
hbloks, И еще... Лучше "return false;" вставить в ".fail"

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
        $.ajax({
            type: "POST",
            url: "mail.php", //Change
            data: th.serialize()
            
        })
       .done(function() {
          // твой код
       })
       .fail(function() {
         return false;
       });

@hbloks · 17.12.2016, 22:57 **[ТС]**

kposs, спасибо тебе большое! Ты лучший))) Сделал все как ты сказал и все заработало.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .	SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .	SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .
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, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .

@hbloks 0 / 0 / 0 Регистрация: 15.11.2011 Сообщений: 5
	17.12.2016, 22:57 [ТС]
	kposs, спасибо тебе большое! Ты лучший))) Сделал все как ты сказал и все заработало. 0