Este artículo viene a ampliar una respueta de una FAQ de las que mantenemos en la sección de FAQs de DesarrolloWeb.com. La pregunta en concreto que nos realizó el usuario era cómo hacer un formulario que, al enviarlo, nos pregunte si realmente se desea enviar.

La pregunta en concreto era la siguiente:

Estoy haciendo un formulario y deseo que, al enviarlo, me muestre una ventana de confirmación de envío del formulario, de esas que tienen un botón de aceptar y otro de cancelar. Entonces, si se acepta el envío, se enviaría el formulario.... si no se acepta, que el formulario no se envíe.

Ahora veamos la respuesta que tiene mucho que ver con el tema de tratamiento de formularios. Es un caso bastante típico que creo que resultará de bastante utilidad.

Existen varias maneras de conseguir el objetivo relatado. Una de ellas es la que vamos a ver aquí, que basa su mayor técnica en el hecho de sustituir el botón de submit por un campo <input> con el type="button", lo que sería un campo de formulario con un botón. Con ese botón normal no se envía el formulario directamente sino que mediante Javascript nos encargaremos de invocar una función que se encargará de realizar la confirmación y, en caso positivo, se encargará también de enviar el formulario mediante Javascript.

Vamos a abordar este tema por partes y luego veremos un código completo

Un botón en el formulario

Comenzamos viendo el botón que colocaríamos en el formulario en sustitución del botón de submit. El código sería el siguiente:

<input type="button" value="Enviar" id="enviar">

Nos fijamos en que el botón tiene un campo id que nos va a servir para poder referirnos a él mediante Javascript y asignarle un comportamiento cuando se haga clic sobre él.

Definición de un evento click

El evento click que tenemos que asociar al botón se definirá con este código Javascript:

document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('enviar').addEventListener('click', function(e) {
    e.preventDefault();
    pregunta()
  });
});

El código tiene algunos asuntos relevantes:

• Primero definimos un evento DOMContentLoaded sobre el documento. Este evento sirve para ejecutar acciones cuando el navegador ya tiene cargado todo el DOM de la página, por tanto es seguro acceder a elementos como el botón. Puedes saber más sobre este punto en el artículo sobre el Evento DOMContentLoaded de Javascript.
• Luego accedemos al botón a través de su identificador, mediante el método getElementById() del objeto document. Sobre ese elemento botón asignamos un evento click mediante el método addEventListener().
• Como código del evento ejecutamos un par de llamadas, primero al método preventDefault() del objeto evento que hemos recibido en el manejador. Puedes encontrar más información sobre este método en la FAQ: Explicaciones detalladas sobre el método preventDefault() de Javascript.
• Luego, en el manejador del evento click hacemos una llamadaa una función llamada pregunta() que enseguida veremos.

Función para confirmar el envío del formulario

Ahora llegamos a la parte más relevante de este artículo, la función que realiza la acción de confirmar el envío, que se ha invocado en el momento que se hace clic sobre el botón. La función pregunta(), será la que realice la confirmación y envíe el formulario en caso positivo. Su código se puede ver a continuación.

function pregunta() {
  if (confirm('¿Estas seguro de enviar este formulario?')) {
    document.getElementById('miformulario').submit();
  }
}

La función confirm() está disponible en el Javascript del navegador. Al ejecutarse muestra el texto que se le envía por parámetro y devuelve true o false dependiendo de si el usuario ha pulsado el botón de aceptar o cancelar. Ese valor se utiliza en un enunciado if para decidir si se envía el formulario, con su método submit() del objeto formulario, o no se hace nada.

Código completo de confirmación del envío de un formulario

Para aquel que necesite un poco más de ayuda en ver todo el ejercicio de una manera más global, vamos a mostrar el código completo de una página que realiza esta tarea de confirmar si se desea enviar un formulario:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Confirmación de envío de formulario</title>
</head>
<body>

  <form id="miformulario" action="https://www.desarrolloweb.com" method="post">
    <p>
      Un campo:
      <br>
      <input type="text" name="cualquiercampo">
    </p>
    <p>
      <input type="button" value="Enviar" id="enviar">
    </p>
  </form>

  <script>
    function pregunta() {
      if (confirm('¿Estas seguro de enviar este formulario?')) {
        document.getElementById('miformulario').submit();
      }
    }

    document.addEventListener('DOMContentLoaded', function() {
      document.getElementById('enviar').addEventListener('click', function(e) {
        e.preventDefault();
        pregunta()
      });
    });
  </script>
</body>
</html>