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 sin bucles con jQuery
Confirmar el envío de formulario sin bucles con jQuery

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.
Me fascina la programación en diversos lenguajes y mas aún si son sistemas web o páginas web.

Entradas relacionadas

Cómo usar Explode en JavaScript Split()

Cómo usar Explode en JavaScript Split()

Cómo usar Explode en JavaScript Split(). Explode es capaz de dividir una cadena de texto o un array y se basa bajo un criterio en común dentro…

Enviar de SELECT a INPUT

Enviar de SELECT a INPUT: Ejemplo completo

Enviar de SELECT a INPUT. En este artículo veremos cómo pasar información de un SELECT a INPUT a través de un atributo personalizado haciendo uso de la…

Refrescar página usando JavaScript

Refrescar página usando JavaScript: 6 ejemplos completos

Refrescar página usando JavaScript. El método location reload() en HTML DOM se utiliza para volver a cargar el documento actual. Este método, actualiza los documentos actuales. Es…

Generar 3 números aleatorios y que no se repitan JavaScript

Generar 3 números aleatorios y que no se repitan: JavaScript

,Generar 3 números aleatorios y que no se repitan. En este artículo veremos la forma de generar números aleatorios usando «Math.random()» de JavaScript. Esa función devuelve un…

Detectar Checkbox Marcados JavaScript

Detectar Checkbox Marcados JavaScript y jQuery

Detectar Checkbox Marcados JavaScript. Este es un tutorial realizaremos un script sobre cómo detectar cada vez que una casilla de verificación ha sido marcada o desmarcada por…

Validar Checkbox PHP, JavaScript y jQuery

Validar Checkbox PHP, JavaScript y jQuery: Ejemplos

Validar Checkbox PHP, JavaScript y jQuery. Cuando estemos programando un sistema y/o página web siempre nos encontraremos con formularios y por ende con validaciones en algún campo….

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *