Несколько кнопок отправки в форме HTML

263

Допустим, вы создали мастера в форме HTML. Одна кнопка возвращается назад, а другая - вперед. Поскольку кнопка « Назад» появляется первой в разметке при нажатии Enter, она будет использовать эту кнопку для отправки формы.

Пример:

<form>
  <!-- Put your cursor in this field and press Enter -->
  <input type="text" name="field1" />

  <!-- This is the button that will submit -->
  <input type="submit" name="prev" value="Previous Page" />

  <!-- But this is the button that I WANT to submit -->
  <input type="submit" name="next" value="Next Page" />
</form>

Развернуть фрагмент

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

html forms form-submit submit-button Kevin
источник

142

Надеюсь, это поможет. Я просто делаю трюк floatс кнопками справа.

Таким образом, Prevкнопка остается слева от Nextкнопки, но Nextв структуре HTML стоит первой:

.f {
  float: right;
}
.clr {
  clear: both;
}

<form action="action" method="get">
  <input type="text" name="abc">
  <div id="buttons">
    <input type="submit" class="f" name="next" value="Next">
    <input type="submit" class="f" name="prev" value="Prev">
    <div class="clr"></div><!-- This div prevents later elements from floating with the buttons. Keeps them 'inside' div#buttons -->
  </div>
</form>

Развернуть фрагмент

Преимущества перед другими предложениями: нет кода JavaScript, доступны и обе кнопки остаются type="submit".

palotasb
источник

23

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

Стив

61

Измените предыдущий тип кнопки на кнопку, подобную этой:

<input type="button" name="prev" value="Previous Page" />

Теперь кнопка « Далее» будет использоваться по умолчанию, плюс вы также можете добавить defaultк ней атрибут, чтобы ваш браузер выделил его следующим образом:

<input type="submit" name="next" value="Next Page" default />

Уолли Лоулесс
источник

39

О каком defaultатрибуте ты говоришь? Нет атрибута «по умолчанию», который был бы действительным: w3.org/html/wg/drafts/html/master/… (не в HTML5, HTML 4.01 Transitional / Strict, XHTML 1.0 Strict). И я не понимаю, почему лучше изменить тип ввода с submitна button. Вы можете иметь несколько элементов ввода типа отправки в одной форме без проблем. Я не очень понимаю, почему этот ответ так проголосовал.

Sk8erPeter

3

При вводе типа «кнопка» действие формы не выполняется. Вы можете иметь onclick или что-то еще, таким образом выполняя другую функцию, чем действие формы по умолчанию (которое выполняется нажатием кнопки типа submit). Это то, что я искал, и поэтому я проголосовал за это. Не могу говорить за атрибут «default», это не было частью моей проблемы;) спасибо за ваше разъяснение.

Джонас

2

@ Sk8erPeter, @Jonas .... хм .. Я подозреваю, что этот defaultатрибут является глобальным атрибутом; перечислимый атрибут .. который связан с перечислением состояний: w3.org/html/wg/drafts/html/master/… . кроме этой точки .. кнопка аспект этого ответа не является ответом ... это « условное предложение » или запрос ( сам вопрос ).

Бретт Касвелл,

3

@Jonas: да, type="button"не отправляет форму, type="submit"делает, но изменение типа этих кнопок определенно не является решением, потому что эти кнопки должны в основном вести себя одинаково - вопрос ОП заключался в том, как сделать кнопку «Далее» по умолчанию для нажатия клавиши ввода. И есть возможное решение в принятом ответе.

Sk8erPeter

4

@BrettCaswell: изменение типа этих кнопок - плохой обходной путь (см. Мой предыдущий комментарий). В HTML нет действительного defaultатрибута для inputтегов (как я уже говорил ранее), и (популярные) браузеры НЕ будут подсвечивать кнопку, имеющую этот атрибут, что означает, что нет нестандартной реализации этого атрибута - поэтому я до сих пор не знаю о чем @Wally Lawless говорил, и почему этот ответ так переоценен. В defaultHTML5 введен только один действительный атрибут, НО только для <track>тега: developer.mozilla.org/en-US/docs/Web/HTML/Element/track

Sk8erPeter

56

Дайте вашим кнопкам отправки то же имя, как это

<input type="submit" name="submitButton" value="Previous Page" />
<input type="submit" name="submitButton" value="Next Page" />

Когда пользователь нажимает Enterи запрос отправляется на сервер, вы можете проверить значение для submitButtonсвоего серверного кода, который содержит коллекцию name/valueпар форм . Например, в ASP Classic :

If Request.Form("submitButton") = "Previous Page" Then
    ' Code for the previous page
ElseIf Request.Form("submitButton") = "Next Page" Then
    ' Code for the next page
End If

Справка: Использование нескольких кнопок отправки в одной форме

huseyint
источник

26

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

Косоант

20

не работает в приложении I18n, где вы даже не знаете метку кнопки.

Крис

В каком системном или технологическом решении сам сервер не знает, что за метка использовалась для кнопки «Далее» и «Назад»? Разве сервер не генерировал кнопки «Вперед» и «Назад» в первую очередь? (Если локализация обрабатывается на стороне клиента, я думаю, что сервер может не знать, но я никогда не слышал об этом для HTML)

Jacob

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

Тила

30

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

float например, влево и вправо, чтобы переключать их визуально.

Polsonby
источник

18

Иногда предоставляемого решения @palotasb недостаточно. Есть случаи, когда, например, кнопка «Фильтр» отправляется над кнопками типа «Далее» и «Предыдущий». Я нашел обходной путь для этого: скопируйте кнопку отправки, которая должна выступать в качестве кнопки отправки по умолчанию в скрытом элементе div, и поместите ее внутри формы над любой другой кнопкой отправки. Технически это будет представлено другой кнопкой при нажатии Enter, чем при нажатии на видимую кнопку Next. Но поскольку имя и значение совпадают, в результате нет разницы.

<html>
<head>
    <style>
        div.defaultsubmitbutton {
            display: none;
        }
    </style>
</head>
<body>
    <form action="action" method="get">
        <div class="defaultsubmitbutton">
            <input type="submit" name="next" value="Next">
        </div>
        <p><input type="text" name="filter"><input type="submit" value="Filter"></p>
        <p>Filtered results</p>
        <input type="radio" name="choice" value="1">Filtered result 1
        <input type="radio" name="choice" value="2">Filtered result 2
        <input type="radio" name="choice" value="3">Filtered result 3
        <div>                
            <input type="submit" name="prev" value="Prev">
            <input type="submit" name="next" value="Next">
        </div>
    </form>
</body>
</html>

netiul
источник

17

Я бы использовал JavaScript для отправки формы. Функция будет вызвана событием OnKeyPress элемента формы и обнаружит,Enter был ли выбран ключ. Если это так, он отправит форму.

Вот две страницы, которые дают методы, как это сделать: 1 , 2 . Основываясь на них, вот пример использования (на основе здесь ):

<SCRIPT TYPE="text/javascript">//<!--
function submitenter(myfield,e) {
  var keycode;
  if (window.event) {
    keycode = window.event.keyCode;
  } else if (e) {
    keycode = e.which;
  } else {
    return true;
  }

  if (keycode == 13) {
    myfield.form.submit();
    return false;
  } else {
    return true;
  }
}
//--></SCRIPT>

<INPUT NAME="MyText" TYPE="Text" onKeyPress="return submitenter(this,event)" />

Яаков Эллис
источник

2

Что произойдет, если JavaScript отключен?

Джон Уинстанли

2

Вы не должны использовать <! - and -> для комментирования JS, эти теги не являются токенами языка Javascript

Marecky

2

@Marecky Они не должны комментировать JS. Они игнорируются при анализе содержимого <script> в браузере, поддерживающем <script>. Сегодня они действительно не нужны. Но в очень древних браузерах это был хак совместимости, чтобы избежать печати сценария в виде простого текста.

Leemes

17

Если вы действительно хотите, чтобы он работал как диалог установки, просто выделите кнопку «Далее» OnLoad.

Таким образом, если пользователь нажимает Return, форма отправляется и идет вперед. Если они хотят вернуться, они могут нажать Tabили нажать на кнопку.

Скотт Готтрой
источник

2

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

Джордан Рейтер

17

Это не может быть сделано с чистым HTML. Вы должны положиться на JavaScript для этого трюка.

Однако, если вы разместите две формы на странице HTML, вы можете сделать это.

Form1 будет иметь предыдущую кнопку.

Form2 будет иметь любые пользовательские вводы + кнопка «Далее».

Когда пользователь нажимает Enterв Form2, кнопка Next submit будет срабатывать.

FlySwat
источник

16

Вы можете сделать это с помощью CSS.

NextСначала поместите кнопки в разметку кнопкой, затем Prevкнопкой.

Затем используйте CSS, чтобы расположить их так, как вы хотите.

Квай
источник

14

Это работает без JavaScript или CSS в большинстве браузеров:

<form>
    <p><input type="text" name="field1" /></p>
    <p><a href="previous.html">
    <button type="button">Previous Page</button></a>
    <button type="submit">Next Page</button></p>
</form>

Firefox, Opera, Safari и Google Chrome все работают.
Как всегда, Internet Explorer является проблемой.

Эта версия работает, когда включен JavaScript:

<form>
    <p><input type="text" name="field1" /></p>
    <p><a href="previous.html">
    <button type="button" onclick="window.location='previous.html'">Previous Page</button></a>
    <button type="submit">Next Page</button></p>
</form>

Итак, недостаток в этом решении:

Предыдущая страница не работает, если вы используете Internet Explorer с отключенным JavaScript.

Имейте в виду, кнопка назад все еще работает!

Джолион
источник

1

Без javascript вы не сможете активировать кнопку «предыдущая страница», потому что type = «button»!

рископ

Проблема с вашим предложением состоит в том, что кнопка type = "button" не будет отправлять форму, поэтому она в основном ничего не делает, в то время как вторая версия с привязкой создаст GET вместо POST.

Тила

12

Если у вас есть несколько активных кнопок на одной странице, вы можете сделать что-то вроде этого:

Отметьте первую кнопку, которую вы хотите нажать на Enterнажатие клавиши, как кнопку по умолчанию в форме. Для второй кнопки свяжите ее с Backspaceкнопкой на клавиатуре. Код Backspaceсобытия 8.

$(document).on("keydown", function(event) {
  if (event.which.toString() == "8") {
    var findActiveElementsClosestForm = $(document.activeElement).closest("form");

    if (findActiveElementsClosestForm && findActiveElementsClosestForm.length) {
      $("form#" + findActiveElementsClosestForm[0].id + " .secondary_button").trigger("click");
    }
  }
});

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>

<form action="action" method="get" defaultbutton="TriggerOnEnter">
  <input type="submit" id="PreviousButton" name="prev" value="Prev" class="secondary_button" />
  <input type="submit" id='TriggerOnEnter' name="next" value="Next" class="primary_button" />
</form>

Развернуть фрагмент

user1591131
источник

11

Изменение порядка вкладок должно быть все, что нужно для достижения этой цели. Будь проще.

Другой простой вариант - поместить кнопку «Назад» после кнопки «Отправить» в HTML-коде, но переместить ее влево, чтобы она отображалась на странице перед кнопкой «Отправить».

Кенни Джонсон
источник

10

<input type="submit" name="perv" value="Previous Page"> 
<input type="submit" name="prev" value="Next Page">

Оставьте имя всех кнопок отправки одинаковым - «предыдущий».

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

И напишите следующую кодировку:

    btnID = ""
if Request.Form("prev") = "Previous Page" then
    btnID = "1"
else if Request.Form("prev") = "Next Page" then
    btnID = "2"
end if

Jayu
источник

Проблема в том, что нажатие клавиши ввода в текстовом поле отправит форму с первой кнопкой отправки, а не с предполагаемой (вторая в примере). Выяснить, какая кнопка отправки использовалась для отправки формы, легко, и это был не вопрос!

Riskop

Почему name="perv"?

Питер Мортенсен

10

Другой простой вариант - поместить кнопку «Назад» после кнопки «Отправить» в HTML-коде, но поместить ее влево, чтобы она отображалась на странице перед кнопкой «Отправить».

Изменение порядка вкладок должно быть все, что нужно для достижения этой цели. Будь проще.

Питер Мортенсен
источник

10

В первый раз, когда я столкнулся с этим, я натолкнулся на взлом onclick () / JavaScript, когда выбор не является предысторией / следующей, которая мне все еще нравится из-за ее простоты. Это выглядит так:

@model myApp.Models.myModel

<script type="text/javascript">
    function doOperation(op) {
        document.getElementById("OperationId").innerText = op;
        // you could also use Ajax to reference the element.
    }
</script>

<form>
  <input type="text" id = "TextFieldId" name="TextField" value="" />
  <input type="hidden" id="OperationId" name="Operation" value="" />
  <input type="submit" name="write" value="Write" onclick='doOperation("Write")'/>
  <input type="submit" name="read" value="Read" onclick='doOperation("Read")'/>
</form>

При нажатии любой кнопки отправки она сохраняет требуемую операцию в скрытом поле (которое представляет собой строковое поле, включенное в модель, с которой связана форма) и отправляет форму контроллеру, который принимает все решения. В контроллере вы просто пишете:

// Do operation according to which submit button was clicked
// based on the contents of the hidden Operation field.
if (myModel.Operation == "Read")
{
     // Do read logic
}
else if (myModel.Operation == "Write")
{
     // Do write logic
}
else
{
     // Do error logic
}

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

MiddleAgedMutantNinjaProgrammer
источник

9

Из https://html.spec.whatwg.org/multipage/forms.html#implicit-submission

Кнопка по умолчанию для элемента формы - это первая кнопка отправки в древовидном порядке, владельцем формы которой является этот элемент формы.

Если пользовательский агент поддерживает разрешение пользователю неявно отправлять форму (например, на некоторых платформах нажатие клавиши «ввод», когда текстовое поле неявно сфокусировано, отправляет форму) ...

Следующим вводом будет type = "submit", а изменение предыдущего ввода на type = "button" должно дать желаемое поведение по умолчанию.

<form>
   <input type="text" name="field1" /> <!-- put your cursor in this field and press Enter -->

   <input type="button" name="prev" value="Previous Page" /> <!-- This is the button that will submit -->
   <input type="submit" name="next" value="Next Page" /> <!-- But this is the button that I WANT to submit -->
</form>

nikkypx
источник

9

Вот что я попробовал:

Вы должны убедиться, что вы даете своим кнопкам разные имена
Напишите ifзаявление, которое будет выполнять необходимые действия, если нажата любая из кнопок.

<form>
    <input type="text" name="field1" /> <!-- Put your cursor in this field and press Enter -->

    <input type="submit" name="prev" value="Previous Page" /> <!-- This is the button that will submit -->
    <input type="submit" name="next" value="Next Page" /> <!-- But this is the button that I WANT to submit -->
</form>

В PHP

if(isset($_POST['prev']))
{
    header("Location: previous.html");
    die();
}

if(isset($_POST['next']))
{
    header("Location: next.html");
    die();
}

Самуэль Мугиша
источник

Проблема в том, что нажатие клавиши ввода в текстовом поле отправит форму с первой кнопкой отправки, а не с предполагаемой (вторая в примере). Выяснить, какая кнопка отправки использовалась для отправки формы, легко, и это был не вопрос!

Riskop

7

Я столкнулся с этим вопросом, пытаясь найти ответ на одно и то же, в основном только с элементами управления ASP.NET, когда я выяснил, что у кнопки ASP есть свойство, UseSubmitBehaviorкоторое позволяет вам указать, какой из них выполняет отправку.

<asp:Button runat="server" ID="SumbitButton" UseSubmitBehavior="False" Text="Submit" />

На всякий случай, если кто-то ищет способ сделать это с помощью кнопки ASP.NET.

Барри Франклин
источник

6

С помощью JavaScript (здесь jQuery) вы можете отключить кнопку prev перед отправкой формы.

$('form').on('keypress', function(event) {
    if (event.which == 13) {
        $('input[name="prev"]').prop('type', 'button');
    }
});

Guillaumes
источник

1

Попробуй это..!

<form>
  <input type="text" name="Name" />
  <!-- Enter the value -->

  <input type="button" name="prev" value="Previous Page" />
  <!-- This is the button that will submit -->
  <input type="submit" name="next" value="Next Page" />
  <!-- But this is the button that I WANT to submit -->
</form>

Развернуть фрагмент

Гаутам Балусами
источник

1

Я решил очень похожую проблему следующим образом:

Если JavaScript включен (в большинстве случаев в настоящее время), то все кнопки отправки « разлагаются » на кнопки при загрузке страницы через JavaScript (jQuery). События нажатия на « деградированную » кнопку. Типизированные кнопки также обрабатываются с помощью JavaScript.
Если JavaScript не включен, то форма подается в браузер с несколькими кнопками отправки. В этом случае нажатие Enterна textfieldвнутри формы отправит форму с первой кнопкой вместо предполагаемой по умолчанию , но, по крайней мере, форма по-прежнему пригодна для использования: вы можете отправить как с предыдущим, так и с последующим кнопками .

Рабочий пример:

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    </head>

    <body>
        <form action="http://httpbin.org/post" method="post">
            If JavaScript  is disabled, then you CAN submit the form
            with button1, button2 or button3.

            If you press enter on a text field, then the form is
            submitted with the first submit button.

            If JavaScript is enabled, then the submit typed buttons
            without the 'defaultSubmitButton' style are converted
            to button typed buttons.

            If you press Enter on a text field, then the form is
            submitted with the only submit button
            (the one with class defaultSubmitButton)

            If you click on any other button in the form, then the
            form is submitted with that button's value.

            <br />

            <input type="text" name="text1" ></input>
            <button type="submit" name="action" value="button1" >button 1</button>
            <br />

            <input type="text" name="text2" ></input>
            <button type="submit" name="action" value="button2" >button 2</button>
            <br />

            <input type="text" name="text3" ></input>
            <button class="defaultSubmitButton" type="submit" name="action" value="button3" >default button</button>
        </form>

        <script>
            $(document).ready(function(){

                /* Change submit typed buttons without the 'defaultSubmitButton'
                   style to button typed buttons */
                $('form button[type=submit]').not('.defaultSubmitButton').each(function(){
                    $(this).attr('type', 'button');
                });

                /* Clicking on button typed buttons results in:
                   1. Setting the form's submit button's value to
                      the clicked button's value,
                   2. Clicking on the form's submit button */
                $('form button[type=button]').click(function( event ){
                    var form = event.target.closest('form');
                    var submit = $("button[type='submit']",form).first();
                    submit.val(event.target.value);
                    submit.click();
                });
            });
        </script>
    </body>
</html>

Развернуть фрагмент

riskop
источник

0

Вы можете использовать Tabindexдля решения этой проблемы. Также изменение порядка кнопок будет более эффективным способом для достижения этой цели.

Измените порядок кнопок и добавьте floatзначения, чтобы назначить им желаемое положение, которое вы хотите показать в своем HTMLпредставлении.

Джиоти Мишра
источник

-4

Используя пример, который вы дали:

<form>
    <input type="text" name="field1" /><!-- Put your cursor in this field and press Enter -->
    <input type="submit" name="prev" value="Previous Page" /> <!-- This is the button that will submit -->
    <input type="submit" name="next" value="Next Page" /> <!-- But this is the button that I WANT to submit -->
</form>

Если вы нажмете «Предыдущая страница», будет отправлено только значение «предыдущая». Если вы нажмете «Следующая страница», будет отправлено только значение «Далее».

Однако если вы нажмете Enter где-нибудь в форме, ни «предыдущая», ни «следующая» не будут отправлены.

Таким образом, используя псевдокод, вы можете сделать следующее:

If "prev" submitted then
    Previous Page was click
Else If "next" submitted then
    Next Page was click
Else
    No button was click

GateKiller
источник

1

Там никогда не бывает ситуации (без использования JS), когда ни одна из кнопок не срабатывает. Если вы нажмете ENTER, первая кнопка в коде поймает событие. В html-примере это кнопка prev.

SimonSimCity

Несколько кнопок отправки в форме HTML

Ответы: