@Eugene_Koi

Почему не отправляются данные из формы Аjax?

Использую скрипт, найденный на Хабре для отправки данных из формы средствами Аякс. Почему-то не срабатывает. Просто перезагружается страница. В чем проблема? jQuery подключил, путь к mail.php указал правильно. Проверяю не на локальном сервере.
Сама форма:
<form id="form">
    <input type="text" name="name" required="required"/>
    <input type="text" name="phone" required="required"/>
    <input type="submit" value="Заказать звонок"/>
</form>

Код, который отправляет данные Аяксом:
$(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("Ваше сообщение отпрвлено!");
            });
    });
});

И сам PHP обработчик:
<?
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
}
?>
  • Вопрос задан
  • 1023 просмотра
Пригласить эксперта
Ответы на вопрос 3
trushka
@trushka
Потому, что надо предотвратить отсылку формы браузером - просто дописать в обработчике сабмита return false - без этого браузер тут же после выполнения обработчика отправит форму. Поскольку action не указан, он отправляет форму на текущий адрес и страница тупо перезагружается
Ответ написан
Комментировать
Aligatro
@Aligatro
Turn food and coffee into software...
Просто отмените события отправки как правильно сказали выше.

$(document).ready(function(){
    $("#form").submit(function(e) { //устанавливаем событие отправки для формы с id=form
            e.preventDefault(); // отменяем событие
            var form_data = $(this).serialize(); //собераем все данные из формы
            $.ajax({
            type: "POST", //Метод отправки
            url: "send.php", //путь до php фаила отправителя
            data: form_data,
            success: function() {
                   //код в этом блоке выполняется при успешной отправке сообщения
                   alert("Ваше сообщение отпрвлено!");
            });
    });
});
Ответ написан
Комментировать
@asmodeusta
PHP Developer (Laravel, Wordpress)
Добавьте return false; как в коде ниже:
$(document).ready(function(){
    $("#form").submit(function(e) { //устанавливаем событие отправки для формы с id=form
            e.preventDefault(); // отменяем событие
            var form_data = $(this).serialize(); //собераем все данные из формы
            $.ajax({
            type: "POST", //Метод отправки
            url: "send.php", //путь до php фаила отправителя
            data: form_data,
            success: function() {
                   //код в этом блоке выполняется при успешной отправке сообщения
                   alert("Ваше сообщение отпрвлено!");
            });
            return false;
    });
});
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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