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

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

25.07.2018, 20:10. Показов 2085. Ответов 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
Ответ Создать тему
Новые блоги и статьи
Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки
Neotwalker 08.03.2026
Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .
Модульная разработка через nuget packages
DevAlt 07.03.2026
Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .
Модульный подход на примере F#
DevAlt 06.03.2026
В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .
Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование
8Observer8 05.03.2026
Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .
SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D
8Observer8 04.03.2026
Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .
SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий
8Observer8 02.03.2026
Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip Сканируйте QR-код на мобильном и вы увидите, что появится джойстик для управления главным героем. . . .
Реалии
Hrethgir 01.03.2026
Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .
Ритм жизни
kumehtar 27.02.2026
Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru