0

Использую скрипт, найденный на Хабре для отправки данных из формы средствами Аякс. Почему-то не срабатывает. Просто перезагружается страница. В чем проблема? jQuery подключил, путь к mail.php указал правильно. Проверяю не на локальном сервере.

$(document).ready(function(){
    $("#callback-form").submit(function() { //устанавливаем событие отправки для формы с id=form
        var form_data = $(this).serialize(); //собераем все данные из формы
        $.ajax({
            type: "POST", //Метод отправки
            url: "mail.php", //путь до php фаила отправителя
            data: form_data,
            success: function() {
                //код в этом блоке выполняется при успешной отправке сообщения
                alert("Ваше сообщение отпрвлено!");
        });
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="callback-form">
    <h3 class="text-center">Полная проверка бесплатно</h3>
    <input type="text" name="name" placeholder="Имя" required="required">
    <input type="text" name="phone" placeholder="Телефон" required="required">
<input type="submit" value="Отправить">
</form>

А вот сам PHP обработчик

if((isset($_POST['name'])&&$_POST['name']!="")&&(isset($_POST['phone'])&&$_POST['phone']!="")){ //Проверка отправилось ли наше поля name и не пустые ли они
    $to = '@mail.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: Отправитель <[email protected]>\r\n"; //Наименование и почта отправителя
    mail($to, $subject, $message, $headers); //Отправка письма с помощью функции mail
}
2
  • как у тебя форма то отправляется? в коде нет триггера для отправки, что ты привел
    – Artsiom
    31 июл 2017 в 15:35
  • копипастнулось коряво. исправил
    – Lebowski
    31 июл 2017 в 15:46

3 ответа 3

1

return false; в конце функции верни. что бы стандартная отправка формы не запустилась.

0

Добавьте в форму <input type="submit"> и все заработает

0

Добавь preventDefault() - этот метод отменит дальнейшие действия браузера в контексте текущего событие

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

либо просто верни false

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

            return false;
    });
});

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.