две кнопки в форме html
Множественные submit для формы
С приходом HTML5 формы сталее более универсальными. Элемент input теперь может содержать электронные адреса, даты и много другое, их можно отмечать как обязательные не прибегая к javascript – и это всего лишь некоторые из наиболее ценных возможностей. Также теперь для одной формы можно задействовать несколько submit кнопок, а также теперь есть возможность вынести кнопку submit за пределы формы.
Несколько submit внутри одной формы
До недавнего времени в форму можно было вставить только одну кнопку submit, в противном случае форма обрабатывала только последнюю кнопку. Добавляя method=»post» и url к элементу формы «form» мы получали рабочую форму.
Теперь ситуация изменилась – в HTML добавили новые свойства «formmethod» и «formaction». Они позволяют добавить метод post и url непосредственно в кнопку «submit», таким образом к form ничего дописывать не нужно. Имея эти параметры, прикрепленные к кнопке «submit», а не к form – все это добавляет больше гибкости форме. Теперь можно сделать столько кнопок, сколько будет необходимо для формы.
Теперь каждая кнопка «submit» относится к разным url и все это избавляет от того, что при верстке необходимо писать javascript код. Все это отлично работает и теперь по нажатии на какую-нибудь кнопку форма получит formmethod и formaction, которые перезапишут стандартные параметры method и action. Если в форме будет присутствовать обычная кнопка «submit» без новых параметров, то он вернет форме значения, установленные для элемента form.
Свойства formmethod и formaction поддерживаются всеми популярными браузерами
Элементы формы (input, select, textarea) за пределами формы
Общепринятый факт, что все элементы формы, принадлежащие ей должны находится внутри элемента
На сегодняшний день аттрибут form поддерживается всеми популярными браузерами, за исключением Internet Explorer (вплоть до 10й версии).
Две кнопки отправки в одной форме
У меня есть две кнопки отправки в форме. Как определить, какая из них была поражена серверной стороной?
Если вы дадите каждому имя, то выбранное будет отправлено как любой другой ввод.
Решение 1:
присвойте каждому входу различное значение и сохраняйте то же имя:
Затем в коде проверьте, что было сработало:
Проблема в том, что вы связываете свою логику с видимым пользователем текстом на входе.
Еще лучшее решение состоит в использовании тегов кнопок для отправки формы:
Существует новый подход HTML5 к этому, formaction атрибут:
Лично я обычно использую Javascript для удаленной отправки форм (для более быстрой обратной связи) с этим подходом в качестве резервного. Между двумя единственными людьми, которые не охвачены, являются IE тега.
Это очень легко проверить
Просто поместите это на HTML-страницу, нажмите кнопки и посмотрите на URL
Используйте formaction атрибут HTML (5-я строка):
Пример кода сервера (PHP):
elseif очень важно, потому что оба будут проанализированы, если нет. Наслаждаться.
Поскольку вы не указали, какой метод сценариев на стороне сервера вы используете, я приведу пример, который работает для Python, используя CherryPy (хотя это может быть полезно и для других контекстов):
Вместо того, чтобы использовать значение, чтобы определить, какая кнопка была нажата, вы можете использовать имя (с тегом вместо ). Таким образом, если ваши кнопки имеют одинаковый текст, это не вызовет проблем. Имена всех элементов формы, включая кнопки, отправляются как часть URL. В CherryPy каждый из них является аргументом для метода, который выполняет код на стороне сервера. Итак, если ваш метод имеет только **kwargs свой список параметров (вместо утомительного ввода каждого имени каждого элемента формы), вы можете проверить, какая кнопка была нажата следующим образом:
Несколько кнопок отправки в HTML-форме
допустим, вы создаете мастер в HTML-форме. Одна кнопка идет назад, а другая вперед. Так как назад кнопка появляется сначала в разметке при нажатии Enter он будет использовать эту кнопку, чтобы отправить форму.
что я хотел бы сделать, это решить, какая кнопка используется для отправки формы, когда пользователь нажимает Enter. Таким образом, при нажатии клавиши Enter мастер перейдет на следующую страницу, а не предыдущая. Вы должны использовать tabindex для этого?
23 ответов:
Я надеюсь, что это помогает. Я просто делаю трюк float ing кнопки справа.
таким образом, кнопка Prev находится слева от следующей кнопки, но следующая идет первой в HTML-коде:
Edit: преимущества перед другими предложениями: нет JavaScript, доступны, обе кнопки остаются type=»submit»
можно ли было бы изменить предыдущий тип кнопки на такую кнопку:
Теперь следующая кнопка будет по умолчанию, плюс вы может также добавить default атрибут к нему, так что ваш браузер будет выделять его так:
надеюсь, что это поможет.
дайте вашим кнопкам отправки такое же имя, как это:
когда пользователь нажимает enter и запрос идет на сервер, вы можете проверить значение для submitButton на вашем серверном коде, который содержит коллекцию form name/value пар. Например, в классическом ASP:
если тот факт, что первая кнопка используется по умолчанию, согласован между браузерами, почему бы не поместить их правильно в исходный код, а затем использовать CSS для переключения их видимых позиций? float их влево и вправо, чтобы переключить их вокруг визуально, например.
Если вы действительно просто хотите, чтобы он работал как диалог установки, как насчет того, чтобы просто сосредоточиться на кнопке «Далее» OnLoad. Таким образом, если пользователь нажимает Return, форма отправляет и идет вперед. Если они хотят вернуться, они могут нажать вкладку или нажать на кнопку.
поместите их в разметку как следующую кнопку сначала, затем предыдущую кнопку Далее.
затем использовать CSS, чтобы расположить их так, как вы хотите
иногда предоставленного решения @palotasb недостаточно. Есть случаи использования, когда, например, кнопка» фильтр «submit помещается над кнопками, такими как»следующий и предыдущий». Я нашел обходной путь для этого: скопировать кнопка отправки, которая должна действовать как кнопка отправки по умолчанию в скрытом div и поместить его внутри формы над любой другой кнопкой отправки. Технически он будет представлен другой кнопкой при нажатии Enter, а затем при нажатии на видимый далее кнопка. Но поскольку имя и значение одинаковы, нет никакой разницы в результате.
Кевин, это не может быть сделано с чистым HTML. Вы должны полагаться на JavaScript для этого трюка.
однако, если вы разместите две формы на HTML-странице, вы можете сделать это.
Form1 будет иметь предыдущую кнопку.
Form2 будет иметь любые пользовательские входы + следующая кнопка.
когда пользователь нажимает введите в Form2, следующая кнопка отправки будет срабатывать.
Я бы использовал Javascript для отправки формы. Функция будет вызвана событием OnKeyPress элемента формы и определит, был ли выбран ключ Enter. Если это так, он отправит форму.
вот две страницы, которые дают методы о том, как это сделать: 1,2. Основываясь на них, вот пример использования (на основе здесь):
это работает без javascript или CSS в большинстве браузеров:
Firefox, Opera, Safari, Google Chrome все работают.
Как всегда, IE-это проблема.
эта версия работает, когда javascript включен:
Так что недостаток в этом решении:
Предыдущая страница не работает, если вы используете IE с отключенным Javascript.
Имейте в виду, кнопка назад все еще работает!
Если у вас есть несколько активных кнопок на одной странице, то можно сделать что-то вроде этого:
отметьте первую кнопку, которую вы хотите триггеры на введите нажатие по умолчанию на форме. Для второй кнопки свяжите его с Backspace на клавиатуре. Backspace eventcode составляет 8.
надеюсь, что это помогает.
изменить порядок должен быть все, что нужно для этого. Пусть все будет просто.
еще один простой вариант-поместить кнопку «назад» после кнопки «отправить» в HTML-коде, но переместить ее влево, чтобы она появилась на странице перед кнопкой «Отправить».
еще один простой вариант-поместить кнопку «назад» после кнопки «отправить» в HTML-коде, но переместить ее влево, чтобы она появилась на странице перед кнопкой «Отправить».
изменить порядок должен быть все, что нужно для этого. Пусть все будет просто.
это то, что я пробовал: 1. Вам нужно убедиться, что вы даете своим кнопкам разные имена 2. Напишите оператор if, который выполнит необходимое действие, если нажата какая-либо кнопка.
кнопка элемента формы по умолчанию является первой кнопкой отправки в дереве заказ, владельцем формы которого является этот элемент формы.
Если агент пользователя поддерживает разрешение пользователю неявно отправлять форму (например, на некоторых платформах нажатие клавиши «enter» во время ввода текста поле ориентировано беспрекословно подчиняется форме).
имеющая следующие input be type= «submit»и изменение предыдущего ввода на type=» button » должно дать желаемое поведение по умолчанию.
в первый раз, когда я столкнулся с этим, я придумал onclick()/js hack, когда выбор не prev/next, который мне все еще нравится за его простоту. Это звучит так:
при нажатии любой кнопки отправки он сохраняет нужную операцию в скрытом поле (которое является строковым полем, включенным в модель, с которой связана форма) и отправляет форму контроллеру, который принимает все решения. В контроллере, вы просто напишите:
вы также можете немного затянуть это, используя числовые коды операций, чтобы избежать синтаксического анализа строк, но если вы не играете с перечислениями, код менее читаем, модифицируем и самодокументируем, а синтаксический анализ в любом случае тривиален.
я столкнулся с этим вопросом, пытаясь найти ответ на в основном то же самое, только с помощью asp.net элементы управления, когда я понял, что кнопка asp имеет свойство под названием UseSubmitBehavior что позволяет установить, какой из них делает подачу.
на всякий случай, если кто-то ищет asp.net кнопка способ сделать это.
С помощью javascript (здесь jQuery) вы можете отключить кнопку prev перед отправкой формы.
я решил очень похожую проблему следующим образом:
если javascript не включен, то форма подается в браузер с множеством кнопок. В этом случае попадание введите на textfield в пределах формы будет представлена форма с первой кнопкой вместо предполагаемого по умолчанию, но, по крайней мере, форма по-прежнему используется: Вы можете отправить как с prev и далее кнопки.
можно использовать Tabindex чтобы решить эту проблему, также изменение порядка кнопки было бы более эффективным способом для достижения этой цели. Измените порядок кнопок и добавьте float значения, чтобы назначить им нужную позицию, которую вы хотите показать в своем HTML вид.
Если вы нажмете на «Предыдущая страница», будет отправлено только значение» prev». Если вы нажмете на «Следующая страница», будет отправлено только значение» далее».
Если, однако, вы нажмете enter где-то в форме, ни «prev», ни «next» не будут отправлены.
таким образом, используя псевдо-код, вы можете сделать следующее:
Несколько кнопок отправки в HTML-форме
предположим, вы создаете мастер в форме HTML. Одна кнопка идет назад, другая вперед. С назад кнопка появляется сначала в разметке при нажатии Enter он будет использовать эту кнопку для отправки формы.
что я хотел бы сделать, это решить, какая кнопка используется для отправки формы, когда пользователь нажимает Enter. Таким образом, при нажатии Enter мастер перейдет на следующую страницу, а не предыдущая. Вы должны использовать tabindex для этого?
23 ответов
надеюсь, это поможет. Я просто делаю трюк float ing кнопки справа.
таким образом, кнопка Prev слева от следующей кнопки, но следующая сначала в HTML-коде:
Edit: преимущества перед другими предложениями: нет JavaScript, доступны, обе кнопки остаются type=»submit»
было бы возможно для вас изменить предыдущий тип кнопки в кнопку, как это:
Теперь следующая кнопка будет по умолчанию, плюс вы может также добавить default атрибут к нему, так что ваш браузер будет выделять его так:
надеюсь, что это поможет.
дайте вашим кнопкам отправки такое же имя, как это:
когда пользователь нажимает enter и запрос идет на сервер, вы можете проверить значение для submitButton на вашем серверном коде, который содержит коллекцию form name/value пар. Например, в классическом ASP:
если тот факт, что первая кнопка используется по умолчанию, согласован между браузерами, почему бы не поместить их правильно в исходный код, а затем использовать CSS для переключения их видимых позиций? float их влево и вправо, чтобы переключать их визуально, например.
Если вы действительно хотите, чтобы он работал как диалоговое окно установки, как насчет того, чтобы просто сосредоточиться на кнопке «Далее» OnLoad. Таким образом, если пользователь нажимает Return, форма отправляется и идет вперед. Если они хотят вернуться, они могут нажать вкладку или нажать на кнопку.
Он может работать с CSS
поместите их в разметку в качестве следующей кнопки сначала, затем предыдущую кнопку Далее.
затем использовать CSS, чтобы расположить их так, как вы хотите
иногда предоставленного решения @palotasb недостаточно. Есть случаи использования, когда, например, кнопка «фильтр» отправки помещается над кнопками, такими как»следующий и предыдущий». Я нашел обходной путь для этого: скопировать кнопка отправки, которая должна действовать как кнопка отправки по умолчанию в скрытом div и поместить его в форму выше любой другой кнопки отправки. Технически он будет представлен другой кнопкой при нажатии Enter, а затем при нажатии на видимый следующий кнопка. Но поскольку имя и значение одинаковы, в результате нет никакой разницы.
Кевин, это невозможно сделать с помощью чистого HTML. Вы должны полагаться на JavaScript для этого трюка.
однако, если вы разместите две формы на странице HTML, вы можете это сделать.
Form1 будет иметь предыдущую кнопку.
Form2 будет иметь любые пользовательские входы + следующая кнопка.
когда пользователь нажимает Enter в Form2 будет срабатывать следующая кнопка отправки.
Я бы использовал Javascript для отправки формы. Функция будет вызвана событием OnKeyPress элемента формы и определит, был ли выбран ключ Enter. Если это так,он представит форму.
вот две страницы, которые дают методы о том, как это сделать:1, 2. Основываясь на них, вот пример использования (на основе здесь):
это работает без javascript или CSS в большинстве браузеров:
Firefox, Opera, Safari, Google Chrome все работают.
Как всегда, IE является проблемой.
эта версия работает, когда javascript включен:
таким образом, недостаток этого решения:
Предыдущая страница не работает, если вы используете IE с выключенным Javascript.
Имейте в виду, кнопка «назад» все еще работает!
Если у вас есть несколько активных кнопок на одной странице, то можно сделать что-то вроде этого:
отметьте первую кнопку, которую вы хотите триггеры на Enter нажатие клавиши как defaultbutton на форме. Для второй кнопки свяжите ее с Backspace на клавиатуре. Backspace eventcode составляет 8.
надеюсь, что это помогает.
изменить порядок должен быть все, что нужно для этого. Сохранить его простым.
другой простой вариант-поместить кнопку «назад» после кнопки «отправить» в HTML-коде, но переместите ее влево, чтобы она появилась на странице перед кнопкой «Отправить».
другой простой вариант-поместить кнопку «назад» после кнопки «отправить» в HTML-коде, но переместите ее влево, чтобы она появилась на странице перед кнопкой «Отправить».
изменить порядок должен быть все, что нужно для этого. Сохранить его простым.
это то, что я пробовал: 1. Вам нужно убедиться, что вы даете своим кнопкам разные имена 2. Напишите оператор if, который выполнит требуемое действие, если какая-либо кнопка нажата.
кнопка элемента формы по умолчанию-первая кнопка отправки в дереве порядок, владельцем формы которого является этот элемент формы.
если агент пользователя поддерживает разрешение пользователю отправлять форму неявно (например, на некоторых платформах нажатие клавиши «enter» во время текста поле фокусируется неявно, передает форму).
имеющая следующие input be type= «submit»и изменение предыдущего ввода на type=» button » должно дать желаемое поведение по умолчанию.
в первый раз, когда я столкнулся с этим, я придумал onclick()/JS hack, когда выбор не prev/next, который мне все еще нравится за его простоту. Он звучит так:
при нажатии любой кнопки отправки он сохраняет нужную операцию в скрытом поле (которое является строковым полем, включенным в модель, с которой связана форма) и отправляет форму контроллеру, который принимает все решения. В контроллере, вы просто пиши:
вы также можете немного затянуть это, используя числовые коды операций, чтобы избежать синтаксического анализа строк, но если вы не играете с перечислениями, код менее читаем, модифицируем и самодокументируем, и синтаксический анализ тривиален, в любом случае.
я столкнулся с этим вопросом, пытаясь найти ответ на в основном то же самое, только с asp.net элементы управления, когда я понял, что кнопка asp имеет свойство под названием UseSubmitBehavior это позволяет установить, какой из них делает отправку.
на всякий случай, если кто-то ищет asp.net кнопка способ сделать это.
С помощью javascript (здесь jQuery) вы можете отключить кнопку prev перед отправкой формы.
я решил очень похожую проблему следующим образом:
если javascript не включен, то форма подается в браузер с множеством кнопок. В этом случае наезд введите textfield в пределах формы будет отправить форму с первой кнопкой вместо предполагаемого по умолчанию, но, по крайней мере, форма по-прежнему может использоваться: вы можете отправить оба prev и далее кнопки.
можно использовать Tabindex чтобы решить эту проблему, также изменение порядка кнопки было бы более эффективным способом достижения этого. Измените порядок кнопки и добавьте float значения, чтобы назначить им нужную позицию, которую вы хотите показать в своем HTML вид.
используя приведенный вами пример:
Если вы нажмете «Предыдущая страница», будет отправлено только значение» prev». Если вы нажмете «Следующая страница», будет отправлено только значение» далее».
Если, однако, вы нажмете enter где-то в форме, ни «prev», ни «next» не будут отправлены.
таким образом, используя псевдо-код, вы можете сделать следующее:
Две кнопки в форме html
Несколько кнопок отправки в форме HTML
Присвойте кнопкам отправки одно и то же имя:
Когда пользователь нажимает Enter и запрос отправляется на сервер, вы можете проверить значение для submitButton в коде на стороне сервера, который содержит коллекцию пар name/value формы. Например, в ASP Classic :
Это не то, что спросил пользователь. Пользователь хотел знать, как контролировать, какая кнопка отправки в форме активируется при нажатии Enter, т.е. которая является кнопкой по умолчанию.
не работает в приложении I18n, где вы даже не знаете метку кнопки.
В каком системном или технологическом решении сам сервер не знает, что за метка использовалась для кнопки «Далее» и «Назад»? Разве сервер не сгенерировал кнопку «Вперед» и «Назад»? (Если локализация обрабатывается на стороне клиента, я думаю, что сервер может не знать, но я никогда не слышал об этом для HTML)
Измените предыдущий тип кнопки на кнопку, подобную этой:
При вводе типа «кнопка» действие формы не выполняется. Вы можете иметь onclick или что-то, таким образом выполняя другую функцию, чем действие формы по умолчанию (которое выполняется нажатием кнопки типа submit). Это то, что я искал, и поэтому я проголосовал за это. Не могу говорить за атрибут «default», это не было частью моей проблемы;) спасибо за ваше разъяснение.
Если тот факт, что первая кнопка используется по умолчанию, одинаков для всех браузеров, поместите их правильно в исходный код, а затем используйте CSS для переключения их видимых позиций.
float их влево и вправо, например, чтобы переключать их визуально.
Что произойдет, если JavaScript отключен?
Вы не должны использовать для комментирования JS, эти теги не являются токенами языка Javascript
@Marecky Они не должны комментировать JS. Они игнорируются при анализе содержимого
Для этого нужно изменить порядок вкладок. Сохраняйте это простым.
Кнопка элемента формы по умолчанию является первой кнопкой отправки в дереве порядок, владельцем формы которого является этот элемент формы.
Наличие следующего ввода будет type = «submit» и изменение предыдущего ввода на type = «button» должно дать желаемое поведение по умолчанию.
С помощью JavaScript (здесь jQuery) вы можете отключить кнопку prev перед отправкой формы.
В первый раз, когда я столкнулся с этим, я наткнулся на взлом onclick () / JavaScript, когда выбор не задан / следующий, который мне все еще нравится из-за его простоты. Это выглядит так:
При нажатии любой кнопки отправки она сохраняет требуемую операцию в скрытом поле (которое представляет собой строковое поле, включенное в модель, с которой связана форма) и отправляет форму в контроллер, который принимает все решения. В контроллере вы просто пишете:
Вы также можете немного усилить это, используя числовые коды операций, чтобы избежать синтаксического анализа строки, но если вы не играете с перечислениями, код становится менее читабельным, изменяемым и самодокументируемым, и анализ в любом случае тривиален.