![[Ir al menú de PHP]](../im_base/memorias.png)
![[Regresar al menú principal]](../im_base/logo3.png){kind=logo}
| Campos de selección dependientes |
El problema
De vez en cuando, recibo algunos mensajes de mis visitantes. Algunos me consultan cosas –sospecho que creen que se algo de esto– y casi siempre me obligan a estudiar. Otros tienen la generosidad de tratar de levantarme la autoestima y algunos otros –pocos, la gente es generosa– pues me llaman de todo menos guapo. ;-)El evento onChange
Como de JavaScript se lo mismo que de búlgaro, tuve que empezar a especular sobre la posibilidad de hacer algo con el valor elegido en la opción. Descubrí -puro ensayo y error y búsquedas desesperadas en la gües- que si incluía onChange dentro de una etiqueta select podía llamar a una función Jovascript cuando cambiara el valor del select.Modificar una IFRAME
El problema estaba en ver la forma de cambiar el contenido de la IFRAME que debería contener la lista de Comunidades autónomas. Por el momento contenía la famosa página en blanco pero ahí había que incluir un nuevo select.Modificar valores de campos de un formulario
Tal como te comento a la derecha, tuve que incluir un formulario en el documento principal para recoger (todos juntos y en unión) los valores de las diferentes opciones de selección.La opción radio
En este caso, incluí en la capa correspondiente las etiquetas <input» de cada estado civil posible (olvidé incluir las últimas reformas legislativas) pero estaba en las mismas. Ahora quería que al elegir una opción cambiara la imagen y además los valores elegidos tendría que incluirlos en los value del macroformulario del que te hablo más arriba.Las casillas de verificación
Después de muchos fracasos encontré esta solución ¿un poco chapucilla, verdad?.El select MULTIPLE
Antes de que me olvide. En las opciones anteriores no necesité meter ni checkbox, ni radio dentro de etiquetas form. Aquí tuve que hacerlo. Fué la única manera de lograr que funcionara. ¡Ojo!.onMouseOut
El truco que encontré para actualizar el formulario oculto al modificar el textarea fue este evento. Se ejecuta cada vez que el ratón sale de él. De esa forma, transfiere al formulario el contenido de este area cada vez que dejamos de escribir y nos vamos a otro.El botón de enviar
No presenta mayores complicaciones. Es un input type button (también podría ser una imagen que lleva asociado el evento onClick que lo que hace es submit() (enviar) el formulario que se indica en toda la ristra que precede al submit.
El resultado final del experimento
| Select dependiente |
Los primeros pasos
Empecé a pensar que el alma del asunto estaba en lograr modificar solo una parte de la página al ir eligiendo en las diferentes opciones de selección. Buscando... (lo cierto es que jamás los había usado) me encontré con etiqueta HTML IFRAME y me puse a enterarme un poco del asunto. Vi que la sintaxis era de este estilo:| Maqueta previa |
| No transparente en IE | Transparente |
El primer select
Tengo una tabla de países –no se si completa del todo– con un único campo. Así que decidí utilizarla para incluir una lista de paises en el primer select. Cambié el src del primer select y lo sustituí por una página en la que leía la lista de paises completa y la incluía en dentro del select de un formulario.
<
....
... el rollete de conexion al servidor MySQL, etc. etc.
$tabla="paises";
$resultado= mysql_query("SELECT* FROM $tabla ORDER BY Nombres",$conexion);
?>
<form name="a1">
<select name="paises" onchange="cambia1(this.value);">
<option value="">
<?
while ($registro = mysql_fetch_row($resultado)){
print "<option value='".$registro[0]."'>".$registro[0]."</option>\n";
}
print "</select>";
print "</form>";
mysql_close();
?>
<script>
function cambia1(valor){
var pagina="selector.php?op=comunidad&valor="+valor;
window.parent.frames["iframe_comunidad"].location=pagina;
window.parent.frames["iframe_provincia"].location="blanco_trans.php";
window.parent.frames["iframe_municipio"].location="blanco_trans.php";
window.parent.frames["iframe_localidad"].location="blanco_trans.php";
}
<script>
Todo muy bonito pero...
Algo estaba fallando. Se entendía que los valores elegidos en cada una de las opciones –Iframe p'arriba Iframe p'abajo– habría que enviarlos juntos a alguna parte y claro... en el trasiego se perdían. La solución fué incluir un formulario –en la página principal– con campos ocultos para que no se vean... ;-) que en principio tuviera todos los values en blanco.
<form name="resultados_finales" method="post"
action="selector.php?op=resultados">
<input type="hidden" name="f_pais" value="">
<input type="hidden" name="f_comunidad" value="">
<input type="hidden" name="f_provincia" value="">
<input type="hidden" name="f_municipio" value="">
<input type="hidden" name="f_localidad" value="">
<input type="hidden" name="f_estado" value="">
<input type="hidden" name="f_idioma" value="">
<input type="hidden" name="f_gustos" value="">
<input type="hidden" name="f_historia" value="">
</form>
function cambia1(valor){
.......
window.parent.document.forms.resultados_finales.f_pais.value=valor;
.....
}
De oca en oca...
Superado el trance amargo de hacer el primer select los demás fueron relativamente fáciles. Al hacer el onChange en paises cargaba en la iframe siguiente la misma página, pero como le pasaba op=comunidades buscaba el case correspondiente en el switch y ahora consultaba una nueva tabla –la de comunidades– y cargaba su contenido en el nuevo select.La opción radio
<div id="opciones_estado">
<input type="radio" name="estado" value="soltero"
onClick="estado(this.value);">Solter@<br>
<input type="radio" name="estado" value="casado"
onClick="estado(this.value);">Casad@<br>
<input type="radio" name="estado" value="divorciado"
onClick="estado(this.value);">Divorciado@<br>
</div>
<script>
function estado(valor){
pagina="selector.php?op=estado&v="+valor;
window.frames["iframe_estado"].location =pagina;
document.forms.resultados_finales.f_estado.value=valor;
}
</script>
La casilla de verificación
<div id="opciones_idioma">
<input type="checkbox" value="castellano"
onclick="idioma(this.checked,0,this.value);">Español<BR>
<input type="checkbox" value="bulgaro"
onclick="idioma(this.checked,1,this.value);">Bulgaro<BR>
<input type="checkbox" value="armenio"
onclick="idioma(this.checked,2,this.value);">Armenio<BR>
<input type="checkbox" value="chino"
onclick="idioma(this.checked,3,this.value);">Chino
</div>
<script>
var flags_idioma= new Array();
flags_idioma[0]="*";
flags_idioma[1]="*";
flags_idioma[2]="*";
flags_idioma[3]="*";
function idioma(estado, nombre, valor){
if (estado==true){
flags_idioma[nombre]=valor;
}else{
flags_idioma[nombre]='*';
}
document.forms.resultados_finales.f_idioma.value=flags_idioma;
pagina="selector.php?op=idioma&v="+flags_idioma;
window.frames["iframe_idiomas"].location =pagina;
}
</script>
El select múltiple
<form name="gusto"> <SELECT MULTIPLE name="gustosS" SIZE=4 onChange="gustos();"> <option value="chorizo">Bocatas de jamón de Tineo</option> <option value="vino">Tintorro «Marqués del Pelleyu»</option> <option value="whisky">Whisky «Dragados Y Construcciones»</option> <option value="queso">Queso de Cabrales</option> </select> </form> <script> function gustos(valor){ var campos=window.document.forms.gusto.gustosS; var seleccionados = ""; for(var i = 0;i < campos.length;i++){ if(campos.options[i].selected == true){ seleccionados += campos.options[i].value+","; }else{ seleccionados += "*,"; } } document.forms.resultados_finales.f_gustos.value=seleccionados; pagina="selector.php?op=gustos&v="+seleccionados; window.frames["iframe_gustos"].location =pagina; } </script>
Área de texto
<textarea name="historia" rows=8 cols=45
onMouseOut="historia(this.value);">
</textarea>
<script>
function historia(valor){
document.forms.resultados_finales.f_historia.value=valor;
</script>
El botón de Enviar
<div id="enviar">
<input type="button" value="Enviar"
onclick="document.forms.resultados_finales.submit();">
</div>
