Javascript – alert di conferma quando si chiude una pagina

Vi è mai capitato di dover avvertire i vostri utenti prima di cambiare o chiudere una pagina o tab? Scopriamo oggi come far apparire un comodo alert con javascript quando si sta per chiudere la pagina.

Per creare un alert di conferma quando si chiude una pagina utilizzando javascript ci viene in aiuto il metodo onbeforeunload applicato a window.

Se volete approfondire vi rimando a questo indirizzo.

Veniamo ora al codice.

//Confirmation alla chiusura 
window.onbeforeunload = function (e) {        
e = e || window.event; // IE fix   
if (e) { 
e.returnValue = 'Uscendo senza salvare perderai il tuo lavoro, vuoi continuare?';
}       
return 'Uscendo senza salvare perderai il tuo lavoro, vuoi continuare?'; 
};//Confirmation alla chiusura

Come vedete il codice è molto semplice e prima di effettuare l’unload della finestra (window) esegue il codice .

Molto spesso però si ha la necessità di inibire lo script al click su qualche pulsante, ad esempio il submit del form principale. Questo si rende necessario altrimenti i vostri utenti non riusciranno a inviare il form senza prima avere l’alert di conferma.

Vediamo come fare.

var submit_clicked = false; 

$('button[type="submit"]').click(function(){ 
 submit_clicked = true; 
}); 

window.onbeforeunload = function (e) {  

	console.log(submit_clicked);   
	if(submit_clicked != true){       
	      e = e || window.event;  // IE Fix       
	      if (e) { 
                   e.returnValue = 'Uscendo senza salvare perderai il tuo lavoro, vuoi continuare?';
              }       
	      return 'Uscendo senza salvare perderai il tuo lavoro, vuoi continuare?';   
	}
};//onbeforeunload

Come vedete in questo caso abbiamo aggiunto una variabile submit_clicked settata a false di default.

Quando l’utente clicca su un submit la settiamo a true.

NOTA BENE: In questo caso di esempio ho usato jQuery per comodità ma potete tranquillamente usare vanilla javascript con addEventListener sul click al submit.

Il resto del codice è uguale ad eccezione di questo check:

if(submit_clicked != true){  

Che controlla se la variabile è su false. Se è su false esegue l’alert, altrimenti significa che l’utente vuole inviare il form, pertanto non eseguire la funzione.

Visita la nostra guida javascript per continuare ad approfondire l’argomento!

Come sempre ti invito a condividere l’articolo se ti è stato utile!

Image credits “browser” disponibile su Shutterstock.