Отправить форму с первой кнопкой, которая включена в форме с несколькими кнопками - PullRequest
Новая
       17

Отправить форму с первой кнопкой, которая включена в форме с несколькими кнопками

1 голос
/ 11 июля 2019

У меня есть форма, в которой есть 3 разные кнопки, которые включаются / отключаются в разное время. 

<html>
    <form method="GET">
        <input type="text" name="test"/>
        <button name="submit1" type="submit">Submit</button>
        <button disabled name="submit2" type="submit">Submit</button>
        <button disabled name="submit3" type="submit">Submit</button>
    </form>
</html>

По умолчанию первая кнопка включена.Если мой фокус находится внутри элемента формы, и я нажимаю клавишу ввода, эта кнопка срабатывает и отправляет форму, другие кнопки отключены.

Однако, если я включу 2-ю кнопку и отключу 1-ю кнопку, форма не отправляется вообще, когда я нажимаю клавишу ввода.

Как я могу заставить enter отправить форму с помощью первой кнопки, которая не отключена?На любой вкладке пользователь сможет видеть только одну кнопку отправки, и это будет ЕДИНСТВЕННАЯ кнопка отправки на всей странице, которая включена.

Ответы [ 2 ]

1 голос
/ 11 июля 2019

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

<form method="GET">
    <button hidden type="submit"></button>
    <input type="text" name="test"/>
    <button disabled name="submit1" type="submit">Submit</button>
    <button name="submit2" type="submit">Submit</button>
</form>
0 голосов
/ 12 июля 2019

Единственная причина, по которой я вижу только одно действие формы и несколько кнопок отправки, заключается в том, что мы хотим выполнить дополнительные задачи непосредственно перед отправкой формы.

Я уже был в такой ситуации, и решение было быпросто.Для начала, нет необходимости иметь несколько кнопок отправки, если, в конце концов, действие формы только одно, поэтому я предлагаю сохранить идею скрытой кнопки отправки по умолчанию, но с идентификатором для ее нацеливания и вызвать щелчок.событие на нем.

Вы можете попробовать этот пример кода, который я создал в TryIt Editor Пример кода

Я прокомментировал действие отправки ввсе три обработчика событий, чтобы избежать перезагрузки страницы, вызванной отправкой формы.Вы увидите, что в каждой вкладке есть экземпляр формы, а внутри вкладки есть селектор формы, он закомментирован на всякий случай, если это ваш вариант использования, но если это так, вы должныудалите экземпляр формы за пределами вкладок, чтобы избежать проблем, даже если document.querySelector('#' + tabName + 'multi-submit-form') нацеливается только на первое вхождение.

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...