Foros del Web » Creando para Internet » Diseño web »

Capas superpuestas o vínculos en iframe?

 Estas en el tema de Capas superpuestas o vínculos en iframe? en el foro de Diseño web en Foros del Web. Hola a todas las buenas personas que aiudan por aki... Sigo con problemillas en mi mega formulario... Ahora le toca el turno a los selects ...
  #1 (permalink)  
Antiguo 20/10/2008, 05:36
Avatar de glmarzoa  
Fecha de Ingreso: octubre-2008
Mensajes: 7
Antigüedad: 16 años, 1 mes
Puntos: 0
Capas superpuestas o vínculos en iframe?
Hola a todas las buenas personas que aiudan por aki...
Sigo con problemillas en mi mega formulario... Ahora le toca el turno a los selects dependientes...Tengo un 1º select, que define categorías y un 2º select que define artículos. Relacionar estos selects funciona. Ahora, a partir del valor de este segundo select, aparecen una serie campos para que cubra el usuario. Los campos varían en función de cada artículo.
He probado a hacerlo con divs que aparezcan y desaparezcan, pero, no consigo ponerlas de modo superpuestas, y aparecen unas debajo de otras... También intenté meter un iframe, y hacer en el 2º select, que se cargara la página específica. pero así hay que hacer como "subformularios" y es bastante lío...
Os dejo el código, para que veáis por donde va la cosa... Se acepta cualquier sugerencia de como hacer esto, o como hacerlo más limpio..
<html>
<head>
<script>
function cambiar()
{
var index=document.forms.Equipos_tanques.Categoría.sel ectedIndex;
Equipos_tanques.Articulos.length=0;
if(index==0) categoria1();
if(index==1) categoria2();
}
function categoria1(){
opcion0=new Option("producto1","producto1");
opcion1=new Option("producto2","producto2","defauldSelected");
document.forms.Equipos_tanques.Articulos.options[0]=opcion0;
document.forms.Equipos_tanques.Articulos.options[1]=opcion1;
}
function categoria2(){
opcion0=new Option("producto3","producto3","defauldSelected");
opcion1=new Option("producto4","producto4");
opcion2=new Option("producto5","producto5");
document.forms.Equipos_tanques.Articulos.options[0]=opcion0;
document.forms.Equipos_tanques.Articulos.options[1]=opcion1;
document.forms.Equipos_tanques.Articulos.options[2]=opcion2;
}
</script>
<title>Documento sin t&iacute;tulo</title>
<style type="text/css">
<!--
.tipostanque {
position:relative;
top:0 px;
left:0 px;
}
-->
</style>
</head>
<body>
<form name="Equipos_tanques" method="post" action="">
<div align="center">
<p>Tipo de Tanque</p>
<table width="93%" border="1" bordercolor="#999999">
<tr>
<td width="7%" >&nbsp;</td>
<td colspan="2" bordercolor="#990066" ><div align="center"></div></td>
<td width="47%" bordercolor="#990066" class="Estilo39"> (Estas capas tendrían que ir ocult&aacute;ndose en funci&oacute;n de lo elegido en el select art&iacute;culos y así la tabla quedar pequeña</td>
</tr>
<tr>
<td rowspan="2" ></td>
<td width="23%" height="39" bordercolor="#990066"><div align="center">
<p>Categorías</p>
<p><select name="Categoría" class="Estilo39" onChange="cambiar()">
<option value="cat1" selected="selected">Categoria 1</option>
<option value="cat2">Categoria2</option></select> </p>
</div></td>
<td width="23%" bordercolor="#990066"><div align="center">
<p>Artículos</p>
<p><select name="Articulos" class="Estilo39">
<option value="horizontal" selected="selected">producto1</option>
<option value="vertical">producto2</option></select></p>
</div></td>
<td rowspan="2" bordercolor="#990066"><div style="position:relative; width:80%; height:100%; background-color:#FFFFCC; align="center" id="prod1" class="tipostanque">
<p class="Estilo41">Producto 1 </p>
<table width="73%" border="0" cellspacing="2">
<tr>
<td width="36%" height="54" class="Estilo39">aa</td>
<td width="64%" ><div align="center">
<select>
<option>Si</option>
<option>No</option></select>
</div></td>
</tr>
<tr>
<td height="55" class="Estilo39">bb</td>
<td ><div align="center">
<select>
<option>Si</option>
<option>No</option>
</select>
</div></td>
</tr>
</table>
</div>
<div align="center" id="prod2" style="width:80%; height:100%; position:relative; background-color: #99FF99; layer-background-color: #99FF99; border: 1px none #000000;">
<p class="Estilo40"><span class="Estilo41">Producto 2 </span></p>
<table width="85%" height="182" border="0" cellspacing="2">
<tr>
<td width="64%" height="39" class="Estilo39">cc</td>
<td width="36%" ><div align="center">
<select>
<option>Si</option>
<option>No</option>
</select>
</div></td>
</tr>
<tr>
<td ><span class="Estilo39">dd</span></td>
<td><span class="Estilo39">
<input name="Altura máx liquido" type="text" id="Altura máx liquido" size="5" />
</span></td>
</tr>
<tr>
<td ><span class="Estilo39">ee</span></td>
<td><span class="Estilo39">
<input type="text" size="5" />
</span></td>
</tr>
<tr>
<td ><span class="Estilo39">ff</span></td>
<td><span class="Estilo39">
<input type="text" id="Altura_tk" size="5" />
</span></td>
</tr>
</table>
</div><div align="center" id="prod3" style="width:80%; height:100%" class="tipostanque" ></br>
Producto 3
<table width="87%" height="274" border="0" cellspacing="2">
<tr>
<td width="62%" ><span class="Estilo39">gg</span></td>
<td ><select name="select3" id="select26">
<option>Si</option>
<option>No</option>
</select></td>
</tr>
<tr>
<td ><div class="Estilo39">hh</div></td>
<td ><input name="Nº_columnas" type="text" id="Nº_columnas" size="10" /></td>
</tr>
<tr>
<td ><span class="Estilo39">ii</span></td>
<td ><input type="text" id="Diam_columnas" size="10" /></td>
</tr>
<tr>
<td ><span class="Estilo39">jj</span></td>
<td ><select>
<option>1</option>
<option>2</option>
<option>3</option>
</select></td>
</tr>
<tr>
<td ><span class="Estilo39">kk</span></td>
<td ><select>
<option>Si</option>
<option>No</option>
</select></td>
</tr>
</table>
</div>
<div align="center" id="prod4" style="width:80%; height:100%" class="tipostanque" >
<p class="Estilo40">Producto 4 </p>
<table width="87%" height="211" border="0" cellspacing="2">
<tr>
<td height="34" ><span class="Estilo39">mm</span></td>
<td ><select>
<option>a</option>
<option>b</option>
<option>c</option>
</select></td>
</tr>
<tr>
<td height="33" ><span class="Estilo39">nn</span></td>
<td ><select>
<option>Si</option>
<option>No</option>
</select></td>
</tr>
<tr>
<td height="30" ><span class="Estilo39">oo</span></td>
<td ><select>
<option>r</option>
<option>s</option>
</select></td>
</tr>
<tr>
<td height="29" ><span class="Estilo39">pp</span></td>
<td ><select>
<option>2p</option>
<option>f</option>
</select></td>
</tr>
</table>
</div>
<div align="center" id="prod5" style="width:80%; height:100%" class="tipostanque" >
<p></p>
<p class="Estilo41"><span class="Estilo40">Producto 5 </span></p>
<table width="87%" height="211" border="0" cellspacing="2">
<tr>
<td height="34" ><span class="Estilo39">qq</span></td>
<td ><select>
<option>1</option>
<option>2</option>
<option>3</option>
</select></td>
</tr>
<tr>
<td height="33" ><span class="Estilo39">rr</span></td>
<td ><select>
<option>Si</option>
<option>No</option>
</select></td>
</tr>
<tr>
<td height="30" ><span class="Estilo39">ss</span></td>
<td ><select>
<option>r</option>
<option>s</option>
</select></td>
</tr>
<tr>
<td height="29" ><span class="Estilo39">tt</span></td>
<td ><select>
<option>2p</option>
<option>f</option>
</select></td>
</tr>
</table>
</div> <p>&nbsp;</p> </td>
</tr>
<tr>
<td colspan="2" bordercolor="#990066">&nbsp;</td>
</tr>
</table>
</div>
</form>
</body>
</html>
  #2 (permalink)  
Antiguo 21/10/2008, 10:24
Avatar de glmarzoa  
Fecha de Ingreso: octubre-2008
Mensajes: 7
Antigüedad: 16 años, 1 mes
Puntos: 0
Respuesta: Capas superpuestas o vínculos en iframe?
Me autocontesto... Se me ocurre que en vez de usar capas, podría poner una serie de divs dentro de la tabla, que cambien en función del valor del 2º select. No me funciona lo de parametrostanques() y no se porqué, supongo que no coge bien el value del select. Alguna sugerencia o corrección?? Gracias
<html>
<head>
<script>
function cambiarteito(){
var index=document.forms.Equipos_tanques.Tipotanque.se lectedIndex;
Equipos_tanques.Subtipotanque.length=0;
if(index==0) teitofixo();
if(index==1) teitoflotante();}
function teitofixo(){
opcion0=new Option("Tanque horizontal","horizontal");
opcion1=new Option("Tanque vertical","vertical","defaultSelected");
document.forms.Equipos_tanques.Subtipotanque.optio ns[0]=opcion0;
document.forms.Equipos_tanques.Subtipotanque.optio ns[1]=opcion1;}
function teitoflotante(){
opcion0=new Option("Teito flotante interno","interno","defaultSelected");
opcion1=new Option("Teito flotante externo","externo");
opcion2=new Option("Teito flotante externo con abovedado fixo","abovedado");
document.forms.Equipos_tanques.Subtipotanque.optio ns[0]=opcion0;
document.forms.Equipos_tanques.Subtipotanque.optio ns[1]=opcion1;
document.forms.Equipos_tanques.Subtipotanque.optio ns[2]=opcion2; }
</script>
<script>
function azul(celda){
celda.style.backgroundColor='#99CCFF';}
function blanco(celda){
celda.style.backgroundColor='#FFFFFF';}
function parametrostanques(){
var indice= document.forms.Equipos_tanques.Subtipotanque.selec tedIndex;
var tipotk = document.Equipos_tanques.Subtipotanque[indice].value
if(tipotk==vertical) vertical();
if(tipotk==horizontal) horizontal();
if(tipotk==interno) interno();
if(tipotk==externo) externo();
if(tipotk==abovedado) abovedado();}
function abovedado{
c11=document.getElementById('1A');
c11.innerHTML = "&nbsp;";
blanco(c11);
c12=document.getElementById('1B');
c12.innerHTML="&nbsp;";
c21=document.getElementById('2A');
c21.innerHTML = "Selo primario";
azul(c21);
c22=document.getElementById('2B');
c22.innerHTML='<select id="TFASelo1"><option>Zapata mecánica</option><option>Montado en vapor</option><option>Montado en líquido</option></select>';
c31=document.getElementById('3A');
c31.innerHTML = "Selo secundario";
azul(c31);
c32=document.getElementById('3B');
c32.innerHTML ='<select id="TFASelo2"><option>Si</option><option >Non</option></select>';
c41=document.getElementById('4A');
c41.innerHTML ="Unións";
azul(c41);
c42=document.getElementById('4B');
c42.innerHTML ='<select id="TFAUnions"><option>Remachada</option><option>Soldada</option></select>';
c51=document.getElementById('5A');
c51.innerHTML ="Plataforma";
azul(c51);
c52=document.getElementById('5B');
c52.innerHTML ='<select id="TFAPlataforma"><option>Dobre plataforma</option><option>Con flotador</option></select>';
c61=document.getElementById('6A');
c61.innerHTML = "&nbsp;";
blanco(c61);
c62=document.getElementById('6B');
c62.innerHTML="&nbsp;";}
function externo{
c11=document.getElementById('1A');
c11.innerHTML = "&nbsp;";
blanco(c11);
c12=document.getElementById('1B');
c12.innerHTML="&nbsp;";
c21=document.getElementById('2A');
c21.innerHTML = "Selo primario";
azul(c21);
c22=document.getElementById('2B');
c22.innerHTML='<select id="TFESelo1"><option>Zapata mecánica</option><option>Montado en vapor</option><option>Montado en líquido</option></select>';
c31=document.getElementById('3A');
c31.innerHTML = "Selo secundario";
azul(c31);
c32=document.getElementById('3B');
c32.innerHTML ='<select id="TFESelo2"><option>Si</option><option >Non</option></select>';
c41=document.getElementById('4A');
c41.innerHTML ="Unións";
azul(c41);
c42=document.getElementById('4B');
c42.innerHTML ='<select id="TFEUnions"><option>Remachada</option><option>Soldada</option></select>';
c51=document.getElementById('5A');
c51.innerHTML ="Plataforma";
azul(c51);
c52=document.getElementById('5B');
c52.innerHTML ='<select id="TFEPlataforma"><option>Dobre plataforma</option><option>Con flotador</option></select>';
c61=document.getElementById('6A');
c61.innerHTML = "&nbsp;";
blanco(c61);
c62=document.getElementById('6B');
c62.innerHTML="&nbsp;";}
function interno(){
c11=document.getElementById('1A');
c11.innerHTML = "Teito Autosoportado";
azul(c11);
c12=document.getElementById('1B');
c12.innerHTML='<select id="Autosoporte"><option>Si</option><option >Non</option></select>';
c21=document.getElementById('2A');
c21.innerHTML = "Nº de columnas";
azul(c21);
c22=document.getElementById('2B');
c22.innerHTML='<input type="text" id="Ncolumnas" size="5"/>'
c31=document.getElementById('3A');
c31.innerHTML = "Diámetro das columnas";
azul(c31);
c32=document.getElementById('3B');
c32.innerHTML ='<input type="text" id="Dcolumnas" size="5"/>&nbsp;m'
c41=document.getElementById('4A');
c41.innerHTML ="Selo Primario";
azul(c41);
c42=document.getElementById('4B');
c42.innerHTML ='<select id="TFISelo1"><option>Zapata mecánica</option><option>Montado en vapor</option><option>Montado en líquido</option></select>';
c51=document.getElementById('5A');
c51.innerHTML ="Selo secundario";
azul(c51);
c52=document.getElementById('5B');
c52.innerHTML ='<select id="TFISelo2"><option>Si</option><option >Non</option></select>';
c61=document.getElementById('6A');
c61.innerHTML = "Unións";
azul(c61);
c62=document.getElementById('6B');
c62.innerHTML='<select id="TFIUnions"><option>Con pernos</option><option>Soldada</option></select>';}
function horizontal(){
c11=document.getElementById('1A');
c11.innerHTML = "&nbsp;";
blanco(c11);
c12=document.getElementById('1B');
c12.innerHTML="&nbsp;";
blanco(c12);
c21=document.getElementById('2A');
c21.innerHTML = "Calefactado";
azul(c21);
c22=document.getElementById('2B');
c22.innerHTML='<select id="Tqhoriz_calef"><option>Si</option><option >Non</option></select>'
c31=document.getElementById('3A');
c31.innerHTML = "&nbsp;";
blanco(c31);
c32=document.getElementById('3B');
c32.innerHTML ="&nbsp;";
c41=document.getElementById('4A');
c41.innerHTML ="Subterr&aacute;neo";
azul(c41);
c42=document.getElementById('4B');
c42.innerHTML ='<select id="Tqhoriz_subterr"><option>Si</option><option >Non</option></select>';
c51=document.getElementById('5A');
c51.innerHTML ="&nbsp;";
blanco(c51);
c52=document.getElementById('5B');
c52.innerHTML ="&nbsp;";
c61=document.getElementById('6A');
c61.innerHTML = "&nbsp;";
blanco(c61);
c62=document.getElementById('6B');
c62.innerHTML="&nbsp;"; }
function vertical(){
c11=document.getElementById('1A');
c11.innerHTML = "&nbsp;";
blanco(c11);
c12=document.getElementById('1B');
c12.innerHTML="&nbsp;";
blanco(c12);
c21=document.getElementById('2A');
c21.innerHTML = "Calefactado";
azul(c21);
c22=document.getElementById('2B');
c22.innerHTML='<select id="Tqvertical_calefacción"><option>Si</option><option >Non</option></select>'
c31=document.getElementById('3A');
c31.innerHTML = "Altura máx líquido";
azul(c31);
c32=document.getElementById('3B');
c32.innerHTML ='<input type="text" id="Hmax" size="5"/>&nbsp;m';
c41=document.getElementById('4A');
c41.innerHTML ="Altura media líquido";
azul(c41);
c42=document.getElementById('4B');
c42.innerHTML ='<input type="text" id="Hmed" size="5"/>&nbsp;m';
c51=document.getElementById('5A');
c51.innerHTML ="Altura do teito";
azul(c51);
c52=document.getElementById('5B');
c52.innerHTML ='<input type="text" id="Hteito" size="5"/>&nbsp;m';
c61=document.getElementById('6A');
c61.innerHTML = "&nbsp;";
blanco(c61);
c62=document.getElementById('6B');
c62.innerHTML="&nbsp;";}
</script>
</head>
<body>
<form id="Equipos_tanques">
<table width="82%" border="1">
<tr><td colspan="6"><div><span>Tanque de Almacenamento </span></div></td> </tr>
<tr><td width="9%"><div>IDT</div></td>
<td width="10%"><span>
<input type="text" id="ID tanque1" size="15" />
</span></td>
<td colspan="2"><div><span>Tipo de tanque </span></div></td>
<td colspan="2" ><div>Par&aacute;metros espec&iacute;ficos</div></td></tr>
<tr><td><span>Producto </span></td>
<td><input type="text" id="Prod tanque1" size="15" /></td>
<td width="18%" rowspan="3"><div>
<select id="Tipotanque" onchange="cambiarteito()">
<option value="Teitofixo">Teito fixo</option>
<option value="Teitoflotante">Teito flotante</option>
</select></div></td>
<td width="20%" rowspan="3"><div>
<select id="Subtipotanque" onchange="parametrostanques()">
<option value="horizontal">Tanque horizontal</option>
<option value="vertical">Tanque vertical</option>
</select></div></td>
<td width="15%"><div id="1A"></div></td>
<td width="28%"><div id="1B"></div></td> </tr>
<tr> <td><span>Densidade </span></td>
<td><span> <input type="text" id="Dens_tq1" size="8" /></span></td>
<td><div id="2A" >Calefactado</div></td>
<td><div id="2B"><select id="Horiz_calef">
<option>Si</option>
<option >No</option></select></div></td></tr>
<tr><td><span>Di&aacute;metro</span></td>
<td><span><input type="text" id="Diametro_tk1" size="10" /> m</span></td>
<td><div id="3A"></div></td>
<td> <div div id="3B"></div></td></tr>
<tr><td><div>Dimensi&oacute;n caracter&iacute;stica </div></td>
<td><span><input type="text" id="Dimcaract_tk1" size="10" /> m </span></td>
<td colspan="2" rowspan="3" </td>
<td><div id="4A">Subterr&aacute;neo</div></td>
<td><div id="4B">
<select id="Tk subterr&aacute;neo">
<option>Si</option>
<option >No</option> </select> </div></td></tr>
<tr> <td><span>Volume &uacute;til </span></td>
<td><span><input type="text" id="Vol_util1" size="10" /></span></td>
<td><div id="5A"></div></td>
<td> <div id="5B"></div></td></tr>
<tr> <td><div>Rotaci&oacute;ns</div></td>
<td><input type="text" id="Rotaci&oacute;ns1" size="15" /></td>
<td><div id="6A"></div></td>
<td><div div id="6B"></div></td></tr>
<tr> <td height="37" colspan="6"><span></span><span></span></td></tr>
</table></form></body></html>
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 22:02.