Come posso impedire gli invii multipli in un form AJAX con jQuery?

Come posso impedire gli invii multipli in un form AJAX con jQuery?

I form AJAX hanno il problema degli invii multipli. Ciò è dovuto al fatto che spesso l'utente non presta attenzione ai messaggi generati dalla UI o più semplicemente si aspetta un cambiamento nella pagina che di fatto non avviene. jQuery ci offre una semplice soluzione.

La soluzione è la seguente:


$( "#form" ).on( "submit", function( e ) {
	e.preventDefault();
	var $form = $( this ),
		$submit = $form.find( ":submit" ),
		data = $form.serialize();
		
		// Impediamo ulteriori click
		
		$submit.val( "Invio in corso..." );
		$submit.attr( "disabled", "disabled" );
		
		$.post( "ajax.php", data, function( resp ) {
			// Elaborazione della risposta
			
			// Ripristiniamo il pulsante di invio
			
			$submit.val( "Invia" );
			$submit.removeAttr( "disabled" );
		});
});

Torna su