Imrpimir página después de visualizar el fomulario
Muy buenas, que tal?
Me gustaría hacerte una pregunta =)
Tengo un formulario web, más bien es un calendario escolar para que los niños pongan ahí sus clases. Lo tengo hecho y tengo el preview por así decirlo pero me gustaría que cuando envíen el formulario para visualizarlo a la vez se imprima, sabrías como podría hacer esto?
Te dejo el código por si te sirve de algo.
Código de calendario.html
<html>
<head>
<title>Prueba</title>
<!--
<link rel="stylesheet" href="/wp-content/calendario/designer.css" type="text/css">
-->
<link rel="stylesheet" href="designer.css" type="text/css">
<script>
function ChangeBackground(){
document.getElementById("calendarBack").style.backgroundImage = "url("+document.getElementById("selectBack").value+")";
}
</script>
?
<style type="text/css"><!--
#calendarBack{
background:url(sunny.jpg) no-repeat;
width:930px;
height:700px;
}
-->
</style>
</head>
<body>
<form action="http://www2.bravoporti.com/wp-content/calendario/preview.php" method="post">
<div id="background_selection">
<select id="selectBack" name="selectBack" onChange="ChangeBackground()">
<option value="sunny.jpg">Sunny</option>
<option value="villa.jpg">Villa</option>
<option value="teenangels.jpg">Teenangels</option>
</select>
</div>
<div id="calendarBack">
</div>
<div id="headline"><input type="text" name="title" id="title" class="titulo" /></div>
<div id="input_table">
<div class="SA" id="SA">
<div id="A1" class= "Z"><input type="text" name="A1" id="A1" /></div>
<div id="A2" class= "Z"><input type="text" name="A2" id="A2" /></div>
<div id="A3" class= "Z"><input type="text" name="A3" id="A3" /></div>
<div id="A4" class= "Z"><input type="text" name="A4" id="A4" /></div>
<div id="A5" class= "Z"><input type="text" name="A5" id="A5" /></div>
<div id="A1" class= "Z"><input type="text" name="A6" id="A6" /></div>
<div id="A2" class= "Z"><input type="text" name="A7" id="A7" /></div>
<div id="A3" class= "Z"><input type="text" name="A8" id="A8" /></div>
<div id="A4" class= "Z"><input type="text" name="A9" id="A9" /></div>
<div id="A5" class= "Z"><input type="text" name="A10" id="A10" /></div>
<div id="A4" class= "Z"><input type="text" name="A11" id="A11" /></div>
<div id="A5" class= "Z"><input type="text" name="A12" id="A12" /></div>
</div>
<div class="SB" id="SB">
<div id="B1" class= "Z"><input type="text" name="B1" id="B1" /></div>
<div id="B2" class= "Z"><input type="text" name="B2" id="B2" /></div>
<div id="B3" class= "Z"><input type="text" name="B3" id="B3" /></div>
<div id="B4" class= "Z"><input type="text" name="B4" id="B4" /></div>
<div id="B5" class= "Z"><input type="text" name="B5" id="B5" /></div>
<div id="B1" class= "Z"><input type="text" name="B6" id="B6" /></div>
<div id="B2" class= "Z"><input type="text" name="B7" id="B7" /></div>
<div id="B3" class= "Z"><input type="text" name="B8" id="B8" /></div>
<div id="B4" class= "Z"><input type="text" name="B9" id="B9" /></div>
<div id="B5" class= "Z"><input type="text" name="B10" id="B10" /></div>
<div id="B4" class= "Z"><input type="text" name="B11" id="B11" /></div>
<div id="B5" class= "Z"><input type="text" name="B12" id="B12" /></div>
</div>
<div class="SC" id="SC">
<div id="C1" class= "Z"><input type="text" name="C1" id="C1" /></div>
<div id="C2" class= "Z"><input type="text" name="C2" id="C2" /></div>
<div id="C3" class= "Z"><input type="text" name="C3" id="C3" /></div>
<div id="C4" class= "Z"><input type="text" name="C4" id="C4" /></div>
<div id="C5" class= "Z"><input type="text" name="C5" id="C5" /></div>
<div id="C1" class= "Z"><input type="text" name="C6" id="C6" /></div>
<div id="C2" class= "Z"><input type="text" name="C7" id="C7" /></div>
<div id="C3" class= "Z"><input type="text" name="C8" id="C8" /></div>
<div id="C4" class= "Z"><input type="text" name="C9" id="C9" /></div>
<div id="C5" class= "Z"><input type="text" name="C10" id="C10" /></div>
<div id="C4" class= "Z"><input type="text" name="C11" id="C11" /></div>
<div id="C5" class= "Z"><input type="text" name="C12" id="C12" /></div>
</div>
<div class="SD" id="SD">
<div id="D1" class= "Z"><input type="text" name="D1" id="D1" /></div>
<div...
Me gustaría hacerte una pregunta =)
Tengo un formulario web, más bien es un calendario escolar para que los niños pongan ahí sus clases. Lo tengo hecho y tengo el preview por así decirlo pero me gustaría que cuando envíen el formulario para visualizarlo a la vez se imprima, sabrías como podría hacer esto?
Te dejo el código por si te sirve de algo.
Código de calendario.html
<html>
<head>
<title>Prueba</title>
<!--
<link rel="stylesheet" href="/wp-content/calendario/designer.css" type="text/css">
-->
<link rel="stylesheet" href="designer.css" type="text/css">
<script>
function ChangeBackground(){
document.getElementById("calendarBack").style.backgroundImage = "url("+document.getElementById("selectBack").value+")";
}
</script>
?
<style type="text/css"><!--
#calendarBack{
background:url(sunny.jpg) no-repeat;
width:930px;
height:700px;
}
-->
</style>
</head>
<body>
<form action="http://www2.bravoporti.com/wp-content/calendario/preview.php" method="post">
<div id="background_selection">
<select id="selectBack" name="selectBack" onChange="ChangeBackground()">
<option value="sunny.jpg">Sunny</option>
<option value="villa.jpg">Villa</option>
<option value="teenangels.jpg">Teenangels</option>
</select>
</div>
<div id="calendarBack">
</div>
<div id="headline"><input type="text" name="title" id="title" class="titulo" /></div>
<div id="input_table">
<div class="SA" id="SA">
<div id="A1" class= "Z"><input type="text" name="A1" id="A1" /></div>
<div id="A2" class= "Z"><input type="text" name="A2" id="A2" /></div>
<div id="A3" class= "Z"><input type="text" name="A3" id="A3" /></div>
<div id="A4" class= "Z"><input type="text" name="A4" id="A4" /></div>
<div id="A5" class= "Z"><input type="text" name="A5" id="A5" /></div>
<div id="A1" class= "Z"><input type="text" name="A6" id="A6" /></div>
<div id="A2" class= "Z"><input type="text" name="A7" id="A7" /></div>
<div id="A3" class= "Z"><input type="text" name="A8" id="A8" /></div>
<div id="A4" class= "Z"><input type="text" name="A9" id="A9" /></div>
<div id="A5" class= "Z"><input type="text" name="A10" id="A10" /></div>
<div id="A4" class= "Z"><input type="text" name="A11" id="A11" /></div>
<div id="A5" class= "Z"><input type="text" name="A12" id="A12" /></div>
</div>
<div class="SB" id="SB">
<div id="B1" class= "Z"><input type="text" name="B1" id="B1" /></div>
<div id="B2" class= "Z"><input type="text" name="B2" id="B2" /></div>
<div id="B3" class= "Z"><input type="text" name="B3" id="B3" /></div>
<div id="B4" class= "Z"><input type="text" name="B4" id="B4" /></div>
<div id="B5" class= "Z"><input type="text" name="B5" id="B5" /></div>
<div id="B1" class= "Z"><input type="text" name="B6" id="B6" /></div>
<div id="B2" class= "Z"><input type="text" name="B7" id="B7" /></div>
<div id="B3" class= "Z"><input type="text" name="B8" id="B8" /></div>
<div id="B4" class= "Z"><input type="text" name="B9" id="B9" /></div>
<div id="B5" class= "Z"><input type="text" name="B10" id="B10" /></div>
<div id="B4" class= "Z"><input type="text" name="B11" id="B11" /></div>
<div id="B5" class= "Z"><input type="text" name="B12" id="B12" /></div>
</div>
<div class="SC" id="SC">
<div id="C1" class= "Z"><input type="text" name="C1" id="C1" /></div>
<div id="C2" class= "Z"><input type="text" name="C2" id="C2" /></div>
<div id="C3" class= "Z"><input type="text" name="C3" id="C3" /></div>
<div id="C4" class= "Z"><input type="text" name="C4" id="C4" /></div>
<div id="C5" class= "Z"><input type="text" name="C5" id="C5" /></div>
<div id="C1" class= "Z"><input type="text" name="C6" id="C6" /></div>
<div id="C2" class= "Z"><input type="text" name="C7" id="C7" /></div>
<div id="C3" class= "Z"><input type="text" name="C8" id="C8" /></div>
<div id="C4" class= "Z"><input type="text" name="C9" id="C9" /></div>
<div id="C5" class= "Z"><input type="text" name="C10" id="C10" /></div>
<div id="C4" class= "Z"><input type="text" name="C11" id="C11" /></div>
<div id="C5" class= "Z"><input type="text" name="C12" id="C12" /></div>
</div>
<div class="SD" id="SD">
<div id="D1" class= "Z"><input type="text" name="D1" id="D1" /></div>
<div...
1 Respuesta
Respuesta de ditman
1
A lo mejor ya has encontrado la solución pero lo que yo haría sería lanzar el cuadro de diálogo de impresión al terminar de cargar la página de preview.
Para ello tienes 2 maneras, la buena y la menos buena:
La buena es utilizando el evento onDomReady que dan muchos frameworks de javascript actuales (jquery, mootools, etc...).
La menos buena es añadiendo una tag
<script></script>
Al final de todo el código de la página que quieres imprimir.
En cualquier caso el código al que tienes que llamar (en javascript) es:
window.print(); // Ver más documentación en la MDC
Con CSS puedes además definir una hoja de estilos que se usa únicamente a la hora de imprimir tus páginas (por si quieres que el calendario tenga una pinta en pantalla y hacerle correcciones al imprimir). Para ello tienes que incrustar una hoja de estilo con el siguiente código (en la cabecera):
<link rel="stylesheet" type"text/css" href="print.css" media="print">
Más información sobre media print.
Para ello tienes 2 maneras, la buena y la menos buena:
La buena es utilizando el evento onDomReady que dan muchos frameworks de javascript actuales (jquery, mootools, etc...).
La menos buena es añadiendo una tag
<script></script>
Al final de todo el código de la página que quieres imprimir.
En cualquier caso el código al que tienes que llamar (en javascript) es:
window.print(); // Ver más documentación en la MDC
Con CSS puedes además definir una hoja de estilos que se usa únicamente a la hora de imprimir tus páginas (por si quieres que el calendario tenga una pinta en pantalla y hacerle correcciones al imprimir). Para ello tienes que incrustar una hoja de estilo con el siguiente código (en la cabecera):
<link rel="stylesheet" type"text/css" href="print.css" media="print">
Más información sobre media print.
