@vikholodov

Как скрыть форму после фактически успешной отправки данных?

В общем, беда в чем: независимо заполнены ли инпуты или нет, срабатывает событие успешной отправки данных и форма скрывается, появляется блок с сообщение об успешной отправки данных. Нужно сделать так, чтобы пустые поля не отправлялись и срабатывал html5 валидация email, прежде чем сработает обработчик. Делается все это дело на wordpress
<div class="form_unisender box-shadow-sidebar">
                <h2 class="text-center">Подписка</h2>
                <div class="d-flex space-between align-items-center form_unisender_inside">
                    <div class="d-flex align-items-center">
                        <img src="'. get_template_directory_uri().'/images/form_precent.png" alt=""><span>Акции и спецпредложения банков и МФК</span>
                    </div>
                    <div class="d-flex align-items-center">
                        <img src="'. get_template_directory_uri().'/images/form_tick.png" alt=""><span>Подписка на изменение кредитного рейтинга</span>
                    </div>
                    <div class="d-flex align-items-center">
                        <img src="'. get_template_directory_uri().'/images/form_play.png" alt=""><span>Полезные статьи, инфографика и видео</span>
                    </div>
                </div>
                <div class="d-flex form_unisender_form content-center">
                    <form id="ajax_form" class="text-center d-flex align-items-center" method="POST" action="">
                        <input name="unisender_email" class="" type="email" placeholder="Email">
                        <input name="unisender_name" type="text" placeholder="Имя">
                        <button id="ajax_form_btn" type="submit" class="search-btn">Подписаться</button>
                    </form>
                </div>
            </div>
            <div id="ajax_form_success" class="d-flex flex-column text-center">
                <img src="'. get_template_directory_uri().'/images/checked_form.png" alt="">
                <h2>Спасибо за подписку</h2>
                <p>Ваши даные успешно отправлены.</p>
            </div>

$( document ).ready(function() {
    $("#ajax_form_btn").click(
        function(){

            sendAjaxForm('result_form', 'ajax_form', 'vik_form.php');
            return false; 
        }
    );
});
 
function sendAjaxForm(result_form, ajax_form, url) {
    jQuery.ajax({
        beforeSend: function(){

        },
        url:     url,
        type:     "POST",
        dataType: "html",
        data: jQuery("#"+ajax_form).serialize(),  
        success: function(response) { //Данные отправлены успешно
            result = jQuery.parseJSON(response);
            $('.form_unisender').hide();
            $('#ajax_form_success').show();
        },
        error: function(response) { // Данные не отправлены
            document.getElementById(result_form).innerHTML = "Иформация ведена не верно. Проверьте правильность введенных данных и повторите попытку";
        },

    });
}
  • Вопрос задан
  • 1830 просмотров
Решения вопроса 1
@vikholodov Автор вопроса
Ура, товарищи. Рабочий код:
$( document ).ready(function() {
    $("#ajax_form").submit(function(e) {
        e.preventDefault();
        $.ajax({
            type: "POST",
            url: "vik_form.php",
            data: $(this).serialize()
        }).done(function () {
            
            $(".form_unisender").hide();
            $("#ajax_form_success").show();
        });
        return false;
    });
});
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
Exploding
@Exploding
wtf?
Добавить required для полей
<form id="ajax_form" class="text-center d-flex align-items-center" method="POST" action="vik_form.php">
   <input name="unisender_email" class="" type="email" placeholder="Email" required>
   <input name="unisender_name" type="text" placeholder="Имя" required>
   <button type="submit" class="search-btn">Подписаться</button>
</form>
<hr>
<div id="ajax_form_success" class="d-flex flex-column text-center">
     <!--не надо тут Н2 и спасибы разные:) Оно ж в индекс попадет, и будет мешать только-->          
 </div>

function sendAjaxForm:
$("#ajax_form").submit(function(e){
   $("#ajax_form_success").html(" <h2>Спасибо за подписку!</h2><p>Ваши даные успешно отправлены. Ждите и что-то случиться!</p>");
   e.preventDefault();
});
Ответ написан
alexey_bille
@alexey_bille
Web developer
Хороший валидатор бутстрапа 1000hz.github.io/bootstrap-validator

$('#form').validator().on('submit', function (e) {
  if (e.isDefaultPrevented()) {
    // handle the invalid form...
  } else {
    // everything looks good!
  }
})
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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