@SpideR-KOSS

Отправка формы без перезагрузки страницы?

Добрый день.

Есть форма с отправкой данных на email с помощью ajax.

Форма отправляется, но при этом страница перезагружается.

Как сделать чтобы отправка была без перезагрузки страницы?

Код:

HTML:
<form id="form">
    <input type="text" name="name" required="required" />
    <input type="text" name="phone" required="required" />
    <input type="email" name="email" required="required" />
    <div class="field">
        <label class="label">Регион:</label>
        <div class="control">
            <div class="select">
                <select name="region">
                    <option>Выберите регион</option>
                    <option>Ростовская область</option>
                    <option>Воронежская область</option>
                    <option>Московская область</option>
                </select>
            </div>
        </div>
    </div>
    <input type="submit" value="Заказать звонок" />
</form>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    crossorigin="anonymous"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#form").submit(function () { // Устанавливаем событие отправки для формы с id=form
            var form_data = $(this).serialize(); // Собираем все данные из формы
            $.ajax({
                type: "POST", // Метод отправки
                url: "public/script/send.php", // Путь до php файла отправителя
                data: form_data,
                success: function () {
                    // Код в этом блоке выполняется при успешной отправке сообщения
                    alert("Ваше сообщение отправлено!");
                }
            });
        });
    });    
</script>


Send.php:
<?
        $to = "Адрес почты";
    }
        $subject = 'Обратный звонок'; //Заголовок сообщения
        $message = '
                <html>
                    <head>
                        <title>'.$subject.'</title>
                    </head>
                    <body>
                        <p>Имя: '.$_POST['name'].'</p>
                        <p>Телефон: '.$_POST['phone'].'</p>
                        <p>Email: '.$_POST['email'].'</p>
                        <p>Регион: '.$_POST['region'].'</p>
                        <p>Сообщение: '.$_POST['text'].'</p>                                   
                    </body>
                </html>'; //Текст сообщения
        $headers  = "Content-type: text/html; charset=utf-8 \r\n"; //Кодировка письма
        $headers .= "From: Отправитель <from@example.com>\r\n"; //Наименование и почта отправителя
        mail($to, $subject, $message, $headers); //Отправка письма с помощью функции mail
?>
  • Вопрос задан
  • 19179 просмотров
Решения вопроса 1
slo_nik
@slo_nik Куратор тега PHP
Доброе утро.
Передайте в функцию e и добавьте параметр e.preventDefault()
$("#form").submit(function (e) { // Устанавливаем событие отправки для формы с id=form
           e.preventDefault();
            var form_data = $(this).serialize(); // Собираем все данные из формы
            $.ajax({
                type: "POST", // Метод отправки
                url: "public/script/send.php", // Путь до php файла отправителя
                data: form_data,
                success: function () {
                    // Код в этом блоке выполняется при успешной отправке сообщения
                    alert("Ваше сообщение отправлено!");
                }
            });
        });
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы