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

239
form-submit html html-form submit-button

23 ответов

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

таким образом, кнопка Prev слева от следующей кнопки, но следующая сначала в 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>

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

133

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

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

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

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

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

61

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

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

когда пользователь нажимает enter и запрос идет на сервер, вы можете проверить значение для submitButton на вашем серверном коде, который содержит коллекцию form 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

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

54

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

31

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

17

Он может работать с CSS

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

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

17

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

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

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

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

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

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

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

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

14

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

отметьте первую кнопку, которую вы хотите триггеры на Enter нажатие клавиши как defaultbutton на форме. Для второй кнопки свяжите ее с Backspace на клавиатуре. Backspace eventcode составляет 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

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

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

12

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

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

12

держите имя всех кнопок отправки одинаковым - "prev" единственное отличие -

11

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

}
10

от https://html.spec.whatwg.org/multipage/forms.html#implicit-submission

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

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

имеющая следующие input be 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

в первый раз, когда я столкнулся с этим, я придумал onclick()/JS hack, когда выбор не prev/next, который мне все еще нравится за его простоту. Он звучит так:

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

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

10

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

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

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

8

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

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

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

  1. если javascript включен (в большинстве случаев в настоящее время), то все кнопки отправки"деградированных" кнопки при загрузке страницы через javascript (jquery). Нажмите события на "деградированных " кнопки типизированные кнопки обрабатываются также через javascript.

  2. если javascript не включен, то форма подается в браузер с множеством кнопок. В этом случае наезд введите textfield в пределах формы будет отправить форму с первой кнопкой вместо предполагаемого по умолчанию, но, по крайней мере, форма по-прежнему может использоваться: вы можете отправить оба prev и далее кнопки.

пример:

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

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

<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

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

0

используя приведенный вами пример:

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

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

Если, однако, вы нажмете enter где-то в форме, ни "prev", ни "next" не будут отправлены.

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

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