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

Question

[Евгений]

И всё же. Почему не работает 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="Например:[phone]" 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 формы.

Но тут из окна вылетел черный маг в плаще) Как вылечить сабмит?

Answer 1

[Arman]

А если:

$('body').on('submit', '#formvac', function() {
//...
});

Comments

[Евгений]

Мне кажется выпив кружечку кофе я обнаружил корень зла. И это то что формировать модалку средствами Yii2 было плохой затеей. Сейчас переделаю модалку и отпишусь так как на странице вакансий не одна аномалия случается

[Евгений]

Сделал нормальную модалку, но это не помогло. Попробовал ваш вариант, и вуаля, Ajax отправился. Не знаю в чём магия, но спасибо

[Виталий]

Евгений, в том, что вы ищите селектор, которого не было при загрузке страницы, вы его добавили после, поэтому надо искать его в document:

$('document').on('submit', 'селектор', function({});

[Arman]

Евгений, вы вешали события на элементы которых еще толком нет в DOM, в таких ситуациях вешают события на родителя

[Евгений]

Arik, Понял, буду знать. Просто гуглил много про эти модалки и везде сделано было как у меня

[ThunderCat]

Евгений, если хотите чтобы это работало "как у меня", достаточно не рисовать модалку средствами js, а заранее создать ее как элемент хтмл со свойством display: none, и по событию показывать. Тогда событие можно привязывать вашим способом, напрямую к элементу, который уже есть в DOM.

[Евгений]

ThunderCat, У меня модалка с динамическим контентом. В ней меняются данные в зависимости от вакансии. поэтому модалка такого типа

[ThunderCat]

Евгений, данные могут быть динамическими, достаточно что бы был сформирован объект формы.

[Евгений]

ThunderCat, Ну по сути мне нужен только динамический хедер(пока что) поэтому боди можно в вид перенести из js

Answer 2

[Евгений]

$('#formvac').on('submit', function (e)
    {
// ....
return false;
});