Отправка формы обратной связи средствами AJAX
Для отправки формы обратной связи без перезагрузки страницы, сделаем следующее: Создадим 2 файла: index.php, mail.php. index.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 55 56 57 58 59 60 61 62 63 64 65 66 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js"></script> <style> .top_form_ok,.top_form_error { display: none; } </style> </head> <body> <? echo time(); ?> <hr> <div class="top_form"> <form method="POST"> Введите имя: <input name="name"><br/> Введите телефон: <input name="tel"><br/> Ваше сообщение: <textarea name="text"></textarea><br/> <input type="submit"> </form> </div> <div class="top_form_ok">Успешно отправлено</div> <div class="top_form_error">Что-то пошло не так</div> <script> $(".top_form").submit(function() { // С каким объектом взаимодействует аякс var name = $('.top_form input[name="name"]').val(); var tel = $('.top_form input[name="tel"]').val(); var text = $('.top_form textarea[name="text"]').val(); // создаем переменные из полей формы var str = { 'name' : name, 'tel': tel, 'text': text } // собираем их в масив $.ajax({ type: "POST", // тип отправки данных url: "mail.php", // путь до пхп файла отправки письма data: str, // какие данные отправляем success: function(msg) { // получаем ответ сервера if(msg) { //если ответ равен ... то $('.top_form_error').css('display','block'); } else { $('.top_form_ok').css('display','block'); $('.top_form').css('display','none'); } } }); return false; }); </script> </body> </html> |
mail.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 |
<?php function mailSend () { $name = $_POST['name']; $tel = $_POST['tel']; $text = $_POST['text']; $site = $_SERVER['HTTP_HOST']; $to = "prog@site.ru";// от кого $from = "admin@site.ru";// кому $subject = "Новое письмо с сайта {$site}"; $message = "<h1>Вам сообщение с сайта {$site}</h1>"; $message .= "Имя: {$name}<br/>"; $message .= "Телефон: {$tel}<br/>"; $message .= "<hr>"; $message .= $text; $header = 'MIME-Version: 1.0' . "\r\n"; $header .= "From: {$from}\r\n"; $header .= "Content-type: text/html; charset=utf-8\r\n"; $header .= "X-Mailer: PHP mail script"; mail($to, $subject, $message, $header); } mailSend(); ?> |