Несколько кнопок отправки в форме HTML - PullRequest
245 голосов
/ 01 августа 2008

Допустим, вы создаете мастера в форме HTML. Одна кнопка возвращается назад, а другая - вперед. Поскольку кнопка back появляется первой в разметке, когда вы нажимаете 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, чтобы сделать это?

Ответы [ 23 ]

11 голосов
/ 14 марта 2014

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

Отметьте первую кнопку, которую вы хотите активировать на Введите нажатие клавиши в качестве кнопки по умолчанию на форме. Для второй кнопки свяжите ее с кнопкой 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>

Надеюсь, это поможет.

10 голосов
/ 14 октября 2014

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

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

10 голосов
/ 28 ноября 2012

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

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

9 голосов
/ 03 сентября 2015

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

@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
}

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

9 голосов
/ 05 июня 2012

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

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

    btnID = ""
if Request.Form("prev") = "Previous Page" then
    btnID = "1"
else if Request.Form("prev") = "Next Page" then
    btnID = "2"
end if
8 голосов
/ 29 марта 2015

С 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>
8 голосов
/ 03 марта 2014

Вот что я попробовал: 1. Вам нужно убедиться, что вы даете своим кнопкам разные имена 2. Напишите оператор 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();

}
7 голосов
/ 24 марта 2016

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

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

На всякий случай, если кто-то ищет кнопку asp.net, как это сделать.

6 голосов
/ 14 августа 2015

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

$('form').on('keypress', function(event) {
    if (event.which == 13) {
        $('input[name="prev"]').prop('type', 'button');
    }
});
0 голосов
/ 25 апреля 2018

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

...