Più pulsanti di invio in un modulo HTML

263

Supponiamo che tu abbia creato una procedura guidata in un modulo HTML. Un pulsante torna indietro e uno va avanti. Poiché il pulsante Indietro viene visualizzato per primo nel markup quando si preme Enter, verrà utilizzato quel pulsante per inviare il modulo.

Esempio:

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

Espandi frammento

Vorrei decidere quale pulsante viene utilizzato per inviare il modulo quando un utente preme Enter. In questo modo, quando si preme Enterla procedura guidata, si passa alla pagina successiva, non alla precedente. Devi usare tabindexper fare questo?

— Kevin
fonte

142

Spero che aiuti. Sto solo facendo il trucco di floatpremere i pulsanti a destra.

In questo modo il Prevpulsante è a sinistra del Nextpulsante, ma Nextviene prima nella struttura 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>

Espandi frammento

Vantaggi rispetto ad altri suggerimenti: nessun codice JavaScript, accessibile ed entrambi i pulsanti rimangono type="submit".

— palotasb
fonte

23

Si prega di non farlo senza modificare anche l'ordine delle schede, in modo che premendo il pulsante della scheda scorrerai i pulsanti come appaiono sullo schermo.

— Steve,

61

Cambia il tipo di pulsante precedente in un pulsante come questo:

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

Ora il pulsante Avanti sarebbe l'impostazione predefinita, inoltre potresti anche aggiungere l' defaultattributo ad esso in modo che il tuo browser lo evidenzierà in questo modo:

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

— Wally Lawless
fonte

39

Di quale defaultattributo stai parlando? Non esiste un attributo "predefinito", che sarebbe valido: w3.org/html/wg/drafts/html/master/… (non in HTML5, HTML 4.01 Transitional / Strict, XHTML 1.0 Strict). E non vedo perché cambiare il tipo di input da submitin buttonsarebbe meglio. Puoi avere più elementi di input del tipo di invio in un unico modulo senza problemi. Non capisco davvero perché questa risposta sia così votata.

— Sk8erPeter

3

Avere un input di tipo "pulsante" non esegue l'azione del modulo. Puoi avere un onclick o qualcosa del genere, eseguendo in tal modo un'altra funzione rispetto all'azione del modulo "predefinito" (che viene eseguita premendo il pulsante di tipo "submit"). Questo è quello che stavo cercando ed è per questo che l'ho votato. Non posso parlare per l'attributo "predefinito", non faceva parte del mio problema;) grazie per il tuo chiarimento, comunque.

— Jonas,

2

@ Sk8erPeter, @Jonas .... hmm .. Sospetto che questo defaultattributo sia un attributo globale; attributo enumerato .. che è correlato agli stati di enumerazione: w3.org/html/wg/drafts/html/master/… . a parte quel punto ... l'aspetto pulsante di questa risposta non è una risposta .. è un " suggerimento condizionale " o una query ( domanda stessa ).

— Brett Caswell,

3

@Jonas: sì, type="button"non invia il modulo, sì, type="submit"ma cambiare il tipo di questi pulsanti non è sicuramente una soluzione, perché questi pulsanti dovrebbero sostanzialmente comportarsi allo stesso modo - la domanda dell'OP era come rendere il pulsante "Avanti" il impostazione predefinita per la pressione del tasto Invio. E c'è una possibile soluzione nella risposta accettata.

— Sk8erPeter,

4

@BrettCaswell: cambiare il tipo di questi pulsanti è una brutta soluzione (vedi il mio commento precedente). Non esiste un defaultattributo valido per i inputtag (come ho detto in precedenza) in HTML e i browser (popolari) NON evidenziano il pulsante con questo attributo, il che significa che non esiste un'implementazione non standard di questo attributo - quindi ancora non lo so di cosa stava parlando @Wally Lawless e perché questa risposta è così sopravvalutata. C'è un solo defaultattributo valido introdotto in HTML5, MA solo per il <track>tag: developer.mozilla.org/en-US/docs/Web/HTML/Element/track

— Sk8erPeter

56

Dai ai tuoi pulsanti di invio lo stesso nome in questo modo:

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

Quando l'utente preme Entere la richiesta arriva al server, è possibile verificare il valore submitButtonsul codice sul lato server che contiene una raccolta di name/valuecoppie di moduli . Ad esempio, in 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

Riferimento: utilizzo di più pulsanti di invio in un unico modulo

— huseyint
fonte

26

Questo non è ciò che l'utente ha chiesto. L'utente voleva sapere come controllare quale pulsante di invio in un modulo viene attivato quando si preme invio, ad es. che è il pulsante predefinito.

— kosoant,

20

non funziona in un'applicazione I18n in cui non si conosce nemmeno l'etichetta del pulsante.

— Chris

In quale soluzione di sistema o tecnologia il server stesso non saprebbe quale etichetta è stata utilizzata per il pulsante successivo e il pulsante Indietro? Il server non ha generato in primo luogo il pulsante successivo e quello successivo? (Se la localizzazione viene gestita sul lato client, immagino che il server potrebbe non saperlo, ma non ne ho mai sentito parlare per HTML)

— Jacob

Questa risposta manca completamente la domanda, probabilmente è per una domanda diversa. Perché così tanti voti ??? Per non parlare del fatto che non si dovrebbe mai controllare l'etichetta del pulsante ... richiede molti problemi. Anche il semplice caso: "dovremmo abbreviare la stringa in 'Pagina precedente'" rovinerà la funzionalità dei tuoi siti.

— Tylla,

30

Se il fatto che il primo pulsante sia utilizzato per impostazione predefinita è coerente tra i browser, inseriscili nel codice sorgente e usa CSS per cambiare la loro posizione apparente.

float loro a destra e sinistra per cambiarli visivamente, per esempio.

— Polsonby
fonte

18

A volte la soluzione fornita da @palotasb non è sufficiente. Ci sono casi d'uso in cui, ad esempio, un pulsante di invio "Filtro" è posizionato sopra pulsanti come "Avanti e Indietro". Ho trovato una soluzione alternativa per questo: copiare il pulsante di invio che deve agire come pulsante di invio predefinito in un div nascosto e inserirlo nel modulo sopra qualsiasi altro pulsante di invio. Tecnicamente verrà inviato da un pulsante diverso quando si preme Invio rispetto a quando si fa clic sul pulsante Avanti visibile. Ma poiché il nome e il valore sono gli stessi, non c'è differenza nel risultato.

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

17

Vorrei utilizzare JavaScript per inviare il modulo. La funzione verrebbe attivata dall'evento OnKeyPress dell'elemento modulo e rileverà se il Entertasto è stato selezionato. In tal caso, invierà il modulo.

Ecco due pagine che forniscono tecniche su come eseguire questa operazione: 1 , 2 . Sulla base di questi, ecco un esempio di utilizzo (basato su qui ):

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

2

Cosa succede se JavaScript è disabilitato?

— Jon Winstanley,

2

Non dovresti usare <! - e -> per commentare JS, questi tag non sono token in linguaggio Javascript

— Marecky,

2

@Marecky Non devono commentare JS. Vengono ignorati durante l'analisi del contenuto di <script> in un browser che supporta <script>. Oggi non sono davvero richiesti. Ma in browser molto antichi, questo era un trucco di compatibilità per evitare che lo script venisse stampato come testo normale.

— saluta l'

17

Se vuoi davvero che funzioni come una finestra di installazione, dai uno sguardo al pulsante "Avanti" OnLoad.

In questo modo se l'utente colpisce Return, il modulo invia e va avanti. Se vogliono tornare indietro possono Tabpremere o fare clic sul pulsante.

— Scott Gottreu
fonte

2

Significano che qualcuno compila un modulo e colpisce i risultati mentre si trova in un campo di testo.

— Jordan Reiter,

17

Questo non può essere fatto con HTML puro. Devi fare affidamento su JavaScript per questo trucco.

Tuttavia, se si posizionano due moduli nella pagina HTML, è possibile farlo.

Form1 avrebbe il pulsante precedente.

Form2 avrebbe qualsiasi input utente + il pulsante successivo.

Quando l'utente preme Enterin Form2, il pulsante di invio successivo si attiverà.

— FlySwat
fonte

16

Puoi farlo con CSS.

Inserisci prima i pulsanti nel markup con il Nextpulsante, quindi il Prevpulsante dopo.

Quindi utilizzare CSS per posizionarli in modo che appaiano nel modo desiderato.

— qui
fonte

14

Funziona senza JavaScript o CSS nella maggior parte dei browser:

<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 e Google Chrome funzionano tutti.
Come sempre, Internet Explorer è il problema.

Questa versione funziona quando JavaScript è attivato:

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

Quindi il difetto di questa soluzione è:

La pagina precedente non funziona se si utilizza Internet Explorer con JavaScript disattivato.

Intendiamoci, il pulsante Indietro funziona ancora!

— Jolyon
fonte

1

Senza javascript non sarai in grado di attivare il pulsante "pagina precedente", perché il tipo = "pulsante"!

— riskop

Il problema con il tuo suggerimento è che un pulsante type = "button" non pubblicherebbe il modulo, quindi praticamente non fa nulla, mentre la seconda versione con un ancoraggio creerebbe un GET anziché un POST.

— Tylla,

12

Se hai più pulsanti attivi su una pagina, puoi fare qualcosa del genere:

Contrassegna il primo pulsante che desideri attivare Enterpremendo il tasto come pulsante predefinito nel modulo. Per il secondo pulsante, associarlo al Backspacepulsante sulla tastiera. Il Backspacecodice evento è 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>

Espandi frammento

— user1591131
fonte

11

Cambiare l'ordine delle schede dovrebbe essere tutto ciò che serve per raggiungere questo obiettivo. Keep it simple.

Un'altra semplice opzione sarebbe quella di mettere il pulsante Indietro dopo il pulsante di invio nel codice HTML ma di spostarlo a sinistra in modo che appaia sulla pagina prima del pulsante di invio.

— Kenny Johnson
fonte

10

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

Mantieni lo stesso nome di tutti i pulsanti di invio - "prev".

L'unica differenza è l' valueattributo con valori univoci. Quando creiamo lo script, questi valori univoci ci aiuteranno a capire quale dei pulsanti di invio è stato premuto.

E scrivi la seguente codifica:

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

— Jayu
fonte

Il problema è che se si preme Invio su un campo di testo, il modulo verrà inviato con il primo pulsante di invio, non con quello previsto (il secondo nell'esempio). Scoprire quale pulsante di invio è stato utilizzato per inviare il modulo è facile e non era questa la domanda!

— riskop

Perché name="perv"?

— Peter Mortensen,

10

Un'altra semplice opzione sarebbe quella di mettere il pulsante Indietro dopo il pulsante di invio nel codice HTML, ma spostarlo a sinistra, in modo che appaia sulla pagina prima del pulsante di invio.

Cambiare l'ordine delle schede dovrebbe essere tutto ciò che serve per raggiungere questo obiettivo. Keep it simple.

— Peter Mortensen
fonte

10

La prima volta che mi sono imbattuto in questo, ho escogitato un hack onclick () / JavaScript quando le scelte non sono precedenti / successive che mi piacciono ancora per la sua semplicità. Va così:

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

Quando si fa clic su uno dei pulsanti di invio, memorizza l'operazione desiderata in un campo nascosto (che è un campo stringa incluso nel modello a cui è associato il modulo) e invia il modulo al controller, che esegue tutte le decisioni. Nel controller, scrivi semplicemente:

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

Puoi anche restringerlo leggermente usando i codici numerici per evitare l'analisi delle stringhe, ma a meno che non giochi con le enumerazioni, il codice è meno leggibile, modificabile e autocompattante e l'analisi è comunque banale.

— MiddleAgedMutantNinjaProgrammer
fonte

9

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

Il pulsante predefinito di un elemento modulo è il primo pulsante di invio nell'ordine dell'albero il cui proprietario del modulo è quell'elemento modulo.

Se l'agente utente supporta il fatto di consentire all'utente di inviare un modulo in modo implicito (ad esempio, su alcune piattaforme premendo il tasto "Invio" mentre un campo di testo è focalizzato invia implicitamente il modulo) ...

Avere l'input successivo essere type = "submit" e cambiare l'input precedente in type = "button" dovrebbe dare il comportamento predefinito desiderato.

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

9

Questo è quello che ho provato:

Devi assicurarti di assegnare ai tuoi pulsanti nomi diversi
Scrivi ifun'istruzione che eseguirà l'azione richiesta se si fa clic su uno dei due pulsanti.

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

In PHP,

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

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

— Samuel Mugisha
fonte

Il problema è che se si preme Invio su un campo di testo, il modulo verrà inviato con il primo pulsante di invio, non con quello previsto (il secondo nell'esempio). Scoprire quale pulsante di invio è stato utilizzato per inviare il modulo è facile e non era questa la domanda!

— riskop

7

Mi sono imbattuto in questa domanda quando ho cercato di trovare una risposta sostanzialmente alla stessa cosa, solo con i controlli ASP.NET, quando ho capito che il pulsante ASP ha una proprietà chiamata UseSubmitBehaviorche ti consente di impostare quale effettua l'invio.

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

Nel caso in cui qualcuno stia cercando il modo pulsante ASP.NET per farlo.

— Barry Franklin
fonte

6

Con JavaScript (qui jQuery), è possibile disabilitare il pulsante prev prima di inviare il modulo.

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

— Guillaumes
fonte

1

Prova questo..!

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

Espandi frammento

— Gowtham Balusamy
fonte

1

Ho risolto un problema molto simile in questo modo:

Se JavaScript è abilitato (nella maggior parte dei casi al giorno d'oggi), tutti i pulsanti di invio sono " degradati " ai pulsanti al caricamento della pagina tramite JavaScript (jQuery). Gli eventi click sul pulsante " degradato " sono anche gestiti tramite JavaScript.
Se JavaScript non è abilitato, il modulo viene offerto al browser con più pulsanti di invio. In questo caso, premendo Enterun textfieldtasto all'interno del modulo verrà inviato il modulo con il primo pulsante anziché il valore predefinito previsto , ma almeno il modulo è ancora utilizzabile: è possibile inviare con il pulsante precedente e successivo .

Esempio funzionante:

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

Espandi frammento

— riskop
fonte

0

È possibile utilizzare Tabindexper risolvere questo problema. Anche cambiare l'ordine dei pulsanti sarebbe un modo più efficiente per raggiungere questo obiettivo.

Modificare l'ordine dei pulsanti e aggiungere floatvalori per assegnare loro la posizione desiderata che si desidera mostrare nella HTMLvista.

— Jyoti mishra
fonte

-4

Usando l'esempio che hai dato:

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

Se si fa clic su "Pagina precedente", verrà inviato solo il valore di "precedente". Se si fa clic su "Pagina successiva", verrà inviato solo il valore di "successivo".

Se tuttavia, si preme Enterda qualche parte sul modulo, non verrà inviato né "precedente" né "successivo".

Quindi usando pseudocodice potresti fare quanto segue:

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

— GateKiller
fonte

1

Non c'è mai una situazione (senza usare js) in cui nessuno dei pulsanti è attivato. Se si preme INVIO, il primo pulsante nel codice cattura l'evento. Nell'esempio html è il pulsante prev.

— SimonSimCity,