0

Есть такая форма:

<form id="visa-form" method="post" action="<?php echo get_template_directory_uri() . '/template-parts/mail.php'; ?>" enctype="multipart/form-data">
        <div class="form-group">
            <label>ФИО</label>
            <input type="text" name="user_fullname" class="form-control" required/>
        </div>
        <div class="form-group">
            <label>Пол</label>
            <select name="user_gender" class="form-control">
                <option value="Мужской">Мужской</option>
                <option value="Женский">Женский</option>
            </select>
        </div>
        <div class="form-group">
            <label>Номер телефона</label>
            <input type="text" name="user_phone" class="form-control" pattern="\d*" required/>
        </div>
        <div class="form-group">
            <label>Эл. почта</label>
            <input type="email" name="user_email" class="form-control" required/>
        </div>
        <div class="form-group">
            <label>Место работы</label>
            <input type="text" name="user_workplace" class="form-control" required/>
        </div>
        <div class="form-group">
            <label>Загрузить фото</label>
            <input type="file" name="photo_scan" required/>
        </div>
        <div class="form-group">
            <label>Загрузить скан паспорта</label>
            <input type="file" name="passport_scan" required/>
        </div>
        <div class="form-group" align="center">
            <input id="send-visa-form" type="submit" name="submit" value="Отправить заявку" class="btn btn-info" />
        </div>
    </form>

и такой js:

$(document).ready(function() {
    function sendAjaxForm(ajax_form, url) {
        jQuery.ajax({
            url: url,
            type: "POST",
            dataType: "html",
            data: jQuery("#" + ajax_form).serialize(),
            success: function(response) {
                alert("success");
            },
            error: function(response) {
                alert("failure");
            }
        });
        return false;
    }

    $("#visa-form-btn").click(function() {
        sendAjaxForm('visa-mail', "../template-parts/mail.php/");
        return false;
    });
});

После нажатия на кнопку отправки формы должно было выводится окно alert() с соответствующим сообщением, но вместо этого страница попросту перезагружается. Я пробовал убирать тег action у форм, в таком случае форма вообще не отправляется, а страница просто перезагружается. Не могу понять в чем дело

P.S. Есть подозрения указание путей, хотя полученный файл возвращает статус 200
P.S. Не думаю что содержимое скрипта mail.php для отправки письма нужно, php работает

1
  • добавьте в функцию обработки клика event.preventDefault(): $("#visa-form-btn").click(function(event) { event.preventDefault(); sendAjaxForm('visa-mail', "../template-parts/mail.php/"); return false; }); 19 мая 2020 в 20:08

1 ответ 1

3

Используйте event.preventDefault():

$(document).ready(function() {
    function sendAjaxForm(ajax_form, url) {
        jQuery.ajax({
            url: url,
            type: "POST",
            dataType: "html",
            data: jQuery("#" + ajax_form).serialize(),
            success: function(response) {
                alert("success");
            },
            error: function(response) {
                alert("failure");
            }
        });
        return false;
    }

    $("#visa-form-btn").click(function(event) {
        event.preventDefault();
        sendAjaxForm('visa-mail', "../template-parts/mail.php/");
        return false;
    });
});

UPD: А еще лучше - перехватывайте не клик по кнопке, а сам сабмит формы:

$(document).ready(function() {
    function sendAjaxForm(ajax_form, url) {
        jQuery.ajax({
            url: url,
            type: "POST",
            dataType: "html",
            data: jQuery("#" + ajax_form).serialize(),
            success: function(response) {
                alert("success");
            },
            error: function(response) {
                alert("failure");
            }
        });
        return false;
    }

    $("#visa-form").on("submit", function(event) {
        event.preventDefault();
        sendAjaxForm('visa-mail', "../template-parts/mail.php/");
        return false;
    });
});
7
  • не-а, event.preventDefault() не сработал 19 мая 2020 в 20:09
  • так у вас кнопка sumbit имеет id="send-visa-form", а prevent default вы указываете для #visa-form-btn. Вот ваша форма и отрабатывает свое стандартное поведение с перезагрузкой страницы 19 мая 2020 в 20:13
  • @МаксМаксимус, мы отменяем то событие, которое случается. Если нужно отменить клик по кнопке - отменяем клик по ктопке. А если нужно отменить сабмит формы - отменяем сабмит формы. 19 мая 2020 в 20:56
  • Я немного исправлял ответ, обновите страницу и убедитесь что я не исправил то о чем вы говорили 19 мая 2020 в 20:57
  • $("#visa-form").on("submit", function(event) { event.preventDefault(); sendAjaxForm('visa-mail', "../template-parts/mail.php/"); return false; }); 19 мая 2020 в 21:17

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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