JavaScript confirm, finestre di avviso javascript con scelta

In quest’articolo parleremo di JavaScript confirm, cioè della modalità per creare una finestra dove l’utente può effettuare una scelta.

Con il metodo confirm(), a differenza del m e todo alert(), la comunicazione quindi non è unilaterale ma bilaterale.

Esempio 1 – JavaScript confirm

Facciamo subito un esempio d’utilizzo.

Provate ad inserire alcuni dati nei campi sotto e dopo cliccate sul pulsante Reset. Vi comparirà la finestra che vi dirà se volete veramente resettare i dati.

Quindi all’interno della pagina web, in una parte qualunque, inseriamo il form con le etichette, le caselle di testo e il pulsante reset.

<form name="invio-dati" onreset="return Conferma()">
  <label>Nome </label>
  <input type="text" name="nome">
  <label>Cognome </label>
  <input type="text" name="cognome">
  <input type="reset" value="Reset">
</form>

Notate, in particolare, che ho inserito l’evento onreset all’interno del tag form.

Dopo, così come spiegato nella scorsa lezione, inseriamo il seguente codice JavaScript anche nella stessa pagina per semplicità.

All’interno del metodo confirm scriviamo quindi se si vuole reimpostare il modulo.

function Conferma() {
  const reimposta= confirm("Vuoi reimpostare il modulo?");
  return reimposta;
}

Esempio 2 con JavaScript confirm

Facciamo un altro semplicissimo esempio di utilizzo del metodo confirm(), in cui la finestra, dopo aver premuto il pulsante, visualizzerà la scelta che abbiamo effettuato.

Provate nuovamente ad inserite i dati nei campi sotto e dopo premete reset. La finestra di dialogo dopo aver premuto il pulsante vi dirà la scelta che avete effettuato.

Per l’html utilizziamo lo stesso form di prima.

Ho modificato invece il codice JavaScript, per poter visualizzare, subito dopo, un alert che ci indica la scelta che abbiamo effettuato.

Usiamo un’istruzione condizionale, ovvero la funzione se … altrimenti, che controlla se il pulsante ok è stato premuto. Se è così useremo il metodo alert() per visualizzare che si è scelto di reimpostare i dati, altrimenti utilizzeremo sempre il metodo alert() per dire che si è scelto di premere annulla.

Ecco dunque l’esempio completo che utilizza JavaScript confirm:

function Conferma() {
  const reimposta = confirm("Vuoi reimpostare il modulo?");
  if (reimposta){ //ovvero se reimposta === true
       alert("Hai scelto di reimpostare i dati");
  }
  else {
      alert("Hai premuto Annulla");
  }
}

Per poter sviluppare questo esempio potete seguire la lezione sulle istruzioni condizionali in JavaScript presentata in questa lezione: istruzione if else.

Questi sono solo dei semplici esempi di uso del metodo confirm() in JavaScript.

<< alert

prompt >>