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

Question

Несколько кнопок отправки в форме 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 сделать это?

291

html form-submit html-form submit-button

Источник

user40 01 авг '08 в 13:01

28 ответов

Решение

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

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

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

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

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

67

Источник

user37 01 авг '08 в 13:14

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

<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

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

62

Источник

user39 01 авг '08 в 13:10

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

32

Источник

user137 02 авг '08 в 11:24

Иногда предоставляемого решения @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>

24

Источник

user669073 26 окт '12 в 09:53

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

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

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

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

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

19

Источник

user1965 26 авг '08 в 03:44

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

18

Источник

user51 03 авг '08 в 13:12

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

18

Источник

user2863 26 авг '08 в 03:41

Может работать с CSS

Сначала поместите их в разметку как следующую кнопку, а затем предыдущую кнопку.

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

17

Источник

user3193 16 сен '08 в 12:16

Кевин,

Это работает без 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.
Имейте в виду, кнопка "Назад" все еще работает!

15

Источник

user11740 16 сен '08 в 11:19

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

Отметьте первую кнопку, которую вы хотите, чтобы триггеры при нажатии клавиши 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>

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

13

Источник

user1591131 14 мар '14 в 14:51

Для этого нужно изменить порядок табуляции. Будь проще.

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

12

Источник

user1830173 27 ноя '12 в 22:27

В первый раз, когда я столкнулся с этим, я наткнулся на взлом 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, код будет менее читабельным, изменяемым и самодокументируемым, а анализ в любом случае тривиален.

11

Источник

user832919 03 сен '15 в 13:30

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

Для этого нужно изменить порядок табуляции. Будь проще.

11

Источник

14 окт '14 в 16:02

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

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

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

10

Источник

user1427636 05 июн '12 в 09:19

Из https://html.spec.whatwg.org/multipage/forms.html

Кнопка по умолчанию для элемента формы - это первая кнопка отправки в древовидном порядке, владельцем формы которой является этот элемент формы.
Если пользовательский агент поддерживает предоставление пользователю возможности неявно отправлять форму (например, на некоторых платформах нажатие клавиши "ввод", когда текстовое поле сфокусировано, неявно передает форму)...

Следующим вводом будет 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>

10

Источник

user1395009 28 мар '15 в 21:05

Вот что я опробовал: 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();

}

9

Источник

user1223431 03 мар '14 в 06:16

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

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

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

8

Источник

user680563 24 мар '16 в 17:29

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

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

7

Источник

user1448969 14 авг '15 в 10:01

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

если javascript включается (в большинстве случаев в настоящее время), тогда все кнопки отправки " ухудшаются " до кнопок при загрузке страницы через javascript (JQuery). События нажатия на " деградированную " кнопку. Печатные кнопки обрабатываются также через javascript,
если javascript не включен, то форма подается в браузер с несколькими кнопками отправки. В этом случае попадание введите на textfield внутри формы будет отправлена форма с первой кнопкой вместо предполагаемой по умолчанию, но, по крайней мере, форма все еще будет использоваться: вы можете отправить как с кнопками prev, так и next.

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

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

3

Источник

user3760049 09 янв '18 в 15:26

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

2

Источник

user4890885 25 апр '18 в 06:28

Возможно, более современный подход к методу CSS с плавающей запятой может быть решением с использованием flexbox с orderсвойство гибких элементов. Это может быть что-то в этом роде:

      <div style="display: flex">
  <input type="submit" name="next" value="Next Page" style="order: 1" />
  <input type="submit" name="prev" value="Previous Page" style="order: 0" />
</div>

Конечно, это осуществимый подход зависит от структуры вашего документа, но я считаю, что гибкие элементы намного проще контролировать, чем плавающие.

2

Источник

user14989607 26 авг '21 в 18:57

Проблема

Форма может иметь несколько кнопок отправки. При нажатии возврата в любом вводе браузер использует первую кнопку отправки. Однако иногда мы хотим использовать другую/позже кнопку по умолчанию.

Опции

Сначала добавьте скрытую кнопку отправки с тем же действием (☹️ дублирование)
Сначала поместите желаемую кнопку отправки в форму, а затем переместите ее в нужное место с помощью CSS (☹️ может быть невыполнимо, может привести к громоздкому стилю)
Измените обработку клавиши возврата во всех формах ввода с помощью JavaScript (☹️ требуется JavaScript)

Ни один из вариантов не является идеальным, поэтому мы выбираем 3. потому что в большинстве браузеров включен JavaScript.

Выбранное решение

Может быть полезно иметь возможность удалить улучшение с некоторых входов. Это может быть достигнуто за счет:

      <input type="text" name="field2" data-ignore-default-submit> <!-- uses browser standard behaviour -->

Вот полный код пера.

1

Источник

user4007237 03 май '22 в 10:18

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

Вам не нужно несколько кнопок, входов или отправок для выполнения предыдущего / следующего действия, у вас есть только один input type="submit" только в одном form.
Значения во всей форме сохраняются до тех пор, пока форма не будет отправлена.
Пользователь может перейти на любую предыдущую страницу и любую следующую страницу, чтобы безупречно изменить значения.

Пример использования Bootstrap 5.0.0:

      <div id="carousel" class="carousel slide" data-ride="carousel">
    <form action="index.php" method="post" class="carousel-inner">
        <div class="carousel-item active">
            <input type="text" name="lastname" placeholder="Lastname"/>
        </div>
        <div class="carousel-item">
            <input type="text" name="firstname" placeholder="Firstname"/>
        </div>
        <div class="carousel-item">
            <input type="submit" name="submit" value="Submit"/>
        </div>
    </form>
    <a class="btn-secondary" href="#carousel" role="button" data-slide="prev">Previous page</a>
    <a class="btn-primary" href="#carousel" role="button" data-slide="next">Next page</a>
</div>

1

Источник

10 дек '20 в 20:29

Я думаю, что это лучшее решение для этого. Сделать предыдущую кнопку button, и новое добавление onclick атрибут в кнопке со значением jQuery(this).attr('type','submit');.

Итак, когда пользователь нажимает кнопку «Назад», его type будет изменен на submit и форма будет отправлена с кнопкой Назад.

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

  <!-- This is the button that will submit -->
  <input type="button" onclick="jQuery(this).attr('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>

1

Источник

user5340811 07 янв '21 в 15:00

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

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

0

Источник

user5773078 29 сен '17 в 04:58

Когда кнопка нажата мышью (и, надеюсь, прикосновением), она записывает координаты X, Y. Это не тот случай, когда он вызывается формой, эти значения обычно равны нулю.

Итак, вы можете сделать что-то подобное.

      function(e) {
  const isArtificial = e.screenX === 0 && e.screenY === 0
    && e.x === 0 && e.y === 0 
    && e.clientX === 0 && e.clientY === 0;

    if (isArtificial) {
      return; // DO NOTHING
    } else {
      // OPTIONAL: Don't submit the form when clicked 
      // e.preventDefault();
      // e.stopPropagation();
    }

    // ...Natural code goes here
}

-1

Источник

user8058709 03 янв '21 в 13:45

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

<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

-3

Источник

user383 05 авг '08 в 15:08

Другие вопросы по тегам html form-submit html-form submit-button

user3063 28 авг '08 в 09:34 2008-08-28 09:34 · Accepted Answer · 2008-08-28 09:34

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