Простая форма обратной связи на php и ajax

Простая форма обратной связи на php и ajax

Опции

zverr

Topic Starter сообщение

6.3.2019, 18:49; Ответить: zverr

Сообщение #1

Старожил

Группа: User
Сообщений: 1771
Регистрация: 25.4.2012
Из: Россия,Нижегородская область,г.Дзержинск
Поблагодарили: 0 раз
Репутация:

0

Поскольку в этом примере формы обратной связи мы сделаем четкое разделение на серверную и клиентскую часть, нам потребуется два файла.

В первом будет храниться верстка и js:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Обратная связь. Ajax</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"  type="text/jаvascript"></script>
    <script>
        $(document).ready(function(){
            $('#btn_submit').click(function(){
                // собираем данные с формы
                var user_name    = $('#user_name').val();
                var user_email   = $('#user_email').val();
                var text_comment = $('#text_comment').val();
                // отправляем данные
                $.ajax({
                    url: "action.php", // куда отправляем
                    type: "post", // метод передачи
                    dataType: "json", // тип передачи данных
                    dаta: { // что отправляем
                        "user_name":    user_name,
                        "user_email":   user_email,
                        "text_comment": text_comment
                    },
                    // после получения ответа сервера
                    success: function(data){
                        $('.messages').html(data.result); // выводим ответ сервера
                    }
                });
            });
        });
    </script>
</head>
<body>
    <br/>
    <div class="messages"></div>
    <br/>
    <label>Ваше имя:</label><br/>
    <input type="text" id="user_name" value="" /><br/>

    <label>Ваш e-mail:</label><br/>
    <input type="text" id="user_email" value="" /><br/>

    <label>Текст сообщения:</label><br/>
    <textarea id="text_comment"></textarea>

    <br/>
    <input type="button" value="Отправить" id="btn_submit" />
</body>
</html>

И второй файл, в котором будет находиться серверная логика, написанная на php:

<?php
    $msg_box = ""; // в этой переменной будем хранить сообщения формы
    $errors = array(); // контейнер для ошибок
    // проверяем корректность полей
    if($_POST['user_name'] == "")    $errors[] = "Поле 'Ваше имя' не заполнено!";
    if($_POST['user_email'] == "")   $errors[] = "Поле 'Ваш e-mail' не заполнено!";
    if($_POST['text_comment'] == "") $errors[] = "Поле 'Текст сообщения' не заполнено!";

    // если форма без ошибок
    if(empty($errors)){
        // собираем данные из формы
        $message  = "Имя пользователя: " . $_POST['user_name'] . "<br/>";
        $message .= "E-mail пользователя: " . $_POST['user_email'] . "<br/>";
        $message .= "Текст письма: " . $_POST['text_comment'];
        send_mail($message); // отправим письмо
        // выведем сообщение об успехе
        $msg_box = "<span style='color: green;'>Сообщение успешно отправлено!</span>";
    }else{
        // если были ошибки, то выводим их
        $msg_box = "";
        foreach($errors as $one_error){
            $msg_box .= "<span style='color: red;'>$one_error</span><br/>";
        }
    }

    // делаем ответ на клиентскую часть в формате JSON
    echo json_encode(array(
        'result' => $msg_box
    ));


    // функция отправки письма
    function send_mail($message){
        // почта, на которую придет письмо
        $mail_to = "my@mail.ru";
        // тема письма
        $subject = "Письмо с обратной связи";

        // заголовок письма
        $headers= "MIME-Version: 1.0\r\n";
        $headers .= "Content-type: text/html; charset=utf-8\r\n"; // кодировка письма
        $headers .= "From: Тестовое письмо <no-reply@test.com>\r\n"; // от кого письмо

        // отправляем письмо
        mail($mail_to, $subject, $message, $headers);
    }

?>

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

--------------------

Подпись сдается...

0

Ответить с цитированием данного сообщения

k0ttee k0ttee 7.3.2019, 0:41; Сообщений: 12040 Поблагодарили: 0 раз Репутация: 0 Просмотр профиля	7.3.2019, 0:41; Ответить: k0ttee Сообщение #2
Топовый постер Группа: User Сообщений: 12040 Регистрация: 2.5.2014 Поблагодарили: 0 раз Репутация: 0	Есть где упрощать... Вместо Ajax можно использовать упрощенный load. Получится немного меньше кода. Да! Я люблю когда меньше кода, ибо: меньше места занимает на экране, меньше передается по интернетам, да и меньше риск наговнокодить. ;) Если вместо <input type="text" id="user_email" value="" /> Применить <input type="email" id="user_email" value="" /> Валидацию поля сделает браузер. Вот только стилизовать ругань в случае ошибки (она выглядит и ведет себя подобно alert) придется костылями. Добавлено спустя 3 часа 30 минут 8 секунд: [video]https://www.youtube.com/watch?v=Zjniftjr0AM[/video] -------------------- Задонь кибер-коту на крипто-вискас btc: 3Hq7X9CosVftRFPqWis1Dkk5MdtM1u6jj9

zhenyaxxxx zhenyaxxxx 6.11.2019, 20:23; Сообщений: 1 Поблагодарили: 0 раз Репутация: 0 Просмотр профиля	6.11.2019, 20:23; Ответить: zhenyaxxxx Сообщение #3
Новичок Группа: User Сообщений: 1 Регистрация: 6.11.2019 Поблагодарили: 0 раз Репутация: 0	Добрый день. Попробовал ваш код, у меня почему то не передаются данные из заполненных полей... Пишет ошибки: незаполнен телефон, имя и т.д. Подскажите в чем проблема?

nic_rs nic_rs 15.4.2020, 4:47; Сообщений: 1 Поблагодарили: 0 раз Репутация: 0 Просмотр профиля	15.4.2020, 4:47; Ответить: nic_rs Сообщение #4
Новичок Группа: User Сообщений: 1 Регистрация: 15.4.2020 Поблагодарили: 0 раз Репутация: 0	ребят, добрых времени суток всем. смотрите у меня ajax.js $(document).ready(function() { $("#form").submit(function() { $.ajax({ type: "POST", url: "mail.php", data: $(this).serialize() }).done(function() { $(this).find("input").val(""); alert("Спасибо! Ваша заявка пpинята. В скopoм вpeмeни наш спeциалист пoзвoнит Вам."); $("#form").trigger("reset"); }); return false; }); }); в hmtl <form id="form"> <input type="text" name="name" placeholder="Как вас зовут?" required /> <input type="text" name="surname" placeholder="Как ваша фамилия?" required /> <input type="text" name="tel" placeholder="Номер телефона +7" required /> <input type="text" name="message" placeholder="Опишите неисправность" required /> <div class="form-chek"> <input type="checkbox" id="c1" checked=""> <label for="c1"><span></span></label> <a href="javascript://" data-fancybox="" style="color:#dae2a3" data-src="#lb-fz152">Сoгласиe на oбpабoтку пepсoнальных данных</a> </div> <button type="submit" onclick="return gtag_report_conversion" class="send-button">Обратиться</button> </form> то-есть всё работает в этой таблицы когда всё заполняешь появляется поверх окошко о том что спасибо что заявку оставили, вопрос в другом. точно такую форму вставляю чуток ниже тоже самое и при заполнение всех полей нажимаю отправку почему-то в адресной строке выстреливает все что форме заполнил и не отправляет на почту. в чём суть не могу понять. буду очень благодарен кто подскажет.

prolisk

15.4.2020, 12:19; Ответить: prolisk

Сообщение #5

Топовый постер

Группа: Active User
Сообщений: 6107
Регистрация: 24.8.2010
Из: Sava
Поблагодарили: 39 раз
Репутация:

6

(nic_rs)

в чём суть не могу понять.

на одной странице несколько полей с одинаковым ID

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой

или обратитесь к любому из модераторов.

--------------------

Бонус Payeer
Блог вебмастера. Добавь свой сайт в белый каталог

« Предыдущая тема · Программная часть · Следующая тема »

1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)

Пользователей: 0

Похожие темы

Тема	Ответов	Автор	Просмотров	Последний ответ
СОЗДАНИЕ : / САЙтЫ / ЛЕНДЫ / БОТЫ ТГ / ВАЙТЫ / КРЕО / СОФТЫ / ДИЗАЙН [PHP, JS, HTML/CSS] и другое	5	CULA	3426	19.12.2023, 18:55 автор: CULA
Услуги по созданию и доработке скриптов PHP, MySQL, JavaScript, jQuery Разработка сайтов и сервисов под-ключ	0	alexey	1246	24.11.2023, 14:46 автор: alexey
Веб-разработка (HTML5, CSS3, JavaScript, jQuery, Ajax, PHP)	56	qpPeW	44946	19.7.2023, 10:03 автор: qpPeW
Есть спецы по php/laravel?	3	Mixatraider	1894	26.5.2023, 20:48 автор: Mixatraider
Опытный PHP\Python разработчик в поиске интересных задач	6	daikzlex	3409	25.5.2023, 13:55 автор: daikzlex