[SOLUCIONADO] Enviar formulario en ventana emergente

Gropo · #1 (**permalink**) 22/01/2011, 20:46

Hola,

Estoy creando un formulario con unos datos de los clientes-- nombre, apellidos, comentarios y me gustaria que en el momento que se pulse el boton Enviar, aparezaca una ventana no muy grande en medio de la pantalla que diga por ejemplo "Sus datos han sido enviados".
El tema es que lo intente con lightwindow pero no se me envian los datos.
Tambien me valdria si antes de pulsar el boton Enviar podria conocer los valores de los campos.

Gracias de antemano.

ecarlevaro · #2 (**permalink**) 22/01/2011, 21:05

Bueno, eso lo haces con JavaScript, una opción es esta:

Código HTML:

Ver original<html>
<body>
<input type="submit" value="Enviar Formulario Lindo!" onclick="abrir();" />
 
<script type="text/javascript">
function abrir()
{
 var w=window.open("","","height=200,width=400,menubar=no,toolbar=no");
 w.document.open();
 w.document.write("<h1>Sus datos han sido enviados de maravialla!</h1>");
 w.document.close();
}
</script>
</body>
</html>

Otra opción es igual, pero en vez de usar document.write para escribir lo que quieres que aparezca en la ventana, es elimiar esas lineas y solo dejar window.open

Código Javascript:

Ver originalfunction abrir()
{
 =window.open("http://misitio.com/mensaje.html","","height=200,width=400,menubar=no,toolbar=no");
}

Y que la función abra el archivo mensaje.html.

Todas las opciones del método window.open de JavaScript están acá:
http://www.w3schools.com/jsref/met_win_open.asp

Gropo · #3 (**permalink**) 23/01/2011, 09:40

Gracias ecarlevaro,
me ha sido de gran ayuda tu respuesta. Solo una cosa más: como podria conocer los valores de los campos que rellena el cliente antes de pulsar el botón ENVIAR?

Gracias de nuevo y saludos.

ecarlevaro · #4 (**permalink**) 23/01/2011, 11:18

Usas el objeto document de Javascript y el método getElementById() que le pasas el id del elemento que quieres conocer el valor.
Previamente al elemento que quieres conocer el valor le asignas un id.

Supongamos que quieres comprobar que la contraseña tenga @, entonces usas el metodo indexOf() que aplicado a una cadena devuelve la posición en la que se encuentra un carácter o -1 si no se encuentra el carácter. Entonces, modificamos el formulario para que el campo de contraseña tenga un id, y el botón submit lo reemplazamos por un botón cualquiera para que cuando el cliente lo pulse, en vez de enviar el formulario llame a la función comprobar() que luego de comprobar si todo está bien envía el formulario que le pusimo de id, formulario.

Código HTML:

Ver original<html>
<body>
<form name="formulario" id="formulario" method="GET">
<input type="text" name="correo" id="direccioncorreo" />
<button type="button" onclick="comprobar();">Enviar Formulario Lindo!</button>
</form>
<script type="text/javascript">
function abrir()
{
 var w=window.open("","","height=200,width=400,menubar=no,toolbar=no");
 w.document.open();
 w.document.write("<h1>Sus datos han sido enviados de maravialla!</h1>");
 w.document.close();
}
function comprobar()
{
 var direccion = document.getElementById("direccioncorreo").value;
 if (direccion.indexOf("@",0) == -1)
 {
   alert("No coloco una direccion de correo valida");
 }
 else 
 {
  document.getElementById("formulario").submit();
  abrir();
 }
}
</script>
</body>
</html>

Gropo · #5 (**permalink**) 23/01/2011, 12:35

Muchisimas Gracias ecarlevaro,
una cosa, podria utilizar la variable que hemos recogido con javascript y utilizarla por ejemplo

Cita:

<a href="envio_datos.php?direccion_correo="+direccion +""

para enviarla a otra pagina php? y si es posible como recogeria la variable luego?
por ejemplo

Cita:

<?php $direccioncorreo=($_GET['direccion_correo']; ?>

Gracias de nuevo y saludos.

ecarlevaro · #6 (**permalink**) 23/01/2011, 13:27

Lo que dices es correcto, sólo que no puedes simplemente imprimir una variable de JavaScript en el HTML, debes usar el DOM (Document Object Model) que es un modelo de acceso a los elementos HTML desde Javascript (que por cierto, lo venimos usando desde el principio).

Para cambiar el href de un vínculo usas el objeto document con el método getElementById y el href

Código Javascript:

Ver originalvar direccion = document.getElementById("correo").value;
document.getElementById("vinculo").href = "envio_datos.php?direccion_correo="+direccion;

Donde vinculo es el id del elemento <href>.

Y el resto del razonamiento es correcto, en envio_datos.php la variable direccion_correo la capturas con $_GET["direccion_correo"].

Si necesitas enviar variables como id de algo que el cliente no debe ver, recuerda usar los <input type="hidden"> que también puedes modificar su valor con document.getElementById("id").value ="El valor del hidden";.

Otra cosa, nunca uses JavaScript para comprobaciones importantes de los formularios ya que el cliente puede simplemente o no tener habilitado JavaScript, o un "cliente" mal intencionado puede desactivarlo y vulnerar tu sistema, usa JavaScript para avisarle digamos, rapido, al usuario de algún error, pero siempre resérvate la comprobación final desde PHP.

Gropo · #7 (**permalink**) 23/01/2011, 15:03

Muchas gracias de nuevo,
Creo que me estoy liando más. En principio lo necesitaba era lo siguiente:
En un formulario se introducen unos datos (correo, nombre, etc.), luego se pulsa un link (no tiene que ser un boton submit) de tipo

Cita:

<a href=envio_datos.php?direccion_correo=correo&nombr e_cliente=nombre...

que me llevaria a una pagina php donde compruebo los datos y envio un correo electronico de confirmacion.

Gracias de nuevo y saludos.

ecarlevaro · #8 (**permalink**) 23/01/2011, 19:16

Pero ¿por qué lo haces así?.

Tú haces el formulario con HTML en la etiqueta <form> colocar action="pagina.php" y en vez del link colocas un simple boton <input type="submit"...> cuando el cliente hace click en submit los datos son pasados a PHP.

Un tutorial del Manual de PHP sobre formularios:
http://www.php.net/manual/es/tutorial.forms.php

Gropo · #9 (**permalink**) 24/01/2011, 07:16

Vale, tienes razon, pero como podia hacer que pagina "pagina.php" (donde se confirman los datos) se abriese en una ventana emergente(flotante)?

Muchas gracias, y perdona que te este mareando tanto.

GatorV · #10 (**permalink**) 24/01/2011, 15:57

Tema movido desde PHP a Javascript

ecarlevaro · #11 (**permalink**) 24/01/2011, 16:51

Recuerda que, a menos que uses el modelo de programacion AJAX, no puedes pasar datos de PHP a JavaScript.

Lo que tienes que hacer es que en pagina.php proceses todos los datos y al final cuando "escupes" el HTML al navegador del usuario, le añades el codigo JavaScript que te coloqué arriba, con la diferencia que en vez de que se active cuando el usario hace click en un boton (evento onclick) lo colocas en la carga del HTML (evento onload del elemento <body>)

Código HTML:

Ver original<body onload="abrir();">

y sobre el final del <body> recuerda imprimir el codigo de la funcion JavaScript abrir(), siempre dentro de las etiquetas <script> tal como esta en el mensaje mas arriba.

Entonces ahora cuando la pagina se cargue, el evento onload se activa y llama a la funcion abrir() que como su codigo indica abre una nueva ventana con el mensaje de que sus datos se enviaron. Si hay algun error en el procesamiento de datos puedes cambiar este mensaje por otro, simplemente desde PHP cambiando la salida del HTML. En vez de

Código PHP:

  echo " 
.... 
.... 
.... 
w.document.write('<h1>Sus datos han sido enviados de maravialla!</h1>'); 
....";

colocas

Código PHP:

Ver originalecho "
....
....
....
w.document.write('<h1>Sus datos no estan muy bien que digamos!</h1>');
....";

ecarlevaro · #12 (**permalink**) 24/01/2011, 16:53

Recuerda estar atento a las comillas, si vas a usar comillas dobles en el HTML en el echo debes usar \"

Código PHP:

Ver originalecho \"algo con "comillas" dobles\";

o cambias las dobles por simples

Código PHP:

Ver originalecho "algo con 'comillas simples'";