Cómo impedir el doble submit utilizando jQuery

En este tutorial, veremos como prevenir el submit duplicado utilizando jQuery. Al enviar el formulario mediante una función de AJAX, la pagina no refresca. Por ello, la interfaz de usuario no muestra ningún progreso acerca de la ejecución del proceso del lado del servidor. Esto puede dar lugar a doble submits por parte del usuario. Para superar este problema, podemos utilizar jQuery.

Vamos a ver cómo abordar esto con un ejemplo. En este ejemplo, contaremos con un formulario HTML que se enviará vía AJAX. Mientras que se lleve a cabo el proceso en el lado del servidor, ocultaremos el botón de submit para prevenir que el usuario le dé muchas veces.

Función jQuery para prevenir múltiples submits

Este es el formulario HTML que enviaremos vía jQuery AJAX.

<form id="frm" method="post">
   <div class="input-group">Title <span class="title-validation validation-error"></span></div>
   <div>
        <input type="text" name="title" id="title" class="input-control" />
   </div>
    
   <div class="input-group">Description </div>
   <div>
		<textarea rows="5" name="description" id="description" class="input-control"></textarea>
   </div>

   <div id="submit-control">
        <input type="button" name="btn-submit" id="btn-submit" value="submit" onClick="ajaxSubmit();"/>
    </div>
</form>

Al hacer clic en el botón submit, el script jQuery enviará los datos del formulario a una página PHP mediante AJAX. Mientras que se está haciendo todo el proceso en el lado del servidor, ocultaremos el botón y lo reemplazaremos por una barra de progreso.

function ajaxSubmit() {	
	var valid = true;
	valid = checkEmpty($("#title"));
	if(valid) {
		var title = $("#title").val();
		var description = $("#description").val();
		$.ajax({
			url: "process-ajax.php",
			data:'title='+title+'&description='+description,
			type: "POST",
			beforeSend: function(){
				$('#submit-control').html("<img src='LoaderIcon.gif' /> Ajax Request is Processing!");
			},
			success: function(data){
				setInterval(function(){ $('#submit-control').html("Form submited Successfully!") },1000);
			}
		});
	}
}