0

Такая проблема, при отправке формы должно всплывать окно "Спасибо", но вместо этого, перекидывает на пустую страницу обработчика php. Если из формы убрать action="mail.php", то форма не приходит на почту и обновляется главная страница. Что мне делать? Я уже многое перепробовал. Код формы:

<form class="form" method="post" action="mail.php" id="form">
                    <div class="inputs">
                        <input type="text" name="name" id="inpt" placeholder="ИМЯ" required><br>
                        <input type="text" name="email" id="inpt" placeholder="E-MAIL" required><br>
                        <input type="text" name="phone" id="inpt" placeholder="НОМЕР ТЕЛЕФОНА" required><br>
                        <select name="comfort" id="inpt">
                            <option disabled selected>УДОБНАЯ ФОРМА СВЯЗИ</option>
                            <option value="E-MAIL">E-MAIL</option>
                            <option value="PHONE">По телефону</option>
                            <option value="whatsapp">WhatsApp</option>
                            <option value="telegram">Telegram</option>
                            <option value="viber">Viber</option>
                        </select><br>
                        <select name="question" id="inpt">
                            <option disabled selected>ПО ВОПРОСУ</option>
                            <option value="visitka">Создание визитки</option>
                            <option value="listovka">Создание листовок</option>
                            <option value="baner">Создание баннера</option>
                            <option value="site">Создание сайта</option>
                            <option value="art">Создание арта</option>
                        </select>
                    </div>
                    <div class="soobch">
                        <textarea type="text" name="message" id="message" placeholder="Введите сообщение"></textarea>
                    </div>
                    <!--<div class="buton" id="buton"><img src="img/send.png" height="70px" width="auto"></div>-->
                    <input type="submit" name="submit" class="buton" id="buton">
                </form>
                <div class="overlay js-overlay-thank-you">
                    <div class="popup js-thank-you">
                        <h2>Спасибо за заявку. Мы свяжемся с вами в ближайшее время!</h2>
                        <div class="close-popup js-close-thank-you"></div>
                    </div>
                </div>
                </div>

Код Скрипта JS

$(document).ready(function() {
$("#form").submit(function(){
    if(document.form.name.value == '' || document.form.email.value == '' || document.form.phone.value == ''){
        valid = false;
        return valid;
    }
    $.ajax({
        type: "POST",
        url: "../mail.php",
        data: $(this).serialize()
    }).done(function(){
        $(".js-overlay-thank-you").fadeIn();
        $(this).find("input").val('');
        $("#form").trigger("reset");
    });
    return false;
});
});
//закрыть форму
    $(".js-close-thank-you").click(function() { 
        $(".js-overlay-thank-you").fadeOut();
    });
    $(document).mouseup(function (e) { 
        var popup = $(".popup");
        if (e.target!=popup[0]&&popup.has(e.target).length === 0){
            $(".js-overlay-thank-you").fadeOut();
        }
    });

e.preventDefault(); тоже не помогает. Не понимаю, что мне делать?

3
  • вы это e параметром обработчика то указывали ? ошибок в консоли нет?
    – teran
    30 мар 2018 в 10:40
  • event.preventDefault(); ставить нужно в сабмите формы 30 мар 2018 в 10:42
  • Как именно это сделать?
    – Glechik
    30 мар 2018 в 10:59

1 ответ 1

3

Неправильный способ получить document.form. Нужно так: document.getElementById('form'). Так же необходимо использовать e.preventDefault();, получив e аргументом коллбека, чтобы submit не уводил на другую страницу. Необходимы исправления (привожу весь js код):

$(document).ready(function() {
    $("#form").submit(function(e){
        e.preventDefault();
        if(document.getElementById('form').name.value == '' || document.getElementById('form').email.value == '' || document.getElementById('form').phone.value == ''){
            valid = false;
            return valid;
        }
        $.ajax({
            type: "POST",
            url: "mail.php",
            data: $(this).serialize(),
            success: function(data){
                $(".js-overlay-thank-you").fadeIn();
                $(this).find("input").val('');
                $("#form").trigger("reset");
            },
            error: function(jqXHR, exception) {
                console.log(jqXHR);
                console.log(exception);
            }
        });
        return;
    });
});
//закрыть форму
$(".js-close-thank-you").click(function() { 
    $(".js-overlay-thank-you").fadeOut();
});
$(document).mouseup(function (e) { 
    var popup = $(".popup");
    if (e.target!=popup[0]&&popup.has(e.target).length === 0){
        $(".js-overlay-thank-you").fadeOut();
    }
});
1

Ваш ответ

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

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