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