jQuery: avoid duplicated values upon form submission with sessionStorage

Duplicated values upon form submission is a common problem. Usually this problem occurs when a user submits a form several times without noticing it (e.g. multiple clicks on the submit button). Fortunately, we can fix this problem with the aid of jQuery and sessionStorage.

All we have to do is to store the submitted value(s) in the session storage and then compare the newly inserted value with the original one:


(function( $ ) {
	$( document ).ready(function() {
        var $form = $( "#form" ),
        	$output = $( "#output" ),
        	storage = window.sessionStorage;
        	
        if( storage.getItem( "email" ) !== null ) {
        	// only for the example
        	$output.text( "Value: " + storage.getItem( "email" ) );
        }
        $form.on( "submit", function( e ) {
        	 var email = $( "#email" ).val(); // new value
             if( storage.getItem( "email" ) !== null ) { // is the email item already in the storage?
             	var storedEmail = storage.getItem( "email" ); // get the stored value
             	if( email === storedEmail ) { // if they're the same value, then
             		$output.text( "Value already submitted" );
             		e.preventDefault(); // prevent further form submissions
             	}
             } else {
             	storage.setItem( "email", email ); // store the value
             }

        });

	});

})( jQuery );

As you can see, it's only a matter of storing the form value and then comparing the newly inserted value with the value contained in the browser's session storage.

[view-example url="http://codepen.io/gabrieleromanato/pen/qCBvJ"]
Back to top