Кілька кнопок подання у формі HTML

263

Скажімо, ви створили майстра у формі 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?

— Кевін
джерело

142

Я сподіваюся, що це допомагає. Я просто виконую трюк із 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".

— палотасб
джерело

23

Будь ласка, не робіть цього, не змінюючи також порядок вкладок, так що натискання на кнопку вкладки буде проходити по кнопках, коли вони з'являються на екрані.

— Стів

61

Змініть попередній тип кнопки на такий:

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

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

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

— Уоллі Лоулесс
джерело

39

Про який defaultатрибут ви говорите? Немає атрибута "за замовчуванням", який був би дійсним: w3.org/html/wg/drafts/html/master/… (не в HTML5, HTML 4.01 Перехідний / Строгий, XHTML 1.0 Strict). І я не бачу, чому краще змінити тип введення з submitна buttonВи можете без проблем ввести кілька елементів введення типу в одній формі. Я не розумію, чому ця відповідь настільки схвальна.

— Sk8erPeter

3

Введення типу "кнопка" не виконує дії форми. Ви можете мати onclick чи щось, таким чином виконуючи іншу функцію, ніж дію форми "за замовчуванням" (яка виконується натисканням кнопки типу "подати"). Це те, що я шукав, і тому я його схвалив. Не можу говорити за атрибут "за замовчуванням", це не було частиною моєї проблеми;), дякую за ваше уточнення.

— Йонас

2

@ Sk8erPeter, @Jonas .... хм .. Я підозрюю, що цей defaultатрибут є глобальним атрибутом; перерахований атрибут .., який пов’язаний із станами перерахування: w3.org/html/wg/drafts/html/master/… . крім цього пункту .. кнопковий аспект цієї відповіді не є відповіддю. Це « умовна пропозиція » або запит ( саме запитання ).

— Бретт Касвелл

3

@Jonas: так, type="button"форма не подає type="submit", але зміна типу цих кнопок, безумовно, не є рішенням, оскільки ці кнопки в основному повинні вести себе так само - питанням ОП було те, як зробити кнопку "Далі" кнопкою за замовчуванням для натискання клавіші Enter. І в прийнятій відповіді можливе рішення.

— Sk8erPeter

4

@BrettCaswell: зміна типу цих кнопок є поганим вирішенням (див. Мій попередній коментар). Немає дійсного defaultатрибута для inputтегів (як я вже говорив раніше) в HTML, і (популярні) браузери НЕ будуть виділяти кнопку, яка має цей атрибут, а це означає, що немає нестандартної реалізації цього атрибуту - тому я досі не знаю про що говорив @Wally Lawless і чому ця відповідь так завищена. Є лише один дійсний defaultатрибут, введений у HTML5, але лише для <track>тегу: developer.mozilla.org/en-US/docs/Web/HTML/Element/track

— Sk8erPeter

56

Назвіть кнопки для надсилання так само, як це:

<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

Довідка: Використання декількох кнопок подання на одній формі

— Хусейнт
джерело

26

Це не те, що запитував користувач. Користувач хотів знати, як контролювати, яка кнопка подання у формі активується при натисканні клавіші Enter, тобто. яка є кнопкою за замовчуванням.

— косоант

20

не працює в додатку I18n, де ви навіть не знаєте мітку кнопки.

— Кріс

У якому системному чи технологічному рішенні сервер сам би не знав, яку мітку використовували для наступної та зворотної кнопки? Хіба сервер не генерував в першу чергу наступну та кнопку назад? (Якщо локалізація обробляється на стороні клієнта, я думаю, що сервер може не знати, але я ніколи не чув про це для HTML)

— Jacob

Ця відповідь повністю пропускає питання, швидше за все, це стосується іншого. Чому так багато нагород ??? Не кажучи вже про те, що ніколи не слід перевіряти мітку кнопки ... викликає багато клопоту. Навіть простий випадок: "ми повинні скоротити рядок до" Попередня сторінка "" зруйнує функціональність ваших сайтів.

— Тілла

30

Якщо той факт, що перша кнопка використовується за замовчуванням, узгоджується у веб-переглядачах, покладіть їх правильним способом у вихідний код, а потім використовуйте CSS для перемикання їх очевидних позицій.

float їх ліворуч та праворуч, щоб візуально перемикати їх, наприклад.

— Полсонбі
джерело

18

Іноді запропонованого рішення @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>

— нетіул
джерело

17

Я б використовував 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)" />

— Яаков Елліс
джерело

2

Що станеться, якщо JavaScript відключений?

— Джон Вінстанлі

2

Не слід використовувати <! - і ->, щоб коментувати JS, ці теги не є лексемами мови Javascript

— Marecky,

2

@Marecky Вони не коментують JS. Вони ігноруються під час аналізу вмісту <script> у браузері, що підтримує <script>. Сьогодні вони справді не потрібні. Але в дуже древніх браузерах це було злом сумісності, щоб уникнути друку сценарію як звичайний текст.

— leemes

17

Якщо ви дійсно хочете, щоб він працював як діалогове вікно встановлення, просто зосередьтесь на кнопці «Далі» OnLoad.

Таким чином, якщо користувач натискає Return, форма подає та йде вперед. Якщо вони хочуть повернутися назад, вони можуть натиснути Tabабо натиснути кнопку.

— Скотт Готтреу
джерело

2

Вони означають, що хтось заповнює форму і звертається до повернення під час текстового поля.

— Jordan Reiter

17

Це неможливо зробити з чистим HTML. Ви повинні покластися на JavaScript для цього фокусу.

Однак якщо ви розмістите дві форми на сторінці HTML, ви можете це зробити.

Form1 матиме попередню кнопку.

Form2 матиме будь-які введення користувача + наступна кнопка.

Коли користувач натискає Enterу Form2, кнопка Наступне подання запуститься.

— FlySwat
джерело

16

Ви можете це зробити за допомогою CSS.

Покладіть Nextспочатку кнопки в розмітку разом із кнопкою, потім Prevкнопку.

Потім використовуйте CSS, щоб розташувати їх, щоб вони відображалися так, як вам потрібно.

— qui
джерело

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 працюють.
Як завжди, проблема в 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.

Майте на увазі, кнопка повернення все ще працює!

— Джоліон
джерело

1

Без javascript ви не зможете активувати кнопку "попередня сторінка", тому що type = "button"!

— Рископ

Проблема вашої пропозиції полягає в тому, що кнопка type = "button" не публікує форму, тому вона в основному нічого не робить, тоді як друга версія з якорем створить GET замість POST.

— Тілла

12

Якщо у вас є кілька активних кнопок на одній сторінці, ви можете зробити щось подібне:

Позначте першу кнопку, яку ви хочете 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>

Розгорніть фрагмент

— користувач1591131
джерело

11

Зміна порядку вкладки має бути все необхідне для цього. Не ускладнювати.

Іншим простим варіантом буде поставити кнопку "назад" після кнопки "Надіслати" в HTML-коді, але пропустити її зліва, щоб вона відображалася на сторінці перед кнопкою "Надіслати".

— Кенні Джонсон
джерело

10

<input type="submit" name="perv" 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

— джаю
джерело

Проблема полягає в тому, що натискання клавіші "Введення" в текстове поле надсилає форму з першою кнопкою подання, а не з передбачуваною (друга в прикладі). Дізнатися, яка кнопка для надсилання була використана для надсилання форми, легко, і це не було питання!

— рископ

Чому name="perv"?

— Пітер Мортенсен

10

Іншим простим варіантом буде поставити кнопку "назад" після кнопки "Надіслати" в HTML-коді, але пропустити її ліворуч, щоб вона відображалася на сторінці перед кнопкою "Надіслати".

Зміна порядку вкладки має бути все необхідне для цього. Не ускладнювати.

— Пітер Мортенсен
джерело

10

Перший раз, коли я зіткнувся з цим, я зіткнувся з хаком 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
джерело

9

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

Кнопка за замовчуванням елемента елемента - це перша кнопка подання у порядку дерева, власником форми є цей елемент форми.

Якщо користувальницький агент підтримує дозволити користувачеві надсилати форму неявно (наприклад, на деяких платформах, натискаючи клавішу "ввести", коли текстове поле зосереджене, неявно подає форму) ...

З наступним входом be 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
джерело

9

Це те, що я спробував:

Вам потрібно переконатися, що ви даєте своїм кнопкам різні імена
Напишіть 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();
}

— Самуель Мугіша
джерело

Проблема полягає в тому, що натискання клавіші "Введення" в текстове поле надсилає форму з першою кнопкою подання, а не з передбачуваною (друга в прикладі). Дізнатися, яка кнопка для надсилання була використана для надсилання форми, легко, і це не було питання!

— рископ

7

Я натрапив на це питання, намагаючись знайти відповідь на принципово те саме, лише з елементами управління ASP.NET, коли я зрозумів, що кнопка ASP має властивість, яку називають UseSubmitBehavior що дозволяє встановити, який з них робить подання.

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

Про всяк випадок, якщо хтось шукає спосіб ASP.NET, як це зробити.

— Баррі Франклін
джерело

6

За допомогою JavaScript (тут jQuery) ви можете відключити попередню кнопку перед надсиланням форми.

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

— Гійом
джерело

1

Спробуйте це..!

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

Розгорніть фрагмент

— Гоутам Балусамі
джерело

1

Я вирішив дуже подібну проблему таким чином:

Якщо 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>

Розгорніть фрагмент

— рископ
джерело

0

Можна використовувати Tabindex для вирішення цього питання. Також змінити порядок кнопок було б більш ефективним способом цього досягти.

Змініть порядок кнопок і додайте floatзначення, щоб призначити їм потрібне положення, яке ви хочете показати у своєму HTMLподанні.

— Джиоти мішра
джерело

-4

Використовуючи приклад, який ви подали:

<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 десь на бланку, ні "prev", ні "next" не будуть подані.

Отже, використовуючи псевдокод, ви можете зробити наступне:

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

— GateKiller
джерело

1

Ніколи не буває ситуації (без використання js), коли жодна кнопка не спрацьовує. Якщо натиснути клавішу ENTER, перша кнопка в коді призведе до події. У прикладі html це кнопка prev.

— SimonSimCity