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"]