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

08-06-2019
|

Вопрос

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

Решение

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

Другие советы

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

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

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

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

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

Дайте кнопкам отправки такое же имя, как здесь:

<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

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

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

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

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

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

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

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

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

Когда пользователь нажимает Входить в Form2 сработает кнопка «Далее отправить».

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

Поместите кнопки в разметку с помощью Next сначала кнопку, затем кнопку Prev кнопку после этого.

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

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

Кевин,

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

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

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

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

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

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

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

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

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

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

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

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

}

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

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

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

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

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

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

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

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

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

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

если javascript включен (в настоящее время в большинстве случаев), тогда все кнопки отправки "деградировавший"к кнопкам при загрузке страницы через javascript (jquery).Нажмите «События» на «деградировавший" Кнопки с типом кнопки обрабатываются также через javascript.
если javascript не включен, то форма отображается в браузере с несколькими кнопками отправки.В этом случае нажмите Enter на textfield внутри формы будет отправлена форма с первой кнопкой вместо предполагаемой по умолчанию, но, по крайней мере, форму все еще можно использовать:вы можете отправить как предыдущий и следующий кнопки.

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

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

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

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

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

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

<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

Лицензировано под: CC-BY-SA с атрибуция

Не связан с StackOverflow