Undo di un form

[Marcolino's]

Buongiorno mondo

Una semplice domanda, come posso gestire l'UNDO in un form dopo l'annullamento dello stesso?
Avevo pensato ad un salvataggio dei campi in un localStorage e poi col tasto UNDO riprendere i dati e ripresentarli.

<form id="form-invio">
<input type="text" id="nome" name="nome" value="Mario">
<button type="submit" name="salva">SALVA</button>
<button type="button" id="annulla">Annulla</button>
<button type="button" id="undo" disabled>UNDO</button>
</form>

const formInvio = document.getElementById('form-invio');
const btnAnnulla = document.getElementById('annulla');
const btnUndo = document.getElementById('undo');
const txtNome= document.getElementById('nome');

btnAnnulla.addEventListener('click', () => {
  localStorage.setItem('nome', txtNome.value);
  formInvio.reset();
  btnUndo.removeAttribute('disabled');
});

btnUndo.addEventListener('click', () => {
  txtNomeValue = localStorage('nome');
  localStorage.clear();
  btnUndo.setAttribute('disabled', true);
});

Pensavo ad una cosa del genere, ovviamente qui l'esempio è semplicistico, in un form complesso con decine di campi (è il mio caso) il codice deve essere ripensato in modo da evitare risondanze di elementi.

Già la semplice serie di costanti nell'esempio è ridondante e nella realtà avrei utilizzato querySelector() per dire.

[KillerWorm]

Ciao, prima di affrontare il discorso sullo sviluppo del codice, ti consiglio di valutare meglio se l'integrazione di una funzionalità del genere possa effettivamente essere utile e soprattutto se non vada più che altro a creare confusione all'utilizzatore finale.

Nel tuo esempio vedo già dei conflitti con le terminologie usate. Volendo tradurre "UNDO" in italiano, sarebbe esattamente "ANNULLA", però hai già un pulsante "Annulla" che praticamente è il "Reset" e che forse potrebbe tradursi meglio come "Reimposta" o "Resetta".

In qualunque caso, per l'utente medio che arriva sul tuo form, potrebbe non essere così esplicita la differenza tra i due pulsanti.

A mio parere servirebbe chiarire meglio alcuni aspetti prima di proseguire con la fase di programmazione.

• Puoi chiarire meglio il contesto di utilizzo del tuo form?
• Lo userai solo tu personalmente o è rivolto ad altri utilizzatori?
• Target/tipologia di utilizzatori?
• Perché pensi sia utile integrare una funzionalità "Annulla" (undo) nel tuo specifico form?
• Hai già valutato/testato questo tipo di funzionalità in form analoghi al tuo?
• Hai degli esempi di altri form in cui questa funzionalità è presente?
• Chi andrà ad usare il form (sempre che non sia tu il solo), sarà in grado di comprendere come/perché/quando usare tale funzionalità (undo) e quali sono gli effetti che produrrà sul form stesso?

Ti invito a valutare meglio questi punti in modo da capire se e come potrebbe essere meglio gestita tale funzionalità.

[Marcolino's]

Già fatto grazie.

Undo non è propriamente Annulla, ma in inglese disfare, distruggere, ma come immagino già saprai è la forma per noi programmatori per dire "torna indietro".

Perché la voglio implementare? Perché prima non lo facevo, mettevo un avvisto del tipo "vuoi davvero proseguire cancellando tutto il tuo lavoro?" e stavo tranquillo.

Se l'utente premeva Ok cancellava e chi se ne frega, poi ho letto l'articolo di Raskin su A List a Part sul concetto di abitudine del tasto OK ed ho pensato che aveva ragione a voler inserire un tasto "torna indietro" (se vuoi questa è la dizione migliore italiana di Annulla).

Perché anche io che l'ho implementato odiavo quella dialog box che mi chiedeva se volevo annullare ciò che c'era nel form, perché mi da fastidio se vedo una pagina di internet che alla chiusura del browser mi chiede se voglio chiudere davvero, come questo forum ad esempio.

Ha ragione Raskin, meglio annullare tutto, e se ho sbagliato, c'è il "torna indietro", mi costa nulla implementarlo e può diventare una best practice.

I form che progetto hanno anche una ventina tra campi e bottoni, servono alla registrazione di documenti, richiedono spesso una descrizione del documento da inserire, a volte si vuole ricominciare da capo, magari anche selettivamente, per esempio in una lista di campi su una tabella (creazione di un indice ad esempio) o la modifica dei dati in un database (vedi MyAdminSQL per capire).

Alla fine, il tasto "undo" dopo il reset del form per errore, mi sembra il male minore, anzi, una comodità irrinunciabile.

[KillerWorm]

Undo non è propriamente Annulla

Certo, ma convenzionalmente le funzioni "undo" e "redo" in italiano si traducono come "annulla" e "ripristina". Per questo, se devi integrare qualcosa del genere in un form in cui è già presente una funzione "annulla" (che è invece il reset), creerebbe molto probabilmente confusione, quindi un disagio uguale, se non maggiore, rispetto al dialogbox che ti avvisa preventivamente.

poi ho letto l'articolo di Raskin su A List a Part

Ottimo articolo, lo condivido pienamente; infatti lo avevo inserito anche nei link utili CSS, e sta proprio nella sezione UI/UX.

mi da fastidio se vedo una pagina di internet che alla chiusura del browser mi chiede se voglio chiudere davvero, come questo forum ad esempio

Chiaro, considera comunque che in questa piattaforma è disponibile anche la funzionalità auto-save. In sostanza, durante la digitazione del messaggio nell'editor, avviene un salvataggio automatico ogni tot, per prevenire appunto la perdita accidentale del messaggio se si esce dalla pagina e questo non è stato ancora inviato.
A quel punto, quando si rientra nella pagina e l'editor è vuoto, per "ripristinare" il contenuto inserito precedentemente, è possibile cliccare il pulsantino "Restore Auto-Saved Content" che viene mostrato in basso a sinistra nella cornice dell'editor.

Alla fine, il tasto "undo" dopo il reset del form per errore, mi sembra il male minore, anzi, una comodità irrinunciabile.

Può sicuramente essere una funzionalità essenziale, ma a mio parere è necessario valutare bene in anticipo tutti gli aspetti perché risulti veramente funzionale, a partire dalla terminologia da usare; in caso contrario potrebbe appunto creare più confusione che altro.

Il primo passo, secondo me, è quello di identificare nel modo più appropriato possibile queste funzioni.

Pensandoci bene, il tuo tasto "Annulla" (cioè il reset) è di fatto una funzione "undo", perché appunto "annulla" le modifiche inserite e quindi "torna indietro" per reimpostare lo stato iniziale del form.

Invece la funzionalità che vuoi aggiungere, non è un "undo" ma bensì un "redo", cioè un "ripristina" le precedenti modifiche che avevo annullato.

Per cui i due pulsanti possono chiamarsi "Annulla" (reset) e "Ripristina" (redo). Partirei da questo punto.
Magari può aiutare avare anche una breve descrizione, ad esempio nell'attributo title: "Annulla" ("Azzera tutti i campi"), "Ripristina" ("Ripristina i valori inseriti precedentemente")

La funzione "Annulla" suppongo sia sempre attiva. Vedo però che per il "Ripristina" intendi disabilitare il pulsante fintanto che non venga effettuato un annullamento; è corretto?

La funzione "Ripristina" deve poter ripristinare i campi al solo stato precedente l'annullamento, oppure devi prevedere una cronologia in cui annullare/ripristinare le varie modifiche?

La funzione "Ripristina" è applicata ad un unico form o è previsto che debba funzionare in modo contestuale per molteplici istanze di form?
In caso di molteplici form bisogna prevedere una gestione adeguata dei dati memorizzati relativamente ad ogni form.

Il localStorage può andare bene se la gestione dei dati memorizzati è ristretta al browser utilizzato. Cioè se faccio "annulla" e in un secondo momento rientro nel form da un'altra postazione o usando un altro browser, è chiaro che non avrò comunque possibilità di ripristinare i dati annullati precedentemente. In quel caso la gestione andrebbe fatta usando magari un db di appoggio.

Per una gestione semplice potresti certamente usare localStorage e salvare i dati in formato JSON.

Se ti serve gestire dati relativi a più form, sullo stesso sito, puoi avere differenti oggetti localStorage oppure strutturare il JSON in modo da avere una opportuna convenzione che metta in relazione il corrente form con i propri dati.

Cerca magari di approfondire questi dettagli per capire come si può procedere.