Pagine

venerdì 5 novembre 2010

Il form è stato modificato, sei sicuro di voler uscire ?

Quante volte abbiamo visto questo simpatico messaggio javascript che ci avverte che, lasciando la pagina, perderemo tutto il lavoro fatto. Se non abbiamo un sistema di "salvataggio bozze" come blogger un alert di questo tipo è estremamente utile per i nostri utenti.

Ho trovato un post interessante che spiega come fare.

Naturalmente Murphy vuole che lo script che trovi non vale mai nel caso particolare. Ho subito avuto due problemi:

  • Lo script non funziona con le textarea tinyMCE
  • Lo script chiede la conferma anche nel caso l'utente prema il pulsante "Salva" del form (a meno che il salvataggio non sia gestito via ajax).

Lavorandoci un po' ho trovato la soluzione, questo lo script che ho usato

var formModificato = false;
var submitting     = false;

window.onbeforeunload = function() {
   if (formModificato && !submitting){
      return 'ATTENZIONE!'+'\n'+
             'Sono state apportate delle modifiche ad un modulo ma non sono state salvate!';
   }
}

jQuery(function(){
   formmodificato=false;
   
// Cambio lo stato della variabile se si accede ad un elemento del form

   $('form input, form textarea, form select, form checkbox, form radio').focus(function(){

      formModificato = true;

   }); 
      
   // Cambio lo stato della variabile se l'utente sta inviando il form
   
   $('form').submit(function(){

      submitting = true;

   });   
});

per gestire le textarea tinymce invece basta aggiungere nella definizione dell'editor

setup : function(ed) {
ed.onClick.add(function() {
formModificato=true;
})

per ottenere l'effetto voluto! non è un post relativo a Symonfy ma spero che vi sia ugualmente utile.

6 commenti:

  1. Ecco esattamente quello che stavo cercando da un'oretta abbondante!!

    Sfortunatamente... non funziona! Ho firefox 3.6. Ho provato inserendo il codice nell'head e fuori dall'head ma semplicemente non va... :(

    Inserito il testo, modifico una textarea, esco dalla pagina e nulla appare...

    Specifico che un semplice

    < script >
    function closeIt()
    {
    return "Sicuro?"
    }
    window.onbeforeunload = closeIt;


    funziona...

    Non cerco altrove perchè è esattamente quello che cercavo.. qualche idea?

    RispondiElimina
  2. dando per scontato che stai usando JQuery :) ... dato che lavori su firefox, ti da qualche messaggio di errore Javascript ? li trovi su "strumenti/console degli errori"

    RispondiElimina
  3. non capisco perchè però mi viene sempre fuori una sorta di messaggio generico e non quello che inserisco io.

    grazie

    RispondiElimina
  4. che messaggio generico? su che browser? se fornisci qualche informazione in più magari posso aiutare :)

    RispondiElimina
  5. Intendo nei bottoni che ti dicono se rimanere nella pagina oppure abbandonarla..il browser è fireFox.
    Grazie

    RispondiElimina
  6. i bottoni non possono essere modificati come impostazione predefinita del browser. Altrimenti sarebbe facilissimo far cliccare gli utenti su pulsanti che non vogliono premere.

    RispondiElimina