Подтверждение загрузки: форма не отправляется при нажатии клавиши ввода - PullRequest
Новая
       9

Подтверждение загрузки: форма не отправляется при нажатии клавиши ввода

0 голосов
/ 19 ноября 2018

Я использую bootbox, чтобы показать пользовательскую форму пользователю. После этого эта форма используется для изменения пользовательского интерфейса. Все отлично работает, если я нажимаю кнопку «ОК» в диалоге загрузки. Нажатие кнопки ВВОД без касания формы (все значения по умолчанию) также работает правильно. Но если я нацеливаюсь на одно из моих полей ввода и затем нажимаю ввод, моя страница просто сбрасывается, как если бы я нажал F5. Это можно исправить?

Мой код: 

bootbox.confirm({
        message: "<form id='newGameForm' action=''>\
    Playlist ID: <br> \
    <input type='text' name='playlistID' size='35'/><br>\
    Ruleset: <br>\
    <input type='radio' name='rules' value='classic' checked> Classic\ 
    <input type='radio' name='rules' value='adv'> Advanced\
    </form>",
        callback: function (result) {
            if (result) {
                let newGameParams = $('#newGameForm').serializeArray().reduce(function (obj, item) {
                    obj[item.name] = item.value;
                    return obj;
                }, {});
                initGame(newGameParams);
            }
        }
    });

Редактировать: Я обнаружил, что нажатие клавиши ввода при фокусировке формы обходит отправку в загрузочном ящике и вместо этого использует собственную отправку формы. Это добавляет ?playlistID=ABC123&rules=classic к URL и перезагружает страницу. Можно ли как-то перенаправить отправку?

1 Ответ

0 голосов
/ 25 ноября 2018

Это не то, как предполагается использовать помощник подтверждения - ваш вариант использования в значительной степени требует от вас использования помощника диалога. Как минимум, чтобы заставить работать то, что у вас есть , вероятно, , вам нужно захватить событие onsubmit формы, которую вы вставляете в диалог.

Вот пример. Я также переместил вашу форму в тег шаблона сценария, так как он делает остальное чище:

Шаблон: 

<script type="text/template" id="form-template">
    <form id="newGameForm" action="">
        Playlist ID: <br>
        <input type="text" name="playlistID" size="35"><br>
        Ruleset: <br>
        <label><input type="radio" name="rules" value="classic" checked> Classic</label> <br>
        <label><input type="radio" name="rules" value="adv"> Advanced</label> <br>
    </form>
</script>

JavaScript: 

var template = $('#form-template').html();

var $dialog = bootbox.confirm({
    message: template,
    callback: function (result) {
        if (result) {
            let newGameParams = $('#newGameForm').serializeArray().reduce(function (obj, item) {
                obj[item.name] = item.value;
                return obj;
            }, {});
            initGame(newGameParams);
        }
    }
});

$dialog.on('shown.bs.modal', function(e){
    var $form = $('#newGameForm');

    $form.on('submit', functino(fe){
        fe.preventDefault();

        $dialog.find('.btn-primary').trigger('click');
    });
});

Это работает только в том случае, если вы не переопределяете класс btn на кнопке подтверждения, но, как есть, в основном вызывает нажатие кнопки подтверждения при отправке встроенной формы. Этот пример подключается к событию отправки формы для события said.bs.modal (эта ссылка предназначена для Bootstrap 4, но то же событие доступно в Bootstrap 3).

...