Confirmación de envío de formulario

  • Por
  • 11 de diciembre de 2002
  • Valoración:
  • 18 Comentarios
  • Scripts en Javascript
Script en Javascript para que el usuario acepte o cancele el envío de un formulario cuando se apreta el botón de enviar.
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 type=button onclick="pregunta()" 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 language="JavaScript">
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:

<html>
<head>
    <title>Confirmación de envío de formulario</title>
<script language="JavaScript">
function pregunta(){
    if (confirm('¿Estas seguro de enviar este formulario?')){
       document.tuformulario.submit()
    }
}
</script>
</head>

<body>
<form name=tuformulario action="http://www.desarrolloweb.com">
<input type="text" name="cualquiercampo">
<input type=button onclick="pregunta()" value="Enviar">
</form>

</body>
</html>

El ejercicio se puede ver en marcha aquí.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Comentarios

Omar del Valle Rodríguez

28/1/2003
He visto la solución planteada, pero me salta la duda de si esto no es posible hacerlo en el evento onsubmit del formulario.. asi no tendriamos que cambiar la naturaleza propia del botón.

RESPUESTA

Si pongo un botón normal en lugar de uno tipo submit no es por antojo. Cuando se utiliza el método onsubmit() ya se ha mandado el formulario o, más bien, se va a mandar inmediatamente, independientemente de lo que hagamos en la función que llamemos al saltar el evento.

Así pues, si colocamos un botón de submit en lugar del botón normal y el evento onsubmit en la etiqueta del formulario, que llama a la misma función... lo que pasará es que el formulario se enviará de todos modos, aunque apretemos cancelar para supuestamente evitar el envío.

Omar del Valle Rodríguez

31/1/2003
Hola de nuevo.. si me tome el tiempo de hacer un comentario a la respuesta es porque lo he hecho y probado no por antojo. De cualquier forma estamos para aprender..

He aqui el código..

function pregunta(){
    if !(confirm('¿Estas seguro de enviar este formulario?')){
       return false; }
}

-----------------------------

En el FORM de HTML pondríamos:

<form action="nueva.php" method="post" target="_self" ONSUBMIT="return pregunta();">

ojo, si no incluimos el return se envia sea cual sea la opción seleccionada.

roman olea

17/10/2003
La segunda opcion, la comentada por Omar me parece mejor, ya que permite mantener los atributos del submit. En mi caso ponia un nombre al submit y pasaba el value que queria

En la siguiente pagina miraba el value del submit, y dependiendo de su valor realizaba una opcion u otra.

El segundo caso me ha permitido mantener este codigo sin alterar nada de la segunda pagina.

ManchaDVaca

30/10/2003
Epalex,
tambien podría ser así (menos código) jeje.

function pregunta(){
return confirm('¿Estas seguro de enviar este formulario?');
}

el form html se mantendría igual:



Exitos.

Qvixote

05/12/2005
Nos podemos evitar la función, y sólo poner en onsubmit el siguiente código:

onsubmit="return confirm('¿Esta seguro que desea enviar el formulario?');"

Carlos In

26/12/2005
Nada mas comentar que, para q nadie se mate a pensar y probar durante 30 min.

si se usa:
if !(confirm('Se dispone a BORRAR el modelo. ¿DESEA CONTINUAR?')){
return false;}
fallara, pues se debe poner un ( antes del ! y logicamente uno de cierre.

quedando:
if (!(confirm('Se dispone a BORRAR el modelo. ¿DESEA CONTINUAR?'))){
return false;}
espero q sirva.
carlos

jose alfredo

21/2/2006
yo utilise esta forma:

function pregunta()
{
var respuesta = confirm("Registrar Venta?")
if (!respuesta){
return false;
}
}


en la parte del IF del ejemplo en esta misma pagina esta asi:

if !(respuesta)

es decir el ! estaba delante del if, y la declaracion de las funciones se venia abajo, es eso coorrecto o solo es capricho de mi navegador, y el ejemplo esta bien?

Maximiliano

03/3/2006
Hola, en mi humilde opinion, me quedo con la primera opcion, por la razon que se puede utilizar en cualquier boton, mientras que la segunda opcion solo se aplica para el envio de formularios.
En mi caso no lo necesitaba para validar el envio de un formulario.

Gracias, me sirvio de mucho la ayuda.
Quiero aprobechar la opotunidad para decirles que la pagina esta muy buena y ya me ha ayudado varias veces.
Saludos Maximiliano, Montevideo, Uruguay.

Pablo AB

27/4/2006
Además ya no se usa más <script language="JavaScript">
Lo correcto es poner:
<script type="text/javascript">
Ver: www.w3schools.com/tags/tag_script.asp

Pablo AB

27/4/2006
Las dos alternativas propuestas tienen sus pros y sus contras. En mi caso tenía tres imagenes que "submiteaban" el formulario. Por el valor de submit discriminaba cuál había sido apretada. Sólo una requería confirmación. Lo único que hice fue agregar a:
<input type="image" name="submit" value="eliminar" ...
el evento:
onclick="return confirm('¿Esta seguro que desea eliminar el pedido?');">
Notar que un onsubmit="return validar(this)" en el tag form, no hubiera influido en la cuestión.

Alfredo

14/8/2009
Confirm() para eliminar unos registros.
Saludos. Yo tengo una funcion en JavaScript. Cuando me hace la cofirmacion. No me envia el Submit. Aqui le paso los codes.

<script type="text/javascript">
function check4Submit(){
if(confirm('Desea eliminar los registros seleccionados?')){
document.form1.submit()
}
}

</script>
<form name="form1" method="post" action="">
<input type="button" name="vBorrar" onclick="check4Submit()" value="Eliminar"/>
</form>

Los registros que quiero elimnar los paso en un array. Porque son varios o uno.

ivan_iturbide_escalante_euan

20/1/2010
Limpia el form
Hola no se si ya se comento esto y sele dio solucion, pero use el primer codigo el java y si se preciona en el boton cancelar el formulario aun asi se envia y lo ke me gustaria que se pudiera hacer es ke si le pongo en cancelar que me dejara los campos de texto con el contenido actual y no envie el form. Gracias.

Apreton

25/1/2010
como ubicar el cursosr en el boton cancelar
Hola. cuadno se activa la venta de confirmacion el cursor se ubica en el boton aceptar, ahora quiero que se ubique el boton cancelar.

gama984

26/1/2011
corrección
bueno el código que su vio el compañero no me sirvió a qui les dejo el código que si me sirvió ok gracias por la aportación:

fuction confirm()
{
if (confirm('¿Estas seguro de enviar este formulario?'))
{

}
return false;


es pero que le sirva
}

Gustavo Antonio Correa Caja

14/6/2011
Mi blog hay un ejemplo,espero que les sirva
http://geekjavamas.blogspot.com/2011/06/correo-de-confirmacion-java.html


<b><a href="http://geekjavamas.blogspot.com/2011/06/correo-de-confirmacion-java.html">Enlace</a></b>

cecilia

14/11/2011
Por Fin!
despues de tanto buscar... era lo que necesitaba! GRACIAS:)

Javier

04/11/2013
util
Muchas gracias!, me ha sido muy útil.

jaime

20/11/2013
centrar el msj de Confirmacion
se puede hacer que el mensaje aparesca en el centro de la ventana ???

Compartir