Wiele przycisków przesyłania w formie HTML

263

Załóżmy, że tworzysz kreatora w formie HTML. Jeden przycisk wraca, a drugi idzie do przodu. Ponieważ przycisk Wstecz pojawia się jako pierwszy w znaczniku po naciśnięciu Enter, użyje tego przycisku do przesłania formularza.

Przykład:

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

Rozwiń fragment kodu

Chciałbym zdecydować, który przycisk służy do przesłania formularza, gdy użytkownik naciśnie Enter. W ten sposób po naciśnięciu Enterkreator przejdzie do następnej strony, a nie poprzedniej. Czy musisz tabindexto zrobić?

— Kevin
źródło

142

Mam nadzieję, że to pomoże. Po prostu staram się wciskać floatprzyciski po prawej stronie.

W ten sposób Prevprzycisk znajduje się po lewej stronie Nextprzycisku, ale Nextjest on pierwszy w strukturze 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>

Rozwiń fragment kodu

Korzyści w porównaniu z innymi sugestiami: brak kodu JavaScript, dostępne i oba przyciski pozostają type="submit".

— palotasb
źródło

23

Nie rób tego bez zmiany kolejności tabulatorów, aby naciśnięcie przycisku tabulacji powodowało cykliczne przewijanie przycisków wyświetlanych na ekranie.

— Steve,

61

Zmień poprzedni typ przycisku na przycisk taki jak ten:

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

Teraz przycisk Dalej będzie domyślny, a ponadto możesz dodać do niego defaultatrybut, aby przeglądarka go podświetliła w następujący sposób:

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

— Wally Lawless
źródło

39

O jakim defaultatrybucie mówisz? Nie ma atrybutu „default”, który byłby prawidłowy: w3.org/html/wg/drafts/html/master/... (nie w HTML5, HTML 4.01 Transitional / Strict, XHTML 1.0 Strict). I nie rozumiem, dlaczego zmiana typu wejścia z submitna buttonmiałaby być lepsza. Możesz mieć wiele elementów wejściowych typu przesyłania w jednej formie bez problemu. Naprawdę nie rozumiem, dlaczego ta odpowiedź jest tak pozytywna.

— Sk8erPeter

3

Wprowadzenie wartości typu „przycisk” nie powoduje wykonania akcji formularza. Możesz mieć kliknięcie lub coś, co spowoduje wykonanie innej funkcji niż „domyślna” czynność formularza (która jest wykonywana przez naciśnięcie przycisku typu „prześlij”). Właśnie tego szukałem i dlatego głosowałem. Nie mogę mówić o atrybucie „domyślnym”, nie było częścią mojego problemu;) dziękuję za wyjaśnienie.

— Jonas

2

@ Sk8erPeter, @Jonas .... hmm .. Podejrzewam, że ten defaultatrybut jest atrybutem globalnym; wyliczony atrybut .., który jest powiązany ze stanami wyliczenia: w3.org/html/wg/drafts/html/master/… . poza tym punktem ... aspekt przycisku tej odpowiedzi nie jest odpowiedzią .. jest to „ sugestia warunkowa ” lub zapytanie ( samo pytanie ).

— Brett Caswell,

3

@Jonas: tak, type="button"nie przesyła formularza, type="submit"robi, ale zmiana rodzaju tych przycisków zdecydowanie nie jest rozwiązaniem, ponieważ te przyciski powinny zasadniczo zachowywać się w ten sam sposób - pytanie OP było takie, jak zrobić przycisk „Dalej” domyślne dla naciśnięcia klawisza Enter. I jest możliwe rozwiązanie w zaakceptowanej odpowiedzi.

— Sk8erPeter

4

@BrettCaswell: zmiana rodzaju tych przycisków jest złym obejściem (patrz mój poprzedni komentarz). Nie ma prawidłowego defaultatrybutu dla inputtagów (jak już wspomniałem wcześniej) w HTML, a (popularne) przeglądarki NIE podświetlą przycisku z tym atrybutem, co oznacza, że nie ma niestandardowej implementacji tego atrybutu - więc nadal nie wiem o czym mówił @Wally Lawless i dlaczego ta odpowiedź jest tak przereklamowana. W defaultHTML5 wprowadzono tylko jeden poprawny atrybut, ALE tylko dla <track>znacznika: developer.mozilla.org/en-US/docs/Web/HTML/Element/track

— Sk8erPeter

56

Nadaj przyciskom przesyłania taką samą nazwę:

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

Gdy użytkownik naciska, Entera żądanie trafia do serwera, możesz sprawdzić wartość kodu submitButtonpo stronie serwera, który zawiera zbiór name/valuepar formularzy . Na przykład w 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

Odniesienie: Używanie wielu przycisków przesyłania w jednym formularzu

— huseyint
źródło

26

Nie o to pytał użytkownik. Użytkownik chciał wiedzieć, jak kontrolować, który przycisk wysyłania w formularzu jest aktywowany po naciśnięciu Enter, tj. który jest domyślnym przyciskiem.

— kosoant

20

nie działa w aplikacji I18n, w której nawet nie znasz etykiety przycisku.

— Chris

W jakim rozwiązaniu systemowym lub technologicznym sam serwer nie wiedziałby, jakiej etykiety użyto dla przycisku następnego i wstecz? Czy serwer nie wygenerował przycisku Dalej i Wstecz? (Jeśli lokalizacja jest obsługiwana po stronie klienta, wyobrażam sobie, że serwer może nie wiedzieć, ale nigdy nie słyszałem o tym w przypadku HTML)

— Jacob

Ta odpowiedź całkowicie pomija pytanie, prawdopodobnie dotyczy innego pytania. Dlaczego tyle głosów poparcia? Nie wspominając już o tym, że nigdy nie należy sprawdzać etykiety przycisku ... wymaga wielu problemów. Nawet prosty przypadek: „powinniśmy skrócić ciąg do„ Poprzednia strona ”” zrujnuje funkcjonalność Twojej witryny.

— Tylla

30

Jeśli fakt, że pierwszy przycisk jest domyślnie używany, jest spójny w różnych przeglądarkach, umieść je we właściwy sposób w kodzie źródłowym, a następnie użyj CSS, aby zmienić ich pozorne pozycje.

float na lewo i na prawo, aby na przykład przełączać je wizualnie.

— Polsonby
źródło

18

Czasami dostarczone rozwiązanie @palotasb nie jest wystarczające. Są przypadki użycia, w których na przykład przycisk „Filtr” przesyła się nad przyciskami, takimi jak „Następny i poprzedni”. Znalazłem obejście tego: skopiuj przycisk przesyłania, który musi działać jako domyślny przycisk przesyłania w ukrytym div i umieść go w formularzu nad dowolnym innym przyciskiem przesyłania. Technicznie będzie on przesłany innym przyciskiem po naciśnięciu Enter niż po kliknięciu widocznego przycisku Dalej. Ale ponieważ nazwa i wartość są takie same, wynik nie ma różnicy.

<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
źródło

17

Chciałbym użyć JavaScript, aby przesłać formularz. Funkcja zostanie uruchomiona przez zdarzenie OnKeyPress elementu formularza i wykryje, czy Enterklucz został wybrany. W takim przypadku prześle formularz.

Oto dwie strony, które podają techniki, jak to zrobić: 1 , 2 . Na podstawie tych oto przykład użycia (na podstawie tutaj ):

<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
źródło

2

Co się stanie, jeśli JavaScript zostanie wyłączony?

— Jon Winstanley,

2

Nie powinieneś używać <! - i -> do komentowania JS, te tagi nie są tokenami języka JavaScript

— Marecky 28.01.2013

2

@Marecky Nie komentują JS. Są one ignorowane podczas analizowania zawartości <script> w przeglądarce obsługującej <script>. Dzisiaj tak naprawdę nie są wymagane. Ale w bardzo starożytnych przeglądarkach był to hack kompatybilności, aby uniknąć drukowania skryptu jako zwykłego tekstu.

— leemes

17

Jeśli naprawdę chcesz, aby działało jak okno dialogowe instalacji, po prostu skoncentruj się na przycisku „Dalej” OnLoad.

W ten sposób, jeśli użytkownik kliknie Return, formularz prześle i przejdzie do przodu. Jeśli chcą wrócić, mogą nacisnąć Tabprzycisk lub kliknąć przycisk.

— Scott Gottreu
źródło

2

Oznaczają, że ktoś wypełnia formularz, a trafienia powracają w polu tekstowym.

— Jordan Reiter

17

Nie można tego zrobić za pomocą czystego HTML. Musisz polegać na JavaScript w tej sztuczce.

Jeśli jednak umieścisz dwie strony na stronie HTML, możesz to zrobić.

Formularz 1 miałby poprzedni przycisk.

Form2 miałby wszelkie dane wejściowe użytkownika + następny przycisk.

Gdy użytkownik naciśnie Enterw formularzu 2, uruchomi się przycisk Dalej prześlij.

— FlySwat
źródło

16

Możesz to zrobić za pomocą CSS.

NextNajpierw umieść przyciski w znaczniku , a następnie Prevprzycisk.

Następnie użyj CSS, aby ustawić je tak, aby wyglądały tak, jak chcesz.

— qui
źródło

14

Działa to bez JavaScript lub CSS w większości przeglądarek:

<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 i Google Chrome działają wszystkie.
Jak zawsze problem stanowi Internet Explorer.

Ta wersja działa, gdy JavaScript jest włączony:

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

Wada tego rozwiązania polega na:

Poprzednia strona nie działa, jeśli używasz przeglądarki Internet Explorer z wyłączonym JavaScript.

Pamiętaj, że przycisk Wstecz nadal działa!

— Jolyon
źródło

1

Bez javascript nie będziesz mógł aktywować przycisku „poprzednia strona”, ponieważ typ = „przycisk”!

— riskop

Problem z twoją sugestią polega na tym, że typ przycisku = „przycisk” nie opublikuje formularza, więc w zasadzie nic nie robi, podczas gdy druga wersja z kotwicą utworzy GET zamiast POST.

— Tylla

12

Jeśli masz wiele aktywnych przycisków na jednej stronie, możesz zrobić coś takiego:

Zaznacz pierwszy przycisk, który chcesz uruchomić po Enternaciśnięciu klawisza, jako domyślny przycisk w formularzu. W przypadku drugiego przycisku powiąż go z Backspaceprzyciskiem na klawiaturze. Kod Backspacezdarzenia to 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>

Rozwiń fragment kodu

— użytkownik1591131
źródło

11

Aby to zrobić, wystarczy zmienić kolejność kart. Nie komplikuj.

Inną prostą opcją byłoby umieszczenie przycisku Wstecz za przyciskiem Prześlij w kodzie HTML, ale przesunięcie go w lewo, aby pojawił się na stronie przed przyciskiem Prześlij.

— Kenny Johnson
źródło

10

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

Nie zmieniaj nazwy wszystkich przycisków przesyłania - „poprzednia”.

Jedyną różnicą jest value atrybut o unikalnych wartościach. Podczas tworzenia skryptu te unikalne wartości pomogą nam dowiedzieć się, który przycisk przesyłania został naciśnięty.

I napisz następujące kodowanie:

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

— jayu
źródło

Problem polega na tym, że naciśnięcie klawisza Enter w polu tekstowym spowoduje przesłanie formularza za pomocą pierwszego przycisku przesyłania, a nie zamierzonego (drugi w przykładzie). Ustalenie, który przycisk przesłania został użyty do przesłania formularza, jest łatwe i to nie było pytanie!

— riskop

Dlaczego name="perv"?

— Peter Mortensen

10

Inną prostą opcją byłoby umieszczenie przycisku Wstecz po przycisku przesyłania w kodzie HTML, ale przesunięcie go w lewo, aby pojawił się na stronie przed przyciskiem przesyłania.

Aby to zrobić, wystarczy zmienić kolejność kart. Nie komplikuj.

— Peter Mortensen
źródło

10

Kiedy po raz pierwszy się z tym spotkałem, wpadłem na hack onclick () / JavaScript, gdy wyborów nie ma w poprzedniej / następnej wersji, którą wciąż lubię za jej prostotę. To wygląda tak:

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

Kliknięcie dowolnego przycisku przesyłania powoduje zapisanie żądanej operacji w ukrytym polu (będącym polem ciągu zawartym w modelu, z którym powiązany jest formularz) i przesłanie formularza do kontrolera, który podejmuje wszystkie decyzje. W kontrolerze piszesz po prostu:

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

Możesz również nieco to zaostrzyć za pomocą numerycznych kodów operacji, aby uniknąć parsowania ciągów, ale jeśli nie będziesz grać z wyliczeniami, kod jest mniej czytelny, modyfikowalny i sam dokumentuje się, a parsowanie jest w każdym razie banalne.

— MiddleAgedMutantNinjaProgrammer
źródło

9

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

Domyślny przycisk elementu formularza jest pierwszym przyciskiem przesyłania w kolejności drzew, którego właścicielem formularza jest ten element formularza.

Jeśli agent użytkownika obsługuje niejawne przesyłanie formularza (na przykład na niektórych platformach naciśnięcie klawisza „enter”, gdy pole tekstowe jest aktywne, niejawnie przesyła formularz) ...

Kolejne wejście powinno mieć typ = „prześlij”, a zmiana poprzedniego wejścia na typ = „przycisk” powinna dać pożądane zachowanie domyślne.

<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
źródło

9

Oto, co wypróbowałem:

Musisz upewnić się, że przyciski mają różne nazwy
Napisz ifinstrukcję, która wykona wymagane działanie po kliknięciu dowolnego przycisku.

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

W PHP

if(isset($_POST['prev']))
{
    header("Location: previous.html");
    die();
}

if(isset($_POST['next']))
{
    header("Location: next.html");
    die();
}

— Samuel Mugisha
źródło

Problem polega na tym, że naciśnięcie klawisza Enter w polu tekstowym spowoduje przesłanie formularza za pomocą pierwszego przycisku przesyłania, a nie zamierzonego (drugi w przykładzie). Ustalenie, który przycisk przesłania został użyty do przesłania formularza, jest łatwe i to nie było pytanie!

— riskop

7

Zetknąłem się z tym pytaniem, próbując znaleźć odpowiedź na to samo, tylko z kontrolkami ASP.NET, kiedy zorientowałem się, że przycisk ASP ma właściwość o nazwie, UseSubmitBehaviorktóra pozwala ci ustawić, który z nich przesyła.

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

Na wypadek, gdyby ktoś szukał przycisku ASP.NET, aby to zrobić.

— Barry Franklin
źródło

6

Za pomocą JavaScript (tutaj jQuery) możesz wyłączyć przycisk poprzedni przed przesłaniem formularza.

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

— GuillaumeS
źródło

1

Spróbuj tego..!

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

Rozwiń fragment kodu

— Gowtham Balusamy
źródło

1

W ten sposób rozwiązałem bardzo podobny problem:

Jeśli JavaScript jest włączony (w większości przypadków obecnie), wówczas wszystkie przyciski przesyłania są „ zdegradowane ” do przycisków przy ładowaniu strony przez JavaScript (jQuery). Zdarzenia kliknięcia na przyciskach „ zdegradowanych ” są również obsługiwane przez JavaScript.
Jeśli JavaScript nie jest włączony, formularz jest wyświetlany w przeglądarce z wieloma przyciskami przesyłania. W tym przypadku uderzania Enterna zasadzie textfieldw formie przedstawi formularz z pierwszego przycisku zamiast zamierzonego domyślnie , ale przynajmniej forma jest nadal użyteczny: można złożyć zarówno z poprz i kolejnych przycisków.

Przykład roboczy:

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

Rozwiń fragment kodu

— ryzyko
źródło

0

Możesz użyć, Tabindexaby rozwiązać ten problem. Bardziej skutecznym sposobem na osiągnięcie tego jest również zmiana kolejności przycisków.

Zmień kolejność przycisków i dodaj floatwartości, aby przypisać im żądaną pozycję, którą chcesz pokazać w swoim HTMLwidoku.

— Jyoti mishra
źródło

-4

Korzystając z podanego przykładu:

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

Jeśli klikniesz „Poprzednia strona”, zostanie przesłana tylko wartość „poprzednia”. Jeśli klikniesz „Następna strona”, zostanie przesłana tylko wartość „następna”.

Jeśli jednak naciśniesz Entergdzieś na formularzu, ani „poprzedni”, ani „następny” nie zostaną przesłane.

Korzystając z pseudokodu, możesz wykonać następujące czynności:

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

— GateKiller
źródło

1

Nigdy nie ma sytuacji (bez użycia js), gdy żaden z przycisków nie zostanie uruchomiony. Jeśli naciśniesz ENTER, pierwszy przycisk w kodzie złapie zdarzenie. W przykładzie HTML jest to przycisk Poprzedni.

— SimonSimCity,