jQuery: impedire l'invio di valori duplicati nei form

Possiamo usare il session storage con jQuery per evitare l'invio di valori duplicati nei form.

Dato il seguente form:

<form action="#" method="post" id="form">
	<div>
		<input type="text" name="email" id="email" placeholder="Email" />
	</div>
	<p><input type="submit" name="submit" id="submit" value="Submit" /></p>
	<div id="output"></div>
</form>

La soluzione è la seguente:

(function( $ ) {
	$( document ).ready(function() {
        var $form = $( "#form" ),
        	$output = $( "#output" ),
        	storage = window.sessionStorage;
        if( storage.getItem( "email" ) !== null ) {
        	$output.text( "Value: " + storage.getItem( "email" ) );
        }
        $form.on( "submit", function( e ) {
        	 var email = $( "#email" ).val();
             if( storage.getItem( "email" ) !== null ) {
             	var storedEmail = storage.getItem( "email" );
             	if( email === storedEmail ) {
             		$output.text( "Value already submitted" );
             		e.preventDefault();
             	}
             } else {
             	storage.setItem( "email", email );
             }

        });

	});

})( jQuery );