L'invio di un form può generare valori duplicati specie quando l'utente clicca due volte in rapida successione sul pulsante di invio o
quando la richiesta è già in elaborazione. Possiamo prevenire questa situazione utilizzando jQuery ed il sessionStorage.
In pratica si tratta di memorizzare nel web storage i primi valori inviati dal form e quindi confrontarli con gli eventuali valori inviati in seguito. Se i valori coincidono, impediamo l'invio del form.
(function( $ ) {
$( document ).ready(function() {
var $form = $( "#form" ),
$output = $( "#output" ),
storage = window.sessionStorage;
if( storage.getItem( "email" ) !== null ) {
// Solo per l'esempio
$output.text( "Value: " + storage.getItem( "email" ) );
}
$form.on( "submit", function( e ) {
var email = $( "#email" ).val(); // Nuovo valore
if( storage.getItem( "email" ) !== null ) { // Il valore è già presente?
var storedEmail = storage.getItem( "email" ); // Il valore memorizzato nello storage
if( email === storedEmail ) { // Se coincidono, impediamo l'invio del form
$output.text( "Value already submitted" );
e.preventDefault(); // Impedisce l'invio del form
}
} else {
storage.setItem( "email", email ); // Memorizza il valore nello storage
}
});
});
})( jQuery );