Abrir FORM en un frame de la misma pagina

zerart245 · #1 (**permalink**) 31/01/2012, 10:49

Hola que tal necesito su ayuda para realizar lo siguiente:

Necesito hacer un pequeño "editor de pdf en linea", cuento con el pdf generado por fpdf y conectado a mysql para guardar los cambios en este.

Sin la previsualización de este todo estaria muy bien pues cuando mando los datos por submit estos se guardan y todo.

Pero lo que deseo hacer es que antes de presionar el botón se actualice también la previsualizacion. Si alguien sabe la mejor manera de hacer esto. O bien como puedo hacer para que se actualice mi ventana cada vez que cambio el radio o los checkbox.

O como hago para que la ventana que me genera el FORM pasarla a un iframe o frame.

Gracias.

Código HTML:

<div id="modelo2" align="center" style="display:none; height:420px">
				<FORM name="Modelo2" ACTION="cvpdf_modelo1.php" onSubmit=Reload('iframe2')  METHOD="post">
					<div id="pdf" align="center" style="width:500px; display:block">
					<iframe id="iframe2" src="cvpdf_modelo1.php#toolbar=0&navpanes=0" width=200 height=255></iframe></div>
					<table width="500" border="0">
						<tr>
							<td><p>Escoger color de t&igrave;tulo: </p>
		  						<table align="center" width="60" border="0">
						  			<tr>
										<input type="hidden" name="cv_bd"/>
										<td width="30"><input type="radio" onClick="valores();"   value="2" name="cv_color_fondo" checked="checked"/></td>
										<td width="30"><input type="radio" onClick="valores();"    value="3"  name="cv_color_fondo"/></td>
										<td width="30"><input type="radio"  onClick="valores();"   value="4" name="cv_color_fondo"/></td>
										<td width="30"><input type="radio" onClick="valores();"   value="5" name="cv_color_fondo"/></td>
										<td width="30"><input type="radio" onClick="valores();"  	value="6"  name="cv_color_fondo"/></td>
										<td width="30"><input type="radio" onClick="valores();"  	value="7"  name="cv_color_fondo"/></td>
									</tr>
						  			<tr>
										<td width="30"  bgcolor="#E9E4CC" style=" border:2px solid #E9DEA3">&nbsp;</td>
										<td width="30" style="border:2px solid #BBD08D" bgcolor="EBF0DE">&nbsp;</td>
										<td width="30" style="border:2px solid #558ED5" bgcolor="#DCE6F2">&nbsp;</td>
										<td width="30" bgcolor="#FFEECC" style="border:2px solid #FFCF6C">&nbsp;</td>
										<td width="30"  bgcolor="#FFE3DC" style="border:2px solid #FFBDAE">&nbsp;</td>
										<td width="30"  bgcolor="#D6BBC5" style="border:2px solid #D69DAF">&nbsp;</td>
									</tr>
		  						</table>
		 					</td>
							<td>
								<input id="fotito" type="checkbox" onClick="valores();"   name="foto"   />
								 <span class="Estilo1">Mostrar foto </span> <br>
								 <input type="checkbox" name="pretensiones" onClick="valores();"   id="pretensiones"   />
								<span class="Estilo1">Pretenci&oacute;n salarial: &quot;A Tratar&quot;</span> <br>
								<input type="checkbox" onClick="valores();"   name="referencias" id="referencias" />
								 <span class="Estilo1">Referencias Laborales: &quot;A solicitud&quot;</span> 
								</p>
							</td>
						</tr>
						<tr style="text-align:center">
							<td  colspan="2"><p><br>
							   <input name="submit1" style="background:url(Imagenes/btngenerarcv2.png); width:122px; height:29px; border:none; cursor: pointer" type="submit" title="Generar mi CV"	 value=""/>
							   <input name="submit2" type="submit" style="background:url(Imagenes/btndescargar.png); width:122px; height:29px; border:none; cursor: pointer" title="Generar mi CV"  value=""/>
						  </td>
						</tr>
					</table>
				</form>
			</div>

bitbow · #2 (**permalink**) 31/01/2012, 12:25

Hola!

Esto lo puedes conseguir con un iframe oculto, de esta forma todo lo canalizas al iframe y recargas lo que requieras con ajax, asi simularas la actualizacion al momento.

tu submit debe apuntar al iframe, en otro iframe cargas los cambios y listo, es probable que no requieras ajax pero bueno simpre sirve para algo.

zerart245 · #3 (**permalink**) 01/02/2012, 11:20

Gracias por la respuesta logre solucionar ese problema.

Código HTML:

<iframe name"iframe2" id="iframe2" src="cvpdf_modelo1.php#toolbar=0&navpanes=0" width=200 height=255></iframe></div>
<div id="modelo2" target="iframe2" align="center" style="display:none; height:420px">
				<FORM name="Modelo2" ACTION="cvpdf_modelo1.php" onSubmit=Reload('iframe2')  METHOD="post">
					<div id="pdf" align="center" style="width:500px; display:block">
					
					<table width="500" border="0">
						<tr>
							<td><p>Escoger color de t&igrave;tulo: </p>
		  						<table align="center" width="60" border="0">
						  			<tr>
										<input type="hidden" name="cv_bd"/>
										<td width="30"><input type="radio" onClick="valores();"   value="2" name="cv_color_fondo" checked="checked"/></td>
										<td width="30"><input type="radio" onClick="valores();"    value="3"  name="cv_color_fondo"/></td>
										<td width="30"><input type="radio"  onClick="valores();"   value="4" name="cv_color_fondo"/></td>
										<td width="30"><input type="radio" onClick="valores();"   value="5" name="cv_color_fondo"/></td>
										<td width="30"><input type="radio" onClick="valores();"  	value="6"  name="cv_color_fondo"/></td>
										<td width="30"><input type="radio" onClick="valores();"  	value="7"  name="cv_color_fondo"/></td>
									</tr>
						  			<tr>
										<td width="30"  bgcolor="#E9E4CC" style=" border:2px solid #E9DEA3">&nbsp;</td>
										<td width="30" style="border:2px solid #BBD08D" bgcolor="EBF0DE">&nbsp;</td>
										<td width="30" style="border:2px solid #558ED5" bgcolor="#DCE6F2">&nbsp;</td>
										<td width="30" bgcolor="#FFEECC" style="border:2px solid #FFCF6C">&nbsp;</td>
										<td width="30"  bgcolor="#FFE3DC" style="border:2px solid #FFBDAE">&nbsp;</td>
										<td width="30"  bgcolor="#D6BBC5" style="border:2px solid #D69DAF">&nbsp;</td>
									</tr>
		  						</table>
		 					</td>
							<td>
								<input id="fotito" type="checkbox" onClick="valores();"   name="foto"   />
								 <span class="Estilo1">Mostrar foto </span> <br>
								 <input type="checkbox" name="pretensiones" onClick="valores();"   id="pretensiones"   />
								<span class="Estilo1">Pretenci&oacute;n salarial: &quot;A Tratar&quot;</span> <br>
								<input type="checkbox" onClick="valores();"   name="referencias" id="referencias" />
								 <span class="Estilo1">Referencias Laborales: &quot;A solicitud&quot;</span> 
								</p>
							</td>
						</tr>
						<tr style="text-align:center">
							<td  colspan="2"><p><br>
							   <input name="submit1" style="background:url(Imagenes/btngenerarcv2.png); width:122px; height:29px; border:none; cursor: pointer" type="submit" title="Generar mi CV"	 value=""/>
							   <input name="submit2" type="submit" style="background:url(Imagenes/btndescargar.png); width:122px; height:29px; border:none; cursor: pointer" title="Generar mi CV"  value=""/>
						  </td>
						</tr>
					</table>
				</form>
			</div>

pero ahora como podras ver cada vez que actualizo dando en un checkbox o radio se actualiza dandole en el evento onclick, lo malo es que no me da click en mi submit especifico que es el que esta oculto. como puedo hacer para que clique justo ese gracias.