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




текстовое поле html (16)

Допустим, вы создаете мастера в форме HTML. Одна кнопка возвращается назад, а другая - вперед. Поскольку кнопка « Назад» появляется первой в разметке при нажатии клавиши « Ввод» , она будет использовать эту кнопку для отправки формы.

Пример:

<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 чтобы сделать это?


В первый раз, когда я столкнулся с этим, я натолкнулся на взлом onclick () / JavaScript, когда выбор не является предысторией / следующей, которая мне все еще нравится из-за ее простоты. Это выглядит так:

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

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


Вот что я попробовал:

  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();
}

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

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

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


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

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

Когда пользователь нажимает Enter и запрос отправляется на сервер, вы можете проверить значение для submitButton в своем submitButton на стороне сервера, который содержит коллекцию пар name/value . Например, в ASP Classic :

If Request.Form("submitButton") = "Previous Page" Then
    ' Code for the previous page
ElseIf Request.Form("submitButton") = "Next Page" Then
    ' Code for the next page
End If

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


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

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


Если вы действительно хотите, чтобы он работал как диалог установки, просто выделите кнопку «Далее» OnLoad.

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


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

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


Из https://html.spec.whatwg.org/multipage/forms.html#implicit-submission

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

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

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

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

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

<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

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

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


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

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

Это работает без 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 все работают.
Как всегда, Internet Explorer является проблемой.

Эта версия работает, когда включен 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>

Итак, недостаток в этом решении:

Предыдущая страница не работает, если вы используете Internet Explorer с отключенным JavaScript.

Имейте в виду, кнопка назад все еще работает!


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

Вот две страницы, которые дают методы, как это сделать: 1 , 2 . Основываясь на них, вот пример использования (на основе 1 ):

<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)" />

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

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

На всякий случай, если кто-то ищет способ ASP.NET сделать это.


<input type="submit" name="perv" value="Previous Page"> 
<input type="submit" name="prev" value="Next Page"> 

Оставьте имя всех кнопок отправки одинаковым - «предыдущий».

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

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

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




submit-button