23 aprile 2021

Form: eventi e metodi di submit

L’evento submit si scatena quando il form viene inviato, e solitamente viene usato per validare il form prima dell’invio al server o per annullare l’invio e elaborarlo con JavaScript.

Il metodo form.submit() ci permette di iniziare l’invio del form da JavaScript. Possiamo usarlo per creare ed inviare i nostri form al server dinamicamente.

Andiamo più nel dettaglio.

Evento: submit

Ci sono due modi per inviare un form:

Il primo – cliccare <input type="submit"> o <input type="image">.
Il secondo – premere Enter su un campo di input.

Entrambe le azioni portano all’evento submit del form. Il gestore può controllare i dati, ed in caso di errori, può mostrarli e chiamare event.preventDefault(), ed a quel punto il form non viene inviato al server.

Nel form seguente:

Andare nel campo di testo e premere Enter.
Cliccare <input type="submit">.

Entrambe le azioni mostrano un alert ed il form non viene inviato da nessuna parte a causa di return false:

          <form onsubmit="alert('submit!');return false">
  Primo: Entrare nel campo di testo <input type="text" value="text"><br>
  Secondo: Clicare "submit": <input type="submit" value="Submit">
</form>

Quando un form viene inviato usando Enter su un campo di input, un evento click viene scaturito sull’elemento <input type="submit">.

Ciò è piuttosto divertente, dal momento che non c’è stato nessun click.

Ecco la demo:

          <form onsubmit="return false">
 <input type="text" size="30" value="Porre il focus qui e premere Invio">
 <input type="submit" value="Submit" onclick="alert('click')">
</form>

Metodo: submit

Per eseguire l’invio (submit) di un form sul server manualmente, possiamo chiamare form.submit().

In questo caso l’evento di submit non viene generato. Si assume che il programmatore chiamando form.submit(), abbia previsto che nello script siano state considerate tutte le dovute elaborazioni.

Talvolta viene usato per creare ed inviare manualmente un form, come in questo esempio:

let form = document.createElement('form');
form.action = 'https://google.com/search';
form.method = 'GET';

form.innerHTML = '<input name="q" value="test">';

// il form deve essere nel documento per poterlo inviare
document.body.append(form);

form.submit();

Esercizi

Modal form

Create una funzione showPrompt(html, callback) che mostra un form con un messaggio html, un campo di input ed i pulsanti OK/CANCEL.

Un utente dovrebbe digitare qualcosa nel campo di testo e premere Enter o il pulsante OK, quindi verrà chiamata callback(value) con il valore che è stato inserito.
Altrimenti, se l’utente preme Esc oppure CANCEL, viene chiamata callback(null).

In entrambi i casi, questo termina l’elaborazione dell’input e rimuove il form.

Requisiti:

Il form dovrebbe essere al centro della finestra.
Il form è modal. In altre parole, non possono esserci interazioni con il resto della pagina fino a quando non viene chiusa.
Quando viene mostrato il form, il focus dovrebbe essere dentro il campo <input> per l’utente.
I tasti Tab/Shift+Tab dovrebbe cambiare il focus tra i campi del form, e non permettergli di lasciarlo per altri elementi della pagina.

Un esempio di come dovrebbe funzionare:

          showPrompt("Enter something<br>...smart :)", function(value) {
  alert(value);
});
        

Una demo nell’iframe:

P.S.: Il sorgente del documento ha HTML e CSS per il form, con posizionamento fixed, ma sta a te renderla modale.

Apri una sandbox per l'esercizio.

Una finestra modale può essere implementata usando un <div id="cover-div"> semitrasparente che copre l’intera finestra, in questa maniera:

          #cover-div {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9000;
  width: 100%;
  height: 100%;
  background-color: gray;
  opacity: 0.3;
}
        

Dato che il <div> copre ogni cosa, sarà questo elemento a catturare tutti i click, e non la pagina sottostante.

Inoltre può essere prevenuto lo scrolling della pagina impostando body.style.overflowY='hidden'.

Il form non dovrebbe essere dentro il <div>, ma subito dopo nel codice della pagina (quindi starà anche sopra), perché non vogliamo che sia soggetto alla trasparenza dovuta ad opacity.

Apri la soluzione in una sandbox.

Mappa del tutorial

Commenti

leggi questo prima di lasciare un commento…