html forms form-submit submit-button

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

спросил: 14 лет назадпросмотры: 233.6K

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

Поделится Источник

Kevin

01/08/2008

Ответов (25)25

Решение

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

Поделится Источник

palotasb

28/08/2008

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

Оставьте названия всех кнопок отправки одинаковыми: «prev».

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

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

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

Поделится Источник

jayu

05/06/2012

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

Поделится Источник

netiul

26/10/2012

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

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

Поделится Источник

Kenny Johnson

Kenny Johnson

27/11/2012

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

Убедитесь, что вы дали своим кнопкам разные имена.
Напишите 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();
}

Поделится Источник

Samuel Mugisha

03/03/2014

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

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

Поделится Источник

user1591131

14/03/2014

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

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

Поделится Источник

user4136731

14/10/2014

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

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

Поделится Источник

GuillaumeS

14/08/2015

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

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

Поделится Источник

MiddleAgedMutantNinjaProgrammer

03/09/2015

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

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

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

Поделится Источник

Barry Franklin

24/03/2016

Вы можете использовать Tabindex для решения этой проблемы. Также изменение порядка кнопок было бы более эффективным способом добиться этого.

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

Поделится Источник

Jyoti mishra

25/04/2018

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

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

Поделится Источник

riskop

09/01/2018

Когда кнопка нажата мышью (и, надеюсь, прикосновением), она записывает координаты 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
}

Поделится Источник

Prince Owen

Prince Owen

03/01/2021

Я думаю, что это лучшее решение для этого. Сделать кнопку «Предыдущая» type для 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>

Поделится Источник

Ajay Patidar

07/01/2021

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

Поделится Источник

user14291542

10/12/2020

Измените предыдущий тип кнопки на такую:

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

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

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

Поделится Источник

Wally Lawless

01/08/2008

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

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

Когда пользователь нажимает Enterи запрос отправляется на сервер, вы можете проверить значение в 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

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

Поделится Источник

huseyint

01/08/2008

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

float их влево и вправо, например, для визуального переключения.

Поделится Источник

Polsonby

02/08/2008

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

Поделится Источник

Yaakov Ellis

03/08/2008

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

<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где-нибудь в форме, ни «предыдущая», ни «следующая» не будут отправлены.

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

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

Поделится Источник

GateKiller

05/08/2008

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

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

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

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

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

Поделится Источник

FlySwat

26/08/2008

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

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

Поделится Источник

Scott Gottreu

26/08/2008

Это работает без 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.

Имейте в виду, кнопка "Назад" по-прежнему работает!

Поделится Источник

Jolyon

16/09/2008

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

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

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

Поделится Источник

qui

16/09/2008

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

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

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

Поделится Источник

nikkypx

nikkypx

28/03/2015