Задать вопрос
@ferds
front-end

Как отправить форму без перезагрузки страницы, после отправки появится сообщение. Есть пример, но не работает?

Всем привет!

Задача отправить форму без перезагрузки, после отправки сообщение об успешной отправке.
Много не понятного в сети.
Нашел вариант, где расписано что как:
https://habrahabr.ru/sandbox/93363/
Но почему то не работает.
Я не чего не изменял, оставил все как есть, но правда адрес получателя указал свой)
<form id="form">
    <input type="text" name="name" required="required"/>
    <input type="text" name="phone" required="required"/>
    <input type="submit" value="Заказать звонок"/>
</form>

<?
if((isset($_POST['name'])&&$_POST['name']!="")&&(isset($_POST['phone'])&&$_POST['phone']!="")){ //Проверка отправилось ли наше поля name и не пустые ли они
        $to = 'mail@yandex.ru'; //Почта получателя, через запятую можно указать сколько угодно адресов
        $subject = 'Обратный звонок'; //Загаловок сообщения
        $message = '
                <html>
                    <head>
                        <title>'.$subject.'</title>
                    </head>
                    <body>
                        <p>Имя: '.$_POST['name'].'</p>
                        <p>Телефон: '.$_POST['phone'].'</p>                        
                    </body>
                </html>'; //Текст нащего сообщения можно использовать HTML теги
        $headers  = "Content-type: text/html; charset=utf-8 \r\n"; //Кодировка письма
        $headers .= "From: Отправитель <from@example.com>\r\n"; //Наименование и почта отправителя
        mail($to, $subject, $message, $headers); //Отправка письма с помощью функции mail
}
?>

<script type="text/javascript">
$(document).ready(function(){
    $("#form").submit(function() { //устанавливаем событие отправки для формы с id=form
            var form_data = $(this).serialize(); //собераем все данные из формы
            $.ajax({
            type: "POST", //Метод отправки
            url: "send.php", //путь до php фаила отправителя
            data: form_data,
            success: function() {
                   //код в этом блоке выполняется при успешной отправке сообщения
                   alert("Ваше сообщение отпрвлено!");
            });
    });
});    
</script>


Спасибо за помощь!
Удачи!
  • Вопрос задан
  • 6499 просмотров
Подписаться 1 Оценить 4 комментария
Пригласить эксперта
Ответы на вопрос 3
arizona
@arizona
а что я, собственно, здесь делаю?...
Возможно, стоит запретить поведение по умолчанию для формы?
$("#form").submit(function(e) {e.preventDefault()}
Ответ написан
Посмотри вот здесь решение - мне помогло когда-то:
smartlanding.biz/ajax-forma-v-modalnom-okne.html
Ответ написан
Комментировать
Нужно посмотреть что вам отвечает сервер. Для этого нужно открыть консоль браузера, вкладку Network ( ctrl+shift+i ). Затем выбрать ваш запрос, получите примерно следующую картину:
2eaabc9a3350400a91f073c07ab8ed4c.png
Здесь вас, в первую очередь, интересуют вкладки Headers и Response
Вкладка Response как раз и есть ваш ответ сервера.
Во вкладке Headers для начала нужно посмотреть параметр General > Status Code
Ваша коллбек функция:
success: function() {
                   //код в этом блоке выполняется при успешной отправке сообщения
                   alert("Ваше сообщение отпрвлено!");
            });

Обрабатывает только положительные ответы ( поэтому она и называется success )
Положительными считаются ответы 2хх (т.е. 200, 201 и т.д.)
Подробнее почитать можно тут: Ссылка
Подозреваю что у вас будет статус ответа 404 или 500, поэтому функция success и не срабатывает.
Поэтому для решения проблемы вам нужно разобраться что отвечает вам сервер, если это 404, то проверить доступен ли адрес на который вы отправляете запрос, если 500, то скорее всего у вас ошибка при выполнения php скрипта в файле send.php
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы