Форум программистов, компьютерный форум, киберфорум
jQuery
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.64/11: Рейтинг темы: голосов - 11, средняя оценка - 4.64
0 / 0 / 0
Регистрация: 12.06.2015
Сообщений: 2

Форма обратной связи

25.07.2018, 20:10. Показов 2081. Ответов 1

Студворк — интернет-сервис помощи студентам
Здравствуйте. Есть подобная форма обратной связи, она появляется в виде popup окна, я, с горем пополам, настроил ее на обычную статическую форму обратной связи, но при нажатии на кнопку заказать, форма исчезает и вместо нее появляется сообщение: "Заявка удачно оформлена. Заявке присвоен номер. Наш менеджер свяжется с вами в ближайшее время.

Вопрос: как сделать, чтобы после нажатия кнопки заказа вылетало popup окно, в котором и будет данный текст: "Заявка удачно оформлена..." и сама форма не исчезла? Кто поможет, того отблагодарю)

Сам скрипт:

HTML5
1
2
3
4
5
6
7
8
9
10
<div id="popup">
    <form id="contact_form" role="form" method="post" action="./php/order.php">
        <h3>Напишите нам</h3>
        <input type="text" name="name"  placeholder="Как к вам обращаться?">
        <input type="text" name="tel"  class="required" placeholder="Контакный телефон (обязательно)">
        <input type="text" name="email" placeholder="Email">
        <textarea name="message" placeholder="Текст сообщения" rows="5"></textarea>
        <a href="#" class="btn button form_submit">Заказать</a>
    </form>
</div>
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
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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
$(function() {
    //Функция проверяет заполнено ли поле с телефоном
    function formValide() {         
        var str = $('#contact_form input[name=tel]').val();
        str = jQuery.trim(str);                
        if(str.length < 5){                
            alert ('Введите телефон');            
            return false;
        }   
        return true;
    }
 
    //при нажатии на кнопку button нужной формы запускаем функцию обработки данных
    $('#contact_form .button').live('click', function() {
        if (formValide()) {
            //если форма прошла проверку, выводим блок с текстом ожидания
            $('#contact_form').before('<h3 id="contact_form_info">Оформление заявки. Подождите...</h3>');
            $('#contact_form').hide();
            //берем путь php обработчика
            order_url = $('#contact_form').attr('action');          
            //посылаем асинхронный запрос на сервер и передаем все данные формы
            $.post(order_url,{
                    name: $('#contact_form input[name=name]').val(),
                    tel: $('#contact_form input[name=tel]').val(),
                    email: $('#contact_form input[name=email]').val(),
                    message: $('#contact_form textarea[name=message]').val(),
                    send: "1"
                }, function(data) {
                    //выводим возврашаемый сервером код html вместо содержимого формы
                $('#contact_form').html(data);
                $('#contact_form').show();
                $('#contact_form_info').remove();
            }, "html");         
        }
        return false;
    });
});
 
// =========================================================================  go_order
$(function() {
    //фкнкция вызова формы обратной связи
    $('#callback').click(function(){
        //появление окна обратной связи
        $('#popup').fadeIn();
        //добавляем к окну иконку закрытия
        $('#popup').append('<a id="popup_close"></a>');
        //расчитываем высоту и ширину всплывающего окна что бы вывести окно прямо по центру экрана
        q_width = $('#popup').outerWidth()/-2;
        q_height = $('#popup').outerHeight()/-2;
        $('#popup').css({
            'margin-left': q_width,
            'margin-top': q_height
        });
        //выводим затемение страницы и делаем полупрозрачным
        $('body').append('<div id="fade"></div>');
        $('#fade').css({'filter' : 'alpha(opacity=40)'}).fadeIn();
        return false;
    });
    
    //функция закрытия окна
    $('#popup_close, #fade').live('click', function() {
        $('#fade').fadeOut(function() {
            $('#fade').remove();
            $('#popup_close').remove();
            $('#popup').fadeOut();
        });
    });
 
});
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
<?php
    header('Content-type: text/html; charset=utf-8');
    error_reporting(0);   
 
if(!empty($_POST['send'])) {
 
    $name = substr(htmlspecialchars(trim($_POST['name'])), 0, 300);
    $tel = substr(htmlspecialchars(trim($_POST['tel'])), 0, 100);
    $email = substr(htmlspecialchars(trim($_POST['email'])), 0, 100);
    $message = substr(htmlspecialchars(trim($_POST['message'])), 0, 3000);
    
    $ip = $_SERVER['REMOTE_ADDR'];
 
    $Nzakaz = rand(10000, 99999);
 
    $mess  = "Имя: <b>".$name."</b><br />";
    $mess .= "Телефон: <b>".$tel."</b><br />";
    $mess .= "Email: <b>".$email."</b><br />";
    $mess .= "Сообщение: <b>".$message."</b><br />";
    
    $theme = "Заявка Z".$Nzakaz;
 
    mail("bratkaprod@gmail.com", $theme, $mess, "From: mysite.com <mymail@mail.ru>\nContent-Type: text/html;\n charset=utf-8\nX-Priority: 0");
    
    echo "<h3>Заявка удачно оформлена.</h3>";
    echo "<p>Заявке присвоен номер Z".$Nzakaz.". Наш менеджер свяжется с вами в ближайшее время.</p>";
        
    }
else {
    
    echo "<h2>Ошибка! Попробуйте еще раз.</h2>";
    
}
    
?>
Добавлено через 28 минут
Помогите кто чем может)
0
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
25.07.2018, 20:10
Ответы с готовыми решениями:

Форма обратной связи
Всем привет! Вставил на сайт форму обратной связи, найденную на просторах интернета. Выглядит все отлично, но вот скрипт не...

Форма обратной связи
Ребят, помогите пожалуйста. Никак не могу найти проблему. вот два сайта. http://u28579.netangels.ru/ и http://u27431.netangels.ru/ на...

Не работает форма обратной связи
Долго бился в муках над вот этой формочкой, но так и не получилось: &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; ...

1
15 / 15 / 16
Регистрация: 19.07.2017
Сообщений: 61
26.07.2018, 10:58
steepfox, если я правильно понял, то тебе надо просто поменять айдишники
JavaScript
1
2
3
4
    //выводим возврашаемый сервером код html вместо содержимого формы
                $('#contact_form').html(data);
                $('#contact_form').show();
                $('#contact_form_info').remove();
чтобы данные выводились в другое место
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
26.07.2018, 10:58
Помогаю со студенческими работами здесь

Форма обратной связи с информацией из блока
Всем доброго времени суток! В общем ситуация такая. У меня есть html шаблон, в шаблоне есть несколько блоков для товара. то есть идет...

Форма обратной связи без PHP
Сайт полностью на HTML и JS, возможно ли добавить форму обратной связи без PHP? PHP на этом хостинге под этот тариф видимо запрещен или еще...

Форма обратной связи, пути решения
Добрый день. Создал форму обратной связи все отлично работает, но не устраивает что когда нажимаешь &quot;отправить&quot; переходит на...

Форма обратной связи для сайта html + ajax
Есть html сайт на нем уже встроены верстальщиком формы но так и не доделана возможность отправки на почту. Есть замечательная инструкция...

Форма обратной связи AJAX drag/drop с предпросмотром картинок
Добрый день. Решил сюда написать. Подскажите, плиз, как можно реализовать форму обратной связи, чтобы пользователь загружал картинки,...


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

Или воспользуйтесь поиском по форуму:
2
Ответ Создать тему
Новые блоги и статьи
PhpStorm 2025.3: WSL Terminal всегда стартует в ~
and_y87 14.12.2025
PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .
Как объединить две одинаковые БД Access с разными данными
VikBal 11.12.2025
Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.
Новый ноутбук
volvo 07.12.2025
Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro
Музыка, написанная Искусственным Интеллектом
volvo 04.12.2025
Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .
От async/await к виртуальным потокам в Python
IndentationError 23.11.2025
Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов
Argus19 22.11.2025
Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .
Сколько Государство потратило денег на меня, обеспечивая инсулином.
Programma_Boinc 20.11.2025
Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .
Ломающие изменения в C#.NStar Alpha
Etyuhibosecyu 20.11.2025
Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .
Мысли в слух
kumehtar 18.11.2025
Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .
Создание Single Page Application на фреймах
krapotkin 16.11.2025
Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2025, CyberForum.ru