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

Question

Допустим, вы создаете мастера в форме 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, чтобы сделать это?

Answer 1

Надеюсь, это поможет. Я просто делаю трюк с 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"

Answer 2

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

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

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

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

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

Answer 3

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

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

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

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

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

Answer 4

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

Answer 5

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

Answer 6

Кевин, этого нельзя сделать с помощью чистого HTML. Вы должны полагаться на JavaScript для этого трюка.

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

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

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

Когда пользователь нажимает Введите в Форме2, сработает кнопка Следующая отправка.

Answer 7

Иногда предоставляемого решения @palotasb недостаточно. В некоторых случаях, например, кнопка «Фильтр» помещается над кнопками, такими как «Далее» и «Предыдущий». Я нашел обходной путь для этого: copy кнопка отправки, которая должна действовать как кнопка отправки по умолчанию в скрытом элементе 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>

Answer 8

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

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

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

Answer 9

Я бы использовал 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)" />

Answer 10

Кевин,

Это работает без 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 - все работает.
Как всегда, проблема в IE.

Эта версия работает, когда включен 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>

Итак, недостаток в этом решении:
Предыдущая страница не работает, если вы используете IE с отключенным Javascript.
Имейте в виду, кнопка "Назад" все еще работает!