Este artículo nace como respuesta a la siguiente cuestión planteada en el foro de miarroba en el colaboro siempre que puedo.
Tengo una página de formularios en mi web y desearía que al pulsar el botón de "enviar" me saliera una confirmación del mismo en tamaño pequeño (popup ?). Esta confirmación llevaría un botón de "cerrar" y al pulsarlo se cerraría junto con la página de formularios. ¿Es posible?
Sí es posible. En el script que te presento se crea un pop-up que muestra los datos introducidos por el usuario y contiene dos botones "conforme" y "no conforme". Si pulsa el primero los datos son enviados a la página que recoge los datos y si pulsa el segundo 1º.-se borrarán los datos del formulario; 2º.- se cerrará el pop-up; 3º.- se intentará cerrar la ventana del formulario.
Y digo intentar porque el código tiene comportamientos diferentes según que navegador se use: Mozilla y Firefox no hacen absolutamente nada. Internet Explorer te mostrará el siguiente
mensaje: "La página Web que está viendo está intentando cerrar la ventana. Desea cerrarla. (Si-No)". Y Opera es el único que sí la cierra automáticamente.
Además, está haciendo algo que el usuario puede que no quiera hacer: Cerrar una ventana que tenía abierta. Y además de una forma sorpresiva para él.
En consecuencia, es desaconsejable intentar cerrar la ventana del formulario.
Si decide no cerrarla deberá modificar la línea
writeln("onclick=\"window.opener.document.formulario.reset(); window.close(); window.opener.close(); \" />");
para que ponga
writeln("onclick=\"window.opener.document.formulario.reset(); window.close();\" />");
La parte más importante del script, que usted tiene que modificar para adaptarlo a su formulario, es la que crea los campos ocultos, input type="hidden", del pop-up para que recojan correctamente los datos correspondientes de su formulario.
El código del script que crea el pop-up que contiene los datos introducidos en el formulario y pide confirmación para enviarlos definitivamente. Se debe colocar en el HEAD de la página que contiene el formulario.
<script type="text/javascript">
function confirmarDatos(){
var pagina = "pagina_que recoge_los_datos.php";
var nombre = document.formulario.nombre.value;
var apellidos = document.formulario.apellidos.value;
var confirmacion = window.open('','Confirmacion','width=400,height=350,top=50,left=50');
with (confirmacion.document){
open();
writeln("<html><head><title>Confirme sus datos</title></head><body>");
writeln("<center><h4>Compruebe los datos del formulario:<\/h4><br>");
writeln("<b>Nombre</b>: " + nombre + " <br><b>Apellidos</b>: " + apellidos);
writeln("<form action=\""+pagina+"\" method=\"POST\">");
writeln("<input type=\"hidden\" name=\"nombre\" value=\""+nombre+"\" />");
writeln("<input type=\"hidden\" name=\"apellidos\" value=\""+apellidos+"\" /><br><br>");
writeln("<input type=\"submit\" name=\"enviar\" value=\"conforme\" />");
writeln("<input type=\"button\" value=\"no conforme\" ");
writeln("onclick=\"window.opener.document.formulario.reset();window.close()\" />");
writeln("<\/form>");
writeln("<\/body><\/html>");
close();
}
}
</script>
Este es el código del formulario del ejemplo. Se puede colocar en BODY
<form name="formulario">
<b>Nombre</b>
:
<input type="text" name="nombre" size="20" maxlength="20" />
<br />
<b>Apellidos</b>
:
<input type="text" name="apellidos" size="20" maxlength="20" />
<br />
<input type="button" name="enviar" value="enviar" onclick="confirmarDatos()" />
</form>
