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

Скажем, Вы создаете мастер в 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 сделать это?

252
задан Peter Mortensen 14 July 2019 в 04:18
поделиться

10 ответов

Я надеюсь, что это помогает. Я просто добиваюсь цели 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"

137
ответ дан Peter Mortensen 23 November 2019 в 02:53
поделиться

Kevin,

Это работает без 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 прочь.
Мышление Вы, кнопка "Назад" все еще работает!

12
ответ дан Peter Mortensen 23 November 2019 в 02:53
поделиться

Я использовал бы 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)" />
14
ответ дан Peter Mortensen 23 November 2019 в 02:53
поделиться

Kevin, это не может быть сделано с чистым HTML. Необходимо полагаться на JavaScript для этого приема.

Однако при размещении двух форм в страницу HTML можно сделать это.

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

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

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

15
ответ дан Peter Mortensen 23 November 2019 в 02:53
поделиться

Можно сделать это с CSS.

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

Тогда CSS использования для расположения их для появления пути Вы хотите.

15
ответ дан Jack Bashford 23 November 2019 в 02:53
поделиться

Если Вы действительно просто хотите, чтобы он работал как диалоговое окно установки, что относительно того, чтобы просто дать фокус кнопке "Next" OnLoad. Тот путь, если пользователь поражает Возврат, форму, отправляет и продвигается. Если они хотят возвратиться, они могут поразить Вкладку или нажать на кнопку.

16
ответ дан Peter Mortensen 23 November 2019 в 02:53
поделиться

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

28
ответ дан Peter Mortensen 23 November 2019 в 02:53
поделиться

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

<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

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

51
ответ дан Peter Mortensen 23 November 2019 в 02:53
поделиться

Был бы он быть возможным для Вас изменить предыдущий тип кнопки в кнопку как это:

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

Теперь кнопка Next была бы значением по умолчанию, плюс Вы мог также добавить эти default атрибут к нему так, чтобы Ваш браузер выделил его как так:

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

Hope, которая помогает.

58
ответ дан Peter Mortensen 23 November 2019 в 02:53
поделиться

Используя пример Вы дали:

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

при нажатии на "Previous Page" только значение "предыдущих" будет отправлено. При нажатии на "Next Page", только значение "следующих" будет отправлено.

, Если однако, Вы нажимаете Enter где-нибудь на форме, ни "предыдущей" ни "следующей", будет отправлен.

Настолько использующий псевдо код Вы могли сделать следующее:

If "prev" submitted then
    Previous Page was click
Else If "next" submitted then
    Next Page was click
Else
    No button was click
-4
ответ дан Peter Mortensen 23 November 2019 в 02:53
поделиться
Другие вопросы по тегам:

Похожие вопросы: