Mostrar datos de formulario por pantalla antes de enviar

[majete]

Hola a todos,
Tengo una página bastante elaborada a nivel de elementos, diseño, estructura, etc. Esta página contiene un formulario que recoge casi 50 datos: de tipo numérico mediante botones, de tipo texto mediante cajas, algún radio button, etc.
Actualmente está configurado para que el envío se haga con un botón "submit" por POST a una página web PHP que lo envía a una BD MySQL y todo correcto funcionando perfecto.

El problema ahora es que me piden que se puedan imprimir los datos DEL FORMULARIO que se recogen por impresora, pero ANTES del envío, y me han dejado muerto la verdad.

Con un simple IMPRIMIR desde el navegador es imposible. Por otra parte, he descartado utilizar una hoja de estilo CSS con el media="print", porque es tan compleja que me llevaría mucho tiempo montarlo y ocultar todos los elementos para darle un aspecto simple para poder imprimirlo.

¿Se os ocurre alguna forma de hacerlo fácil? Sólo necesto que la salida tenga un par de logos, los textos de las preguntas y las respuestas.

Mil gracias!
Juan Carlos

[w3w3b]

Pues me da a mi que te han dado un buen palo. Así sin ver el código no se yo como hacerlo. Lo único que se me ocurre que es pongas un botón imprimir en la página que exporte los datos a un archivo word en una ventana nueva y luego que lo impriman.

Usando las cabeceras de php para el nuevo archivo que debes crear. Ahi podrás imprimir los logos que necesitas.

Código PHP:

  <? 
header('Content-type: application/vnd.ms-word'); 
header("Content-Disposition: attachment; filename=nombre.doc"); 
 header("Pragma: no-cache"); 
header("Expires: 0"); 
?>   

Y luego que envien los datos a la base de datos.

Espero serte de ayuda

[majete]

Hola!
La verdad es que me han dejado un poco tieso porque ya lo había acabado casi todo... Ayer estuve averiguando cosas y aunque no he podido probar nada hay alguna alternativa, por ejemplo:

Encontré un código que sustituye los valores de la propiedad ACTION con jquery. El código no es complejo de utilizar, pero no estoy seguro que influya de alguna forma lo que se me ha ocurrido:
1. Si pulsan el botón imprimir, jquery sustituye ciertos atributos del formulario para que: Abra un "pop-up" (para no salir del cuestionario) y que pase por POST los datos a una página llamada "impresion.php" por ejemplo donde ya sólo lo dejo maquetado para imprimir por impresora.
Para finalizar, restaura los atributos del form originales, que vinculan a otra página y la abre en la misma ventana.
2. Si pulsan directamente ENVIAR, seguiría el proceso normal que tengo diseñado ahora.

En cuanto lo pruebe confirmo si funciona o no...
Mil gracias por la ayuda!

[Rafael]

¿Sabes php?

En ese caso simplemente enlista las variables en algo como

Código PHP:

echo '
<li>Nombre: '. $Nombre . '<li>';
 

Pueden estar en el mismo archivo que envía a la bdd, pero hay que enviarlo.

Si no lo quieres "enviar" busca algo con JavaScript.

[german_1441]

Hola amigo,
y porque no lo haces en 2 pasos?
Se me ocurre que una vez llenado el formulario, el primer botón submit sea "Imprimir" (POR EJEMPLO) ..
La primera vez lo puedes cachar en un archivo "imprimir.php"... donde imprimiras los datos ingresados ... en ese mismo archivo puedes mostrar un 2do botón submit (Enviar), que envié los datos a un 2do archivo php donde ya harás el registro y demás...
yo me imagino un flujo así... quizá sea más complejo... de igual manera es una idea
Saludos!

[rodrypaladin]

Si sabes hacer el formulario, enviarlo y recoger los datos ya lo tienes, solo que lo tienes que hacer en dos pasos.

Archivo de formulario

Código HTML:

<form action="imprimir.php" method="post">
        Nombre:<input type="text" name="nombre"><br>
        Apellidos:<input type="text" name="apellidos"><br>
        Ciudad:<input type="text" name="ciudad"><br>
        Otros datos: <textarea name="mas" id="" cols="30" rows="10"></textarea><br>
        <input type="submit" name="enviar" value="Enviar">
    </form>
 

Recogemos los datos imprimir.php y los mostramos en pantalla para que los confirme

Código PHP:

<?php  
 
        $nombre = $_POST["nombre"];
        $apellidos = $_POST["apellidos"];
        $ciudad = $_POST["ciudad"];
        $mas = $_POST["mas"];
 
        echo $nombre . "<br>";
        echo $apellidos . "<br>";
        echo $ciudad . "<br>";
        echo $mas . "<br>";
 
    ?>
    
 
    <?php 
        if(!isset($_POST["confirmar"])) {
    ?>
            <form action="" method="post">
            <input type="submit" name="confirmar" value="Confirmar">
            </form>
    <?php
        }
        else {
            //procesamos en formulario
        }
     ?>
 

Mira a ver si funciona que no lo he probado. También puedes hacerlo todo en un único archivo

[NueveReinas]

Te ofrezco una solución alternativa en base a jQuery:

Código HTML:

<form id="TuForm" (y todo lo demás)>
 

Luego creas dos contenedores (o botones, o lo que quieras) con los ID correspondientes y listo.

Código Javascript:

$("#preview").click(function(e) {   
    $('#TuForm').get(0).setAttribute('action', 'preview.php');
    //Aquí haces lo que necesites, lo importante es establecer el action.
    //Puedes hacer un .submit(), enviarlo por AJAX, etc.
});
 
$("#publicar").click(function(e) {  
    e.preventDefault();
    $('#TuForm').get(0).setAttribute('action', 'publicar.php');
    $('#TuForm').get(0).setAttribute('target', '_blank');
    $("#TuForm").submit();
});
 

Por cierto, no olvides asegurar TODOS y cada uno de los datos que vas a mostrar para evitar ataques de XSS.

Saludos.