Confirmar el envío de formulario sin bucles con jQuery

Confirmar el envío de formulario sin bucles con jQuery. En este artículo veremos la forma de mostrar un cuadro de dialogo de conformación antes de enviar un formulario. Por lo tanto, para lograr tal objetivo podemos usar el método Window.confirm(), que muestra un cuadro de diálogo modal con dos botones, (Aceptar y cancelar).

Recordemos que el comando Window.confirm() devuelve true (verdadero) si el usuario hace clic en el botón Aceptar.

Confirmar el envío de formulario: 3 formas

a) Usando lenguaje JavaScript

Básicamente, podemos declararlo en la etiqueta FORM de HTML y usando el atributo "onsubmit". Veamos el ejemplo completo.

<form onsubmit="return confirm('¿Realmente desea enviar el formulario?');">

b) Usando jQuery

Para lograr el mismo objetivo, también podemos usar jQuery, veamos un simple ejemplo.

$(form).on('submit', function() {
if(confirm('¿Realmente desea enviar el formulario?')) {
return true;
}
return false;
});

O algo más compacta con jQuery. Sin embargo, se da el mismo resultado con menos líneas de código.

$(form).on('submit', function() {
return confirm('¿Realmente desea enviar el formulario?');
});

El código anterior funciona muy bien porque el método confirm() bloquea el bucle de eventos. Sin embargo, el formulario no se envía hasta que el usuario hace clic en una de las dos opciones mencionadas.

c) Usando plugin jQuery

Si deseamos usar un plugin jQuery, para que los mensajes sean más atractivos para los usuarios a la hora de mostrar el cuadro de diálogo. A continuación, intentaremos emular el ejemplo anterior, veamos el código.

$(form).on('submit', function() {
dialog.confirm({
message: '¿Realmente quieres enviar el formulario?',
confirm: function() {
return true;
},
cancel: function() {}
});

return false;
});

Primeramente observaremos que el formulario nunca se envía, esto debido a la naturaleza asíncrona de JavaScript. Sin embargo, antes de llegar a la función confirm, el controlador de envío devuelve false, lo que impide que el formulario se envíe. Tampoco podemos hacer lo siguiente:

$(form).on('submit', function() {
dialog.confirm({
message: '¿Realmente desea enviar el formulario?',
confirm: function() {
$(form).submit();
},
cancel: function() {}
});

return false;
});

Ahora estamos atrapados en un bucle infinito, donde el formulario nunca se envía. Pero, sale a la luz la requerida solución.

La solución del problema.

La solución es bastante sencilla, solo debemos quitar el controlador de envío en el formulario tan pronto como el usuario confirme su elección.
Por ejemplo, podemos utilizar el método off(), que elimina un controlador de eventos, previamente adjunto con on():

$(form).on('submit', function() {
var $this = $(this); // referencia al alcance actual

dialog.confirm({
message: '¿Realmente desea enviar el formulario?',
confirm: function() {
$this.off('submit').submit();
},
cancel: function() {}
});

return false;
});

Ya tienen la solución, con este método, jQuery no intercepta la segunda vez, el envío del formulario.

CONCLUSIÓN

• En este post hemos aprendido a confirmar el formulario usando JavaScript y jQuery
• Además, de usar plugin para darle una interfaz profesional con jquery
• Espero que la explicación les ayude a manejar envíos de formularios.