Как сделать Submit формы в модальном окне?

Question

[Евгений]

В общем отправляется у меня форма не средставми php, а аяксом.

Но для того чтобы работала html5 валидация, а именно параметр input required, нужно чтобы происходил submit формы.

Форма у меня без кнопок. А кнопки вынесены в футер модального окна:

'footer' => '<button type = "button" class = "btn btn-style-two" data-dismiss = "modal">Закрыть</button>
<button type = "button" class = "btn btn-style-seven" id = "sendResponse">Отправить</button>'

Переделал аякс на Sumbit формы:

$('#form_vac').on('submit', function ()
    {
        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('Ошибка отправки');
                }
            }
        );
    });

А на кнопку с футера повесил sumbit этой формы

$("#sendResponse").on('click', function() {
        $("#form_vac").submit();
    });

но по клику на кнопку Отправить просто редирект на главную происходит. Где я ошибся, ведь вроде всё правильн

Comments

[Дмитрий]

т.е button[type="submit"] находится вне тега form?

если это так, тогда необходимо связать форму с кнопкой

форме задаем id, например id="formID"
для кнопки ставим атрибут form="formID"

[Евгений]

Дмитрий, За формой находится кнопка type = "button"

А к её клику привязан submit формы по id вот туть

$("#sendResponse").on('click', function() {
        $("#form_vac").submit();
    });

[Николай Гаврилович]

Евгений, а зачем? поставь type="submit" и сделай как выше написали...

[Евгений]

Николай Гаврилович, Но чисто теоретически я же всё правильно написано) По событию клика происходит событие сабмита формы. Но ради инереса сейчас переделаю как вы предлагаете

[Николай Гаврилович]

Евгений, Ну чисто теоретически - да. создаешь ивент по клику, но это надо почитать спецификацию submit или on submit, например может не отрабатывать по программному ивенту, а только по реальному нажатию....я не читал, врать не буду. Обычно интернета хватает для решения подобных задач :)

[Евгений]

Николай Гаврилович, Я cменил тип на самбит и приписал id формы. Из JS убрал обработчик клика кнопки.

Сначала подумал, что Ура, помогло. Так как заработала валидация и отправить не нажималось пока поля не заполнил. Но по клику происходит снова редирект на главную, а это не происходит

$('#form_vac').on('submit', function ()
    {

}

[Николай Гаврилович]

Евгений, setTimeout( 'location="index.php?r=site/index";', 5); вот это вот что? редирект после 5 секунд?

[Николай Гаврилович]

Евгений, Давай тогда дебажить, открываешь консоль разработчика в хроме, вкладка network, там список всего что подгружается и отправляется, заполняешь форму, отправляешь, должна появится строка с таким названием "index.php?r=site/vacancies" по нажатию будет видно что отправилось, если не появилось, значит скорее всего не работает аякс твой. если появилось значит аякс отправил а потом редирект на главную....ТРудно что-то подсказать когда не видишь код :)

[Евгений]

Николай Гаврилович, Какая разница, если это происходит при success аякса? А сам аякс не отправляется. И там не секунды , а милисекунды

[Евгений]

Николай Гаврилович, Не срабатывает аякс в общем. Только вот почему

[Николай Гаврилович]

Евгений, Подсмотри в интернете, например здесь или погугли, то есть сабмит срабатывает, а то что аякс не отправляет/не получает данные это уже другое дело

[Евгений]

Николай Гаврилович, Я этих аяксов сотни переделал и только вот тут в модальном окне проблемы.

Если бы аякс не получал данные, была бы 502 ошибка. ПРосто такое чувство будто событие sumbit не видит. Скорее всего придётся делать кнопки в форме

Answer 1

[netrox]

$('#form_vac').on('submit', function ()
    {
        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('Ошибка отправки');
                }
            }
        );
    return false;  //запрет перенаправления
    });

Comments

[Евгений]

Не помогает. Просто по клику редирект на главную. Причём в консоли нет ошибок. Ни в консоли браузера , ни в консоли Yii2. Откуда вообще этот редирект берётся. Если бы он появлялся из Success, то изначально срабатывал алерт, да и сам аякс отправился бы

[netrox]

Скинь весь код.

[Евгений]

netrox, Я просто полностью модалку скинуть не могу, так как я её формирую виджетом PHP. Поэтому скинул только футер.

Хедер и Тело формируется аяксом:

Туть тело и хедер

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 role="form" id="form_vac">'+
            '<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">'+



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

    }

    $('.btnbaton').on('click', function (e)
    {
        e.preventDefault();
        var id = $(this).data('id');
        var name = $(this).data('name');

        $.ajax(
            {
                url:'index.php?r=vacancies/response',
                data: {par:[id,name]},
                type: 'POST',
                success: function (res) {
                    showCart(res);
                },
                error: function () {
                    alert('Error');
                }
            }
        );
    });

А отправку с формы данных я скинул

[Евгений]

netrox, Я понимаю, что можно было тупо убрать кнопки с футера и добавить кнопку на форму и сделать сабмит. Так скорее всего работало. Но я хочу самбит именно кнопкой модального окна