#Javascript para que el usuario acepte o cancele el envío de un formulario al enviar by @deswebcom

Fuente: desarrolloweb.com

Este artículo viene a ampliar 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.

Respuesta

Esto tiene mucho que ver con el tema de tratamiento de formularios. La respuesta basa su mayor técnica en el hecho de sustituir el botón de submit por un botón normal. Con el botón normal no se envía el formulario directamente sino que se llama a una función que realiza la confirmación y, en caso positivo, envía el formulario.

El botón que colocaríamos en el formulario en sustitución del botón de submit sería el siguiente:

<input onclick="pregunta()" type="button" value="Enviar" />

Nos fijamos en que el botón tiene definida una acción en el momento que se hace clic. La acción en concreto hace que se ejecute la función pregunta(), que será la que realice la confirmación y envíe el formulario en caso positivo. Su código se puede ver a continuación.

<script type="text/javascript" language="JavaScript">// <![CDATA[

function pregunta(){ 
    if (confirm('¿Estas seguro de enviar este formulario?')){ 
       document.tuformulario.submit() 
    } 
} 
// ]]></script>

La caja confirm devuelve true o false dependiendo de si se pulsa 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(), o no se hace nada.

El código completo de una página que realiza esta tarea en un formulario es el siguiente:


Confirmación de envío de formulario
<script type="text/javascript" language="JavaScript">// <![CDATA[

function pregunta(){ 
    if (confirm('¿Estas seguro de enviar este formulario?')){ 
       document.tuformulario.submit() 
    } 
} 
// ]]></script></pre>
<form action="http://www.desarrolloweb.com" name="tuformulario"><input type="text" name="cualquiercampo" />
<input onclick="pregunta()" type="button" value="Enviar" /></form>
<pre>

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s