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

2093 23

html form-submit submit-button html-form

23 ответов:

Comments

Ничего не найдено.

palotasb · Accepted Answer · 2017-02-15 23:23:34

Я надеюсь, что это помогает. Я просто делаю трюк 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>
  </div>
</form>
Edit: преимущества перед другими предложениями: нет JavaScript, доступны, обе кнопки остаются type="submit"

Wally Lawless · Accepted Answer · 2015-07-07 01:50:09

можно ли было бы изменить предыдущий тип кнопки на такую кнопку:
<input type="button" name="prev" value="Previous Page" />
Теперь следующая кнопка будет по умолчанию, плюс вы может также добавить default атрибут к нему, так что ваш браузер будет выделять его так:
<input type="submit" name="next" value="Next Page" default />
надеюсь, что это поможет.

huseyint · Accepted Answer · 2014-07-14 10:55:42

дайте вашим кнопкам отправки такое же имя, как это:
<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
ссылки: использование нескольких кнопок отправки в одной форме

Polsonby · Accepted Answer · 2012-10-14 15:21:12

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

Scott Gottreu · Accepted Answer · 2008-08-26 06:41:44

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

qui · Accepted Answer · 2008-09-16 15:16:05

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

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

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

netiul · Accepted Answer · 2012-10-26 12:53:08

иногда предоставленного решения @palotasb недостаточно. Есть случаи использования, когда, например, кнопка" фильтр "submit помещается над кнопками, такими как"следующий и предыдущий". Я нашел обходной путь для этого: скопировать кнопка отправки, которая должна действовать как кнопка отправки по умолчанию в скрытом 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>

FlySwat · Accepted Answer · 2016-06-01 21:41:04

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

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

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

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

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

Yaakov Ellis · Accepted Answer · 2008-08-03 16:12:21

Я бы использовал Javascript для отправки формы. Функция будет вызвана событием OnKeyPress элемента формы и определит, был ли выбран ключ Enter. Если это так, он отправит форму.

вот две страницы, которые дают методы о том, как это сделать: 1,2. Основываясь на них, вот пример использования (на основе здесь):
<SCRIPT TYPE="text/javascript"></SCRIPT>

<INPUT NAME="MyText" TYPE="Text" onKeyPress="return submitenter(this,event)" />

Jolyon · Accepted Answer · 2008-09-16 15:12:37

Кевин

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

user1591131 · Accepted Answer · 2018-04-11 23:50:34

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

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

Kenny Johnson · Accepted Answer · 2012-11-28 00:27:41

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

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

score 12 · Accepted Answer · 2014-10-14 19:02:21

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

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

jayu · Accepted Answer · 2012-10-14 15:22:00

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

Samuel Mugisha · Accepted Answer · 2014-03-03 08:16:35

это то, что я пробовал: 1. Вам нужно убедиться, что вы даете своим кнопкам разные имена 2. Напишите оператор if, который выполнит необходимое действие, если нажата какая-либо кнопка.
<form>
<input type="text" name="field1" /> 

<input type="submit" name="prev" value="Previous Page" /> 
<input type="submit" name="next" value="Next Page" /> 
</form>
в PHP
if(isset($_POST['prev']))
{
header("Location: previous.html");
die();
}

if(isset($_POST['next']))
{
header("Location: next.html");
die();

}

nikkypx · Accepted Answer · 2015-03-28 23:05:52

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

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

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

имеющая следующие input be type= "submit"и изменение предыдущего ввода на type=" button " должно дать желаемое поведение по умолчанию.
<form>
   <input type="text" name="field1" /> 

   <input type="button" name="prev" value="Previous Page" /> 
   <input type="submit" name="next" value="Next Page" /> 
</form>

MiddleAgedMutantNinjaProgrammer · Accepted Answer · 2015-09-03 16:37:04

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

Barry Franklin · Accepted Answer · 2016-03-24 19:29:22

я столкнулся с этим вопросом, пытаясь найти ответ на в основном то же самое, только с помощью asp.net элементы управления, когда я понял, что кнопка asp имеет свойство под названием UseSubmitBehavior что позволяет установить, какой из них делает подачу.
<asp:Button runat="server" ID="SumbitButton" UseSubmitBehavior="False" Text="Submit" />
на всякий случай, если кто-то ищет asp.net кнопка способ сделать это.

GuillaumeS · Accepted Answer · 2015-08-14 13:01:14

С помощью javascript (здесь jQuery) вы можете отключить кнопку prev перед отправкой формы.
$('form').on('keypress', function(event) {
    if (event.which == 13) {
        $('input[name="prev"]').prop('type', 'button');
    }
});

riskop · Accepted Answer · 2018-03-06 12:32:08

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

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

если 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>

Gowtham Balusamy · Accepted Answer · 2018-04-11 23:51:12

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

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

Jyoti mishra · Accepted Answer · 2018-04-25 09:28:32

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

GateKiller · Accepted Answer · 2008-08-05 18:08:42

используя Ваш пример:
<form>
<input type="text" name="field1" />
<input type="submit" name="prev" value="Previous Page" /> 
<input type="submit" name="next" value="Next Page" /> 
</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