Множественные кнопки отправки в HTML форме

голоса
233

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

Задан 01/08/2008 в 14:01
источник пользователем
На других языках...                            


23 ответов

голоса
133

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

Таким образом, кнопка Назад находится слева от кнопки Далее, но Далее идет первым в 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"

Ответил 28/08/2008 d 10:34
источник пользователем

голоса
60

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

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

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

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

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

Ответил 01/08/2008 d 14:14
источник пользователем

голоса
53

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

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

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

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

Ответил 01/08/2008 d 14:10
источник пользователем

голоса
30

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

Ответил 02/08/2008 d 12:24
источник пользователем

голоса
17

Иногда Предложенное решение по @palotasb не является достаточным. Есть случаи , когда используют, например, кнопка «Filter» отправить ставится выше кнопки , как «следующий и предыдущий». Я нашел обходной путь для этого: скопировать кнопку отправки , которую нужно действовать по умолчанию кнопки отправки в скрытом 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>
Ответил 26/10/2012 d 10:53
источник пользователем

голоса
17

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

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

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

Ответил 16/09/2008 d 13:16
источник пользователем

голоса
17

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

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

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

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

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

Ответил 26/08/2008 d 04:44
источник пользователем

голоса
17

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

Ответил 26/08/2008 d 04:41
источник пользователем

голоса
15

Я хотел бы использовать 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)" />
Ответил 03/08/2008 d 14:12
источник пользователем

голоса
14

Кевин,

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

Ответил 16/09/2008 d 12:19
источник пользователем

голоса
13

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

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

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

Ответил 14/03/2014 d 15:51
источник пользователем

голоса
12

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

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

Ответил 14/10/2014 d 17:02
источник пользователем

голоса
12

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

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

Ответил 27/11/2012 d 23:27
источник пользователем

голоса
11

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

И написать follwing кодирования:

    btnID = ""
if Request.Form("prev") = "Previous Page" then
    btnID = "1"
else if Request.Form("prev") = "Next Page" then
    btnID = "2"
end if
Ответил 05/06/2012 d 10:19
источник пользователем

голоса
10

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

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

Ответил 03/09/2015 d 13:30
источник пользователем

голоса
10

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

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

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

Имея следующий вход будет типа = «отправить» и изменение предыдущего ввода для ввода = «Кнопка» должна дать желаемое поведение по умолчанию.

<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>
Ответил 28/03/2015 d 21:05
источник пользователем

голоса
10

Это то, что я испытал: 1. Вы должны убедиться, что вы даете кнопкам имена 2. Напишите, если утверждение, что будет делать необходимые действия, если любой из этих кнопок в щелкнул.

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

}
Ответил 03/03/2014 d 07:16
источник пользователем

голоса
8

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

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

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

Ответил 24/03/2016 d 17:29
источник пользователем

голоса
7

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

$('form').on('keypress', function(event) {
    if (event.which == 13) {
        $('input[name="prev"]').prop('type', 'button');
    }
});
Ответил 14/08/2015 d 10:01
источник пользователем

голоса
0

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

Ответил 25/04/2018 d 06:28
источник пользователем

голоса
0

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

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

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

Ответил 09/01/2018 d 15:26
источник пользователем

голоса
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>

Ответил 29/09/2017 d 04:58
источник пользователем

голоса
-3

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

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

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

Однако, если вы нажмете ввести где-нибудь на форме, ни «пред», ни «рядом» будет представлен.

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

If "prev" submitted then
    Previous Page was click
Else If "next" submitted then
    Next Page was click
Else
    No button was click
Ответил 05/08/2008 d 16:08
источник пользователем

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more