Previsualizacion formulario

[shakaran]

Hola, tengo un formulario con unos datos de cliente. Nombre, apellidos, descripcion, etc.

En el formulario he puesto dos botones. Uno de enviar (guarda los datos en la base de datos) y otro de "Vista previa".

Lo que hago con el vista previa es llamar a un popup y quiero mostrar en el todos los datos que hay ingresado en el formulario, pero con un aspecto formateado (para que nos entendamos mas bonito, con colorines y demas) para que se pueda previsualizar los datos de cliente antes de enviarlos.

El problema lo tengo en pasar los datos hacia el popup. Porque si los paso llamando a un formulario se me envia. y si abro el popup y intento pasar los parametros por php, pues aun no los interpreta porque estan en el cliente y no han llegado al servidor.''''''''

El codigo es el siguiente:

procesado.php (formulario original que procesa los datos)

Código HTML:

<form method="post" action="procesado.php"> 
<input type="text" id="nombre" name="nombre">
<input type="text" id="apellidos" name="apellidos">
<script>
	var nombre=document.getElementById('nombre').value	
	var apellidos=document.getElementById('apellidos').value
</script>
<form>
	<input type="button" name="vista" value="Vista previa" onClick"javascript:window.open('archivo.php?nombre='+nombre+'&apellidos='+apellidos,'width=450,height=275)">
</form>

 <input type="submit" name="env" value="Enviar">
</form> 

Como veis, lo que hago es "capturar" con javascript lo que se ha escrito en los inputs y enviarlo en el popup con el boton de vista previa. OJO! no quiero enviar el formulario, si no solo que se previsualice, porque si al usuario no le gusta puede cerrar el popup y seguir editando. El que envia el formulario y lo procesa es el input de enviar

luego tengo el:

archivo.php (es el archivo que me da conflicto y que no me coge bien los parametros por url).

Código PHP:

  echo $_GET["nombre"]; 
echo $_GET["apellidos"]; 
echo $_POST["nombre"]; 
echo $_POST["apellidos"];  
   

Lo he puesto tanto para GET como para POST, pero la salida que me da es:

[object HTMLInputElement]
[object HTMLInputElement]
[object HTMLInputElement]
[object HTMLInputElement]

He buscado info sobre ello y solo veo que se refiere a que es un elemento input, es decir, esta haciendome echo de un input pero no de su value que era lo que habia "intentado" hacer mediante javascript.

Podrian orientarme en como hacer este sistema de vista previa o previsualizacion?. Gracias.

[tunait]

Hola shakaran
Te falta un argumento en el método open() (el segundo). Es decir, lo que pones como segundo atributo debería ser el tercero. Además está sin cerrar la segunda comilla de este argumento.

prueba a ver si así lo envía bien

Código:

window.open('archivo.php?nombre=' + nombre + '&apellidos=' + apellidos, '','width=450,height=275')"

Un saludo

[shakaran]

Perdona, escribi deprisa el codigo porque era el ejemplo de lo que quiero hacer (en realidad esta en otra aplicacion mayor, pero para simplificar escribi este). LLevas razon, le faltan las comillas y demas, pero no es la raiz del problema. Los argumentos que se envian son INCORRECTOS porque luego la salida sigue siendo la misma de "[object HTMLInputElement]".

Lo que pasa es que no se me envia bien la información y no se porque es.

He puesto el ejemplo aqui:

http://www.apogeusone.com/web/procesado.php

Asi podeis ver lo que me sale a mi.

Espero vuestra ayuda. Un saludo.

[tunait]

En el momento en el que asignas a las variables nombre y apellidos los valores están los campos vacíos. Para que tomen los valores en el momento de llamar a la previsualización deberías volver a realizar la asignación antes de enviar los valores.

Prueba a meterlo todo dentro de una función

Código:

function previsualizar(){
   var nombre=document.getElementById('nombre').value	
   var apellidos=document.getElementById('apellidos').value
   window.open('archivo.php?nombre=' + nombre + '&apellidos=' + apellidos, '','width=450,height=275')
}

y al botón le pones un ...

Código:

<input type="button" name="vista" value="Vista previa" 
	onclick="previsualizar()">

Prueba y me cuentas

un saludo

[caricatos]

Hola:

Un pequeño apunte sobre el tema:

Para evitar problemas con los posibles "caracteres especiales" que se puedan introducir como acentos, espacios, eñes... es mejor "escapar" los valores (los formularios lo hacen automáticamente)...

"...?nombre=" + escape(nombre) + "&apellidos=" + escape(apellidos)...

Saludos

[shakaran]

Gracias! Me habeis solucionado el problema perfectamente!!

No habia contemplado la posibilidad de que cuando inicializaba las variables, estas recogian un valor vacio y debian ser llamadas e inicializadas en el momento del evento onClick.

caricatos, tambien he aplicado el consejo que me diste. Gracias.

Ahora tengo un mal menor. Es el de que la URI (la url) que se envia es demasiado larga (si por ejemplo en la descripcion meten 3000 caracteres) y ademas serian unos pocos mas (pongamos 200 mas) porque las tildes, eñes y demas caracteres se escaparian.

Lo unico que se me ha ocurrido es comprobar la longitud y si es mayor a 1800 (que es cuando aproximadamente excede de la longitud permitida en mi servidor) pues denegar el envio y poner un alert..

Habria alguna manera de encapsularlo o reducirlo para que entraran...unos 10 mil caracteres (necesito que sean muy grandes, para que se puedan poner grandes descripciones).

Un saludo.

[tunait]

mmmnop, casi que si van a enviarse tantos caracteres mejor que uses un método post.

Podrías hacer algo así

Código:

function previsualizar(){
   ventanaPrevisualizar = window.open('', 'ventanaPrevisualizar','width=450,height=275, location=yes')
   document.nombreDeTuForm.target = 'ventanaPrevisualizar'
   document.nombreDeTuForm.action = 'previsualizar.php'
   document.nombreDeTuForm.submit()
   document.nombreDeTuForm.target = '_self'
   document.nombreDeTuForm.action = 'enviar.php'
}

Lo que hace la función es lanzar la ventana popup y redirigir el submit del formulario hacia ella y después enviarlo. Después vuelve a dejarlo como estaba, es decir, vuelve a dejar el target del form en la misma ventana y a la misma acción que inicialmente tiene escrita.

Un saludo

[msimsi]

Hola no he podido hacer la vista previa siguiendo el ejemplo de arriba. Necesito usar el metodo post ya que son muchos datos. Hice esto.

pagina del formulario form_pub_ima.php

Coloque el script entre los <head>

<script language="javascript" type="text/javascript">
function previsualizar(){
ventanaPrevisualizar = window.open('', 'ventanaPrevisualizar','width=450,height=275, location=yes')
document.formprev.target = 'ventanaPrevisualizar'
document.formprev.action = 'previsualizar.php'
document.formprev.submit()
document.formprev.target = '_self'
document.formprev.action = 'previsualizar.php'
}
</script>


y esta es la forma:
<form name="nameform" method=post enctype=multipart/form-data action=processor.php<?php echo "?ref=$x_idciudad" ;?>>

<label for="f_titulo">T&iacute;tulo: </label>
<input id="f_titulo" name="f_titulo" type="text" maxlength="255" value=""/>

<label for="f_foto1">Tu imagen: </label>
<input id="f_foto1" name="f_foto1" type="file"/>

<label for="f_mensaje">Mensaje: </label>
<textarea id="f_mensaje" name="f_mensaje" cols="85" rows="15" ></textarea>

<label for="f_nombre">Nombre: </label>
<input id="f_nombre" name="f_nombre" type="text" maxlength="255" value=""/>

<label for="f_email">Email: </label>
<input id="f_email" name="f_email" type="text" maxlength="255" value=""/>

<label for="f_mostraremail">Mostrar Email: </label>
<input name=f_mostraremail id=f_mostraremail_option_1 type="radio" value="1" />
<label class="choice" for="f_mostraremail_option_1">S&iacute;</label>
<input name=f_mostraremail id=f_mostraremail_option_2 type="radio" value="0" checked="checked" />
<label class="choice" for="f_mostraremail_option_2">No</label>

<input id="saveForm" type="submit" name="submit" value="Enviar" />

<form name="formprev">
<input id="previsualizar" " type="submit" name="previsualizar" value="Previsualizar" onclick="previsualizar()">
</form>

</form>


Cuando le hago click al boton previsualizar no me esta abriendo previsualizar.php en una ventana aparte sino que me lleva a processor.php en la misma ventana.

Y ademas de ese problema tengo una pregunta. Cuando me logre abrir la ventana previsualizar.php para tomar los valores del formulario uso como siempre $VARIABLE=@$_POST['f_variable']; asi con todas las variables incliudad la de la foto?

[caricatos]

Hola:

Tienes que asegurarte de que tu script lo aplicas al formulario correcto, o sea:

ventanaPrevisualizar = window.open('', 'ventanaPrevisualizar','width=450,height=275, location=yes')
document.nameform.target = 'ventanaPrevisualizar';
document.nameform.action = 'previsualizar.php';
document.nameform.submit();
document.nameform.target = '_self';
document.nameform.action = 'processor.php';

Saludos

[msimsi]

Iniciado por caricatos

Hola:

Tienes que asegurarte de que tu script lo aplicas al formulario correcto, o sea:

ventanaPrevisualizar = window.open('', 'ventanaPrevisualizar','width=450,height=275, location=yes')
document.nameform.target = 'ventanaPrevisualizar';
document.nameform.action = 'previsualizar.php';
document.nameform.submit();
document.nameform.target = '_self';
document.nameform.action = 'processor.php';

Saludos

Gracias por la respuesta pero no me funcionó. Lo que hice fue esto:
<input id="previsualizar" type="submit" name="previsualizar" value="Previsualizar" onclick="this.form.action='previsualizar.php'">
y asi el formulario me dirige a previsualizar que es lo que quiero. El problema que tengo ahora es que quiero que esto me lo abra en una ventana nueva para que el formulario quede intacto.

[caricatos]

Hola:

En el siguiente artículo: Formularios y enlaces dirigidos a ventanas puedes ver como se envían los formularios a ventanas... aunque me sigue extrañando que no te funcione... el script debes lanzarlo desde un botón pero no del tipo submit <button type="button" >

Tal como dices que te funciona, debes controlar que el botón submit normal (no el de previsualizar) restaure el action y el target, que es precisamente lo que te falta para enviar el form a una ventana... y si esa ventana quieres que tenga características de popup, debes abrirla antes en blanco...

El ejemplo que te puso tunait (¡Hola !) es en mi opinión la mejor forma de hacer lo que quieres.

Saludos

[msimsi]

Bieno ya lo soluciones asi:

esta es la funcion
<script type="text/javascript">
function getAction()
{
var x=document.forms.nameform;
}

function changeAction(action)
{
var x=document.forms.nameform;
var screenw=1024;
var screenh=768;
x.action=action;

ventanaPrevisualizar = window.open('', 'ventanaPrevisualizar','width=screenw , height=screenh, location=no, scrollbars');
document.nameform.target = 'ventanaPrevisualizar';
}
</script>


y la forma :
<form name="nameform" method=post enctype=multipart/form-data action=processor.php<?php echo "?ref=$x_idciudad" ;?>>

//AQUI VAN LOS INPUT

// Y ESTOS SON LOS BOTONES DE LA FORMA
<input id="saveForm" type="submit" name="submit" onclick="getAction()" value="Enviar" />
<input id="previsualizar" type="submit" name="submit" value="Vista previa" onclick="changeAction('previsualizarimagen.php<?ph p echo "?ref=$x_idciudad" ;?>')">

</form>