@evgen9586
Backend-dev. Лублу Enterprise и не люблю понты)

И всё же, как сделать Submit формы в модальном окне?

И всё же. Почему не работает submit формы из модального окна?

Вчера я пытался повесить submit формы на кнопки из футера модального окна - html5 валидация проходила, без набора данных не нажималось. Зато по клику на кнопку сабмита просто редирект на главную. Без отправки аякса.

Хрен с ним сказал я. Вынесу кнопки на форму. Добавил я кнопки на форму
Формирование хедера и тела модалки

function showCart(cart)
    {
        $('#response .modal-header').html('<h3 class="modal-title text-center" style="font-family: \'Exo 2\', sans-serif;">' + 'Отклик на вакансию - ' + cart[1] + '</h3>');

        $('#response .modal-body').html(
            '<form id="formvac">'+
            '<div class="form-group">'+
            '<label for="email">Ф.И.О *</label>'+
            '<input type="name" class="form-control" id="name" placeholder="Например: Иванов Иван Иванович" required>'+
            '</div>'+
            '<div class="row">'+
            '<div class="col-lg-6">'+
            '<div class="form-group">'+
            '<label for="pass">Телефон *</label>'+
            '<input type="tel" class="form-control" id="number" placeholder="Например:+375291234567" required>'+
            '</div>'+
            '</div>'+
            '<div class="col-lg-6">'+
            '<div class="form-group">'+
            '<label for="pass">Возраст</label>'+
            '<input type="number" class="form-control" id="age" placeholder="Например: 26">'+
            '</div>'+
            '</div>'+
            '</div>'+
            '<label for="exp">Опыт работы *</label>'+
            '<input type="name" class="form-control" id="exp" placeholder="Например: 5 лет" required>'+
            '</div>'+
            '<br>'+
            '<div class="form-group">'+
            '<label for="email">Расскажите о себе</label>'+
            '<textarea  class="form-control" id="text" placeholder="Опыт работы, место работы, ключевые навыки">'+
            '</textarea>'+
            '<input type="hidden" class="form-control" id="idbat" placeholder="Например: 26">'+
            '<button type = "button" class = "btn btn-style-two" data-dismiss = "modal">Закрыть</button>'+
            '<button type = "submit" class = "btn btn-style-seven" id = "sendResponse">Отправить</button>'+



            '</form>'
        );
        document.getElementById("idbat").value = cart[0];
        $('#response').modal();

    }


нажимаю отправить. ЧЫК ЧЫРЫК и снова редирект на главную без ошибок в консоли без ошибок в консоли yii2.

Вот отправка
$('#formvac').on('submit', function (e)
    {
        e.preventDefault();
        var name = $("#name").val();
        var number = $("#number").val();
        var age = $("#age").val();
        var exp = $("#exp").val();
        var text = $("#text").val();
        var id = $('#idbat').val();


        $.ajax(
            {
                url:'index.php?r=site/vacancies',
                data: {a:[name,number, age, exp,  text, id]},
                type: 'POST',
                success: function (res) {
                    alert('Отклик на вакансию принят, после изучения ваших данных мы свяжемся с Вами. Сейчас произойдёт переадресация на главную страницу');
                    setTimeout( 'location="index.php?r=site/index";', 5);
                    console.log(res);
                },
                error: function () {
                    alert('Ошибка отправки');
                }
            }
        );

    });

И ради святого медоеда, не приписывайте редирект вот этому товарищу
setTimeout( 'location="index.php?r=site/index";', 5);

Я убирал его из success и редирект всё равно происходит.

C чем может быть связано это колдунство? Раньше у меня отправка аякса висела на клике и всё работало без проблем. Но я хотел именно использовать html5 валидацию , поэтому решил переделать под submit формы.

Но тут из окна вылетел черный маг в плаще) Как вылечить сабмит?
  • Вопрос задан
  • 761 просмотр
Решения вопроса 1
@Arik
А если:
$('body').on('submit', '#formvac', function() {
//...
});
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@Eugeny1987
Работаю с HostCMS
$('#formvac').on('submit', function (e)
    {
// ....
return false;
});
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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