две кнопки submit в одной форме
Множественные 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 форма и 2 submit. Как реализовать?
Очень долго выдумывал какое дать название этой статье и ничего лучшего не смог придумать. Это единственное название, которое хоть как-то отражает суть изложенного. Я, если честно, не знаю как правильно это называется, поэтому назвал статью также, как пытался найти хоть какую-то информацию в поисковике по этой теме.
Вот и выложил на Ваш суд.
Суть проблемы
После самостоятельной реализации, я все таки нашел несколько решения, которые основывались на использовании обычных кнопок, к которым прикручивался JS.
Я реализовал задуманное практически также, но использовал стандартный тип submit. Все вроде работает и на мой взгляд мое решение более логически верное.
Для того, чтобы было более проще понять что я хочу и как это работает вот реально рабочий пример, в виде формы, у который 2 submit`a, пересылающие данные на разные страницы:
Как сделать у 1 формы 2 submit`а?
Все оказывается просто. За все эти действия отвечает небольшой кусочек кода, который приведен ниже:
В примере эти 2 кнопки отсылают данные: на главную страницу и в один из разделов блога. Это всего-лишь пример и поэтому Вы сами можете руководить этим процессом как Вам это заблагорассудится. Вместо моих ссылок можно указать php-файлы, который будут работать с этими данными.
Я не утверждаю, что это решение какое-то уникальное и, возможно, кто-то также реализовал эту потребность. Возможно даже есть способы сделать это лучше, но мне, как человеку который самостоятельно до этого дошел, думается, что этот способ лучший. 🙂
Две кнопки отправки в одной форме
У меня есть две кнопки отправки в форме. Как определить, какая из них была поражена серверной стороной?
Если вы дадите каждому имя, то выбранное будет отправлено как любой другой ввод.
Решение 1:
присвойте каждому входу различное значение и сохраняйте то же имя:
Затем в коде проверьте, что было сработало:
Проблема в том, что вы связываете свою логику с видимым пользователем текстом на входе.
Еще лучшее решение состоит в использовании тегов кнопок для отправки формы:
Существует новый подход HTML5 к этому, formaction атрибут:
Лично я обычно использую Javascript для удаленной отправки форм (для более быстрой обратной связи) с этим подходом в качестве резервного. Между двумя единственными людьми, которые не охвачены, являются IE тега.
Это очень легко проверить
Просто поместите это на HTML-страницу, нажмите кнопки и посмотрите на URL
Используйте formaction атрибут HTML (5-я строка):
Пример кода сервера (PHP):
elseif очень важно, потому что оба будут проанализированы, если нет. Наслаждаться.
Поскольку вы не указали, какой метод сценариев на стороне сервера вы используете, я приведу пример, который работает для Python, используя CherryPy (хотя это может быть полезно и для других контекстов):
Вместо того, чтобы использовать значение, чтобы определить, какая кнопка была нажата, вы можете использовать имя (с тегом вместо ). Таким образом, если ваши кнопки имеют одинаковый текст, это не вызовет проблем. Имена всех элементов формы, включая кнопки, отправляются как часть URL. В CherryPy каждый из них является аргументом для метода, который выполняет код на стороне сервера. Итак, если ваш метод имеет только **kwargs свой список параметров (вместо утомительного ввода каждого имени каждого элемента формы), вы можете проверить, какая кнопка была нажата следующим образом:
Two submit buttons in one form
I have two submit buttons in a form. How do I determine which one was hit serverside?
20 Answers 20
Solution 1:
Give each input a different value and keep the same name:
Then in the code check to see which was triggered:
The problem with that is you tie your logic to the user-visible text within the input.
If you give each one a name, the clicked one will be sent through as any other input.
An even better solution consists of using button tags to submit the form:
There’s a new HTML5 approach to this, the formaction attribute:
Apparently this does not work in Internet Explorer 9 and earlier, but for other browsers you should be fine (see: formaction Attribute»>w3schools.com HTML formaction Attribute).
Personally, I generally use JavaScript to submit forms remotely (for faster perceived feedback) with this approach as backup. Between the two, the only people not covered are Internet Explorer before version 9 with JavaScript disabled.
Of course, this may be inappropriate if you’re basically taking the same action server-side regardless of which button was pushed, but often if there are two user-side actions available then they will map to two server-side actions as well.
As noted by Pascal_dher in the comments, this attribute is also available on the tag as well.
This is extremely easy to test:
Just put that in an HTML page, click the buttons, and look at the URL.
Use the formaction HTML attribute (5th line):
Maybe the suggested solutions here worked in 2009, but I’ve tested all of this upvoted answers and nobody is working in any browsers.
The only solution I found working was this (but it’s a bit ugly to use I think):
The best way to deal with multiple submit buttons is using a switch case in the server script
File demo_form.php
The same form is being used to add a new user and login user.
Example server code (PHP):
elseif very important, because both will be parsed if not.
Since you didn’t specify what server-side scripting method you’re using, I’ll give you an example that works for Python, using CherryPy (although it may be useful for other contexts, too):
Rather than using the value to determine which button was pressed, you can use the name (with the tag instead of ). That way, if your buttons happen to have the same text, it won’t cause problems. The names of all form items, including buttons, are sent as part of the URL.
In CherryPy, each of those is an argument for a method that does the server-side code. So, if your method just has **kwargs for its parameter list (instead of tediously typing out every single name of each form item) then you can check to see which button was pressed like this:
Несколько кнопок отправки в 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» не будут отправлены.
таким образом, используя псевдо-код, вы можете сделать следующее: