Javascript, passare da un campo all'altro di un form premendo il tasto Invio

Corso jQuery
Creare applicazioni client-side col Framework jQuery

Scritto da Luca Ruggiero nella sezione Javascript

Le richieste dei clienti sono sempre più strane e quella di oggi giuro che non mi è mai capitata prima: mi è stato chiesto se è possibile passare da un campo all'altro di un form premendo il tasto Invio invece che utilizzando la tradizionale tabulazione. Contento il cliente... contenti tutti.

Naturalmente il problema è stato risolto con Javascript (e testato con Explorer, Chrome e Firefox) e svolge i seguenti compiti:

  1. disattiva per default il submit del form, altrimenti alla pressione del tasto [INVIO] verrebbero spediti i dati;
  2. salta da un campo all'altro del form, come da richiesta;
  3. arrivato sul bottone [Salva] attiva l'evento submit che invia i dati allo script lato server che li elaborerà;
  4. NON effettua alcun controllo sui campi.

Per prima cosa creiamo il form, impostando il "return false" sullevento submit del form stesso:

<form onsubmit="return false;">
    Primo campo<br/><br/>
    <input type="text" name="campo_1"/><br/><br/>
    Secondo campo<br/><br/>
    <input type="text" name="campo_2"/><br/><br/>
    Terzo campo<br/><br/>
    <input type="text" name="campo_3"/><br/><br/>
    <input type="submit" value="Salva"/><br/><br/>
</form>

A parte quanto suddetto circa il discorso del "return false", non c'è alcun ulteriore riferimento agli script per il funzionamento di quanto in oggetto nel contesto del codice del form.

Riferimenti che, invece, sono copiosi nella gestione del tag "body" della pagina:

<body onload="document.forms[0].elements[0].focus()" onkeyup="cambia_campo(event)">

Impostiamo per default il focus sul primo elemento del form, quindi all'evento "keyup" lanciamo la funzione Javascript di cui segue il codice:

var conta = 0;
function cambia_campo(e)
{
    var evento = e || window.event;
    if (evento.keyCode == 13)
    {
        conta ++;
        if (conta == document.forms[0].length)
        {
            document.forms[0].method = "post";
            document.forms[0].action = "script.asp";
            document.forms[0].submit();
        }
        document.forms[0].elements[conta].focus();
    }
}

Esternamente alla funzione dichiaro una variabile di tipo "contatore" che mi servirà per intercettare l'elemento del form su cui è momentaneamente impostato il focus.

La funzione cambia_camp() accetta un parametro fisso, ossia "event", passato all'interno del richiamo alla funzione nel tag "body" della pagina.

A questo punto imposto una condizione che verifica che il tasto premuto sulla tastiera sia [Invio], ossia il tasto generalmente impostato come 13.

All'interno della condizione effettuo le seguenti operazioni:

  • incremento la variabile "contatore" creata esternamente alla funzione;
  • imposto una condizione per verificare se sono arrivato sul bottone [Salva] premendo il tasto [Invio], caso in cui imposto il metodo di invio dei dati, lo script lato server di destinazione e lancio il submit;
  • sposto il focus campo del form successivo.

Lo script è ottimizzato per qualsiasi tipo di form, ma facendo riferimento a forms[0], funziona sempre col primo degli N eventuali form presenti in una pagina.

I più cliccati della sezione Javascript

:: jQuery Validation: validazione di un form con jQuery (107.883)

:: Breve guida a jQuery (98.555)

:: Le espressioni regolari in Javascript (84.978)

:: Gestione delle stringhe in Javascript (74.955)

:: Stampare una pagina col Dhtml (42.844)

:: Inserire in automatico lo slash nel formato data gg/mm/aaaa (41.562)

:: Menu orizzontale dinamico in Dhtml (37.180)

:: Gli Array in Javascript (35.935)

:: Temporizzazioni Javascript (31.612)

:: Istruzion condizionali in Javascript: if e switch (28.931)

IN EVIDENZA
DOWNLOAD