Pulsanti di invio multipli in un modulo HTML

StackOverflow https://stackoverflow.com/questions/48

Domanda

Supponiamo che tu crei una procedura guidata in un modulo HTML.Un pulsante va indietro e l'altro va avanti.Dal momento che Indietro Il pulsante viene visualizzato per primo nel markup quando premi Invio, utilizzerà 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>

Quello che vorrei fare è decidere quale pulsante utilizzare per inviare il modulo quando un utente preme Invio.In questo modo, quando premi Invio, la procedura guidata passerà alla pagina successiva e non a quella precedente.Devi usare tabindex per fare questo?

È stato utile?

Soluzione

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

In questo modo il Prev è a sinistra del Next pulsante ma il Next viene 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>

Modificare: Vantaggi rispetto ad altri suggerimenti:no JavaScript, accessibile, rimangono entrambi i pulsanti type="submit"

Altri suggerimenti

Sarebbe possibile modificare il tipo di pulsante precedente in un pulsante come questo: 

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

Ora il pulsante Avanti sarebbe quello predefinito, inoltre potresti anche aggiungere il file default attribuiscilo in modo che il tuo browser lo evidenzi in questo modo:

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

Spero che aiuti.

Assegna ai 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 Invio e il Richiesta va al server, puoi controllare il valore di submitButton sul codice lato server che contiene una raccolta di moduli name/value coppie.Ad esempio nell'ASP classico:

If Request.Form("submitButton") = "Previous Page" Then
    ' Code for Previous Page
ElseIf Request.Form("submitButton") = "Next Page" Then
    ' Code for Next Page
End If

Riferimento: Utilizzo di più pulsanti di invio su un unico modulo

Se il fatto che il primo pulsante venga utilizzato per impostazione predefinita è coerente tra i browser, perché non inserirli nel modo giusto nel codice sorgente, quindi utilizzare i CSS per invertire le loro posizioni apparenti? float a sinistra e a destra per invertirli visivamente, ad esempio.

Se vuoi davvero che funzioni come una finestra di dialogo di installazione, che ne dici di concentrarti semplicemente sul pulsante "Avanti" OnLoad.In questo modo se l'utente preme Invio, il modulo viene inviato e va avanti.Se vogliono tornare indietro possono premere Tab o fare clic sul pulsante.

A volte la soluzione fornita da @palotasb non è sufficiente.Esistono casi d'uso in cui, ad esempio, un pulsante di invio "Filtro" viene posizionato sopra pulsanti come "Successivo e Precedente".Ho trovato una soluzione alternativa per questo: copia il pulsante di invio che deve fungere da pulsante di invio predefinito in un div nascosto e posizionarlo all'interno del modulo sopra qualsiasi altro pulsante di invio.Tecnicamente verrà inviato tramite un pulsante diverso quando si preme Invio e quindi 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>

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

Tuttavia, se inserisci due moduli nella pagina HTML, puoi farlo.

Form1 avrebbe il pulsante precedente.

Form2 avrebbe qualsiasi input dell'utente + il pulsante successivo.

Quando l'utente preme accedere in Form2, il pulsante di invio successivo si attiverebbe.

Puoi farlo con i CSS.

Inserisci i pulsanti nel markup con il file Next prima il pulsante, poi il Prev pulsante in seguito.

Quindi usa i CSS per posizionarli in modo che appaiano nel modo desiderato.

Vorrei utilizzare Javascript per inviare il modulo.La funzione verrebbe attivata dall'evento OnKeyPress dell'elemento del modulo e rileverebbe se è stato selezionato il tasto Invio.In tal caso, invierà il modulo.

Ecco due pagine che forniscono le 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)" />

Kevin,

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, Google Chrome funzionano tutti.
Come sempre, IE è 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 usi IE con Javascript disattivato.
Intendiamoci, il pulsante Indietro funziona ancora!

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

Contrassegna il primo pulsante su cui desideri che si attivino i trigger accedere premere il tasto come pulsante predefinito nel modulo.Per il secondo pulsante associalo a Indietro pulsante sulla tastiera. Indietro il codice 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>

Spero che questo ti aiuti.

Cambiare l'ordine di tabulazione dovrebbe essere tutto ciò che serve per raggiungere questo obiettivo.Mantienilo semplice.

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

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

Cambiare l'ordine di tabulazione dovrebbe essere tutto ciò che serve per raggiungere questo obiettivo.Mantienilo semplice.

mantieni lo stesso nome di tutti i pulsanti di invio: "prev" L'unica differenza è il value attributo 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

La prima volta che mi sono imbattuto in questo problema ho ideato un hack onclick()/js quando le scelte non sono prev/next che mi piace ancora per la sua semplicità.Funziona 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, l'operazione desiderata viene memorizzata in un campo nascosto (che è un campo stringa incluso nel modello a cui è associato il modulo) e invia il modulo al Controller, che prende 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 rafforzarlo leggermente utilizzando codici operativi numerici per evitare l'analisi delle stringhe, ma a meno che non giochi con Enum, il codice è meno leggibile, modificabile e autodocumentante e l'analisi è comunque banale.

Questo è quello che ho provato:1.Devi assicurarti di dare ai tuoi pulsanti nomi diversi 2.Scrivi un'istruzione if che eseguirà l'azione richiesta se si fa clic su uno dei 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();

}

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

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

Se l'agente utente supporta consentire all'utente di inviare un modulo implicitamente (ad esempio, su alcune piattaforme che colpiscono il tasto "Immettere" mentre un campo di testo è focalizzato implicitamente presenta il modulo) ...

Il fatto che l'input successivo sia type="submit" e la modifica dell'input precedente in type="button" dovrebbe fornire 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>

Mi sono imbattuto in questa domanda mentre cercavo di trovare una risposta sostanzialmente alla stessa cosa, solo con i controlli asp.net, quando ho scoperto che il pulsante asp ha una proprietà chiamata UseSubmitBehavior che ti consente di impostare quale esegue l'invio. 

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

Nel caso in cui qualcuno stia cercando il pulsante asp.net per farlo.

Con Javascript (qui jQuery), puoi disabilitare il pulsante Prev prima di inviare il modulo.

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

Ho risolto un problema molto simile in questo modo:

  1. Se javascript è abilitato (nella maggior parte dei casi oggigiorno), tutti i pulsanti di invio saranno "degradato" ai pulsanti al caricamento della pagina tramite javascript (jquery).Fare clic sugli eventi su "degradato" I pulsanti digitati tramite pulsante vengono gestiti anche tramite javascript.

  2. Se javascript non è abilitato, il modulo viene servito al browser con più pulsanti di invio.In questo caso premendo Invio su a textfield all'interno del modulo invierà il modulo con il primo pulsante invece di quello previsto predefinito, ma almeno il modulo è ancora utilizzabile:puoi inviare con entrambi i file prec E Prossimo pulsanti.

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>

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>

Puoi usare Tabindex Per risolvere questo problema, anche cambiare l'ordine dei pulsanti sarebbe un modo più efficiente per raggiungere questo obiettivo.Cambia l'ordine dei pulsanti e aggiungi float valori per assegnare loro la posizione desiderata che desideri mostrare nel tuo HTML visualizzazione.

Utilizzando l'esempio che hai fornito:

<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 "prev".Se si fa clic su "Pagina successiva" verrà inviato solo il valore di "successivo".

Se tuttavia si preme Invio da qualche parte nel modulo, non verranno inviati né "prev" né "next".

Quindi usando lo pseudo codice 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
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top