Comunidad de diseño web y desarrollo en internet

Onchange Cambiar campos de formulario dinámicamente

Citar            
MensajeEscrito el 11 Jun 2009 10:20 am
Hola,
tengo un formulario en el que según la categoría que escoja el usuario, tiene que mostrar unas subcategorías u otras.
Es decir, el usuario puede seleccionar en una lista "Hotel", "Restaurante", "Termalismo"
Si escoje "Hotel", la lista de la subcategoría debe tomar los valores "1 estrella" "2 estrellas" o "3 estrellas"
Si escoje "Restaurante", la lista de la subcategoría debe tomar los valores "1 tenedor" "2 tenedores" "3 tenedores"
Si escoje "Termalismo", la lista de la subcategoría debe tomar los valores "Gratis" "De pago"

Pero algo no funciona es como si no entrara en la función que asigno a onChange. A continuación os pongo el código para ver qué se os ocurre:

Código PHP :

<form  name="formulario" method="post" action="procesar_marca.php" onsubmit="return validar()">
  
<div id="nombre">
    <table><tr><td>
    <label>Nombre:</label>
    <label><input name="nombre" type="text" size="50"  /></label>
    </td></tr><tr><td>   
    <label>Tipo:</label>
    <label><select name="tipo" onchange="getcategoria();return false">
          <option selected>Hotel</option>
          <option>Pension</option>
          <option>Casa Rural</option>
        <option>Museo</option>
          <option>Arquitectura</option>
          <option>Otros espacios</option>
          <option>Tiendas de ropa</option>
          <option>Bares y cafeterias</option>
          <option>Pubs</option>
          <option>Restaurante</option>
          <option>Termalismo</option>
        </select>
    </label>
    </td></tr></table>
</div>
<div id="hotel" style="display:block;">
    <label>Categoria:</label>
    <label><select name="cathotel" >
          <option selected>4 Estrellas</option>
          <option>3 Estrellas</option>
          <option>2 Estrellas</option>
     <option>1 Estrella</option>
        </select>
    </label>
</div>
<div id="pension" style="display:none;">
    <label>Categoria:</label>
    <label><select name="catpension" >
          <option selected>3 Estrellas</option>
          <option>2 Estrellas</option>
     <option>1 Estrella</option>
        </select>
    </label>
</div>
<div id="casarural" style="display:none;">
    <label>Categoria:</label>
    <label><select name="catcasarural" >
          <option selected>Grupo A</option>
          <option>Grupo B</option>
     <option>Grupo C</option>
        </select>
    </label>
</div>
<div id="museo" style="display:none;">
    <label>Categoria:</label>
    <label><select name="catmuseo" >
          <option selected>Arqueol&oacute;gico</option>
          <option>Cera</option>
     <option>Tem&aacute;tico</option>
        </select>
    </label>
</div>
<div id="arquitectura" style="display:none;">
    <label>Categoria:</label>
    <label><select name="catarquitectura" >
          <option selected>Catedral</option>
          <option>Iglesia</option>
     <option>Centro Hist&oacute;rico</option>
     <option>Puente</option>
     <option>Edificio</option>
        </select>
    </label>
</div>
<div id="otrosespacios" style="display:none;">
    <label>Categoria:</label>
    <label><select name="catotrosespacios" >
          <option selected>Estatua</option>
          <option>Parque</option>
     <option>Exposici&oacute;n</option>
        </select>
    </label>
</div>
<div id="tiendasropa" style="display:none;">
    <label>Categoria:</label>
    <label><select name="cattiendasropa" >
          <option selected>Deporte</option>
          <option>Informal</option>
        </select>
    </label>
</div>
<div id="bares" style="display:none;">
    <label>Categoria:</label>
    <label><select name="catbares" >
          <option selected>Bar</option>
          <option>Cafeteria</option>
        </select>
    </label>
</div>
<div id="pub" style="display:none;">
    <label>Categoria:</label>
    <label><select name="catpub" >
          <option selected>Primera hora</option>
          <option>&Uacute;ltima hora</option>
        </select>
    </label>
</div>
<div id="restaurante" style="display:none;">
    <label>Categoria:</label>
    <label><select name="catrestaurante" >
          <option selected>3 tenedores</option>
          <option>2 tenedores</option>
     <option>1 tenedor</option>
        </select>
    </label>
</div>
<div id="termalismo" style="display:none;">
    <label>Categoria:</label>
    <label><select name="cattermalismo" >
          <option selected>Gratis</option>
          <option>Pago</option>
        </select>
    </label>
</div>
<div>
    <table><tr><td>
    <label align="top">Descripcion Breve:</label></td><td>
    <label><textarea name="descripcion"  cols="25" rows="5"></textarea></label>
    </td></tr>
    <tr><td>   
    <label>Foto cabecera</label></td><td>
    <label><input type="file" name="foto" /></label>
    </td></tr>
    <tr><td>
    <label>Descripcion:</label></td><td>
    <label><textarea name="descripcion"  cols="50" rows="19"></textarea></label>
    </td></tr>
    <tr><td>
    <label>Latitud:</label></td><td>
    <label><input type="text" name="lat"  /></label>
    </td></tr>
    <tr><td>
    <label>Longitud:</label></td><td>
    <label><input type="text" name="lng"  /></label>
    </td></tr>
    <tr><td>
   <input type="submit" name="enviar"  value="Enviar formulario" /></td><td>
        <input type="reset" name="vaciar"  value="Vaciar" />
    </td></tr>
    </table>
</div>     
</form>



Y el código javascript

Código Javascript :

<script type="text/javascript">
//<![CDATA[

function getcategoria()
{
   var categoria;
   categoria = document.getElementById('tipo');

   document.getElementById('hotel').style.display='none';
   document.getElementById('pension').style.display='none';
   document.getElementById('casarural').style.display='none';
   document.getElementById('museo').style.display='none';
   document.getElementById('arquitectura').style.display='none';
   document.getElementById('otrosespacios').style.display='none';
   document.getElementById('tiendasropa').style.display='none';
   document.getElementById('bares').style.display='none';
   document.getElementById('pub').style.display='none';
   document.getElementById('restaurante').style.display='none';
   document.getElementById('termalismo').style.display='none';

   switch(categoria)
   {
   case "Hotel":
      document.getElementById('hotel').style.display='block';      
      break;
   case "Pension":
      document.getElementById('pension').style.display='block';
      break;
   case "Casa Rural":
      document.getElementById('casarural').style.display='block';
      break;
   case "Museo":
      document.getElementById('museo').style.display='block';
      break;
   case "Arquitectura":
      document.getElementById('arquitectura').style.display='block';
      break;
   case "Otros espacios":
      document.getElementById('otrosespacios').style.display='block';
      break;
   case "Tiendas de ropa":
      document.getElementById('tiendasropa').style.display='block';
      break;
   case "Bares y cafeterias":
      document.getElementById('bares').style.display='block';
      break;
   case "Pubs":
      document.getElementById('pub').style.display='block';
      break;
   case "Restaurante":
      document.getElementById('restaurante').style.display='block';
      break;
   case "Termalismo":
      document.getElementById('termalismo').style.display='block';
      break;
   }
   
}
//]]>
</script>


Gracias y un saludo.

Por riestra

73 de clabLevel



 

firefox
Citar            
MensajeEscrito el 11 Jun 2009 07:48 pm
probaste si esta arrojando algun error de javascript con el control de errores de firefox ?

Por talcual

686 de clabLevel



 

Colombia

firefox
Citar            
MensajeEscrito el 18 Jun 2009 07:36 am
has con el metodo onBlur mejor

Saludos

Por alfcm

8 de clabLevel



 

firefox
Citar            
MensajeEscrito el 18 Jun 2009 06:35 pm
con ambos deberia funcionar mas bn revisa en firefox y el control de errores a ver si esta arrojando algun error

Por talcual

686 de clabLevel



 

Colombia

firefox
Citar            
MensajeEscrito el 06 Feb 2010 06:33 am

Código HTML :

<form  name="formulario" method="post" action="procesar_marca.php" onsubmit="return validar()"> 
   
<div id="nombre"> 
    <table><tr><td> 
    <label>Nombre:</label> 
    <label><input name="nombre" type="text" size="50"  /></label> 
    </td></tr><tr><td>    
    <label>Tipo:</label> 
    <label><select name="tipo" id="tipo" onChange="javascript:getcategoria();return false"> 
          <option selected>Hotel</option> 
          <option>Pension</option> 
          <option>Casa Rural</option> 
        <option>Museo</option> 
          <option>Arquitectura</option> 
          <option>Otros espacios</option> 
          <option>Tiendas de ropa</option> 
          <option>Bares y cafeterias</option> 
          <option>Pubs</option> 
          <option>Restaurante</option> 
          <option>Termalismo</option> 
        </select> 
    </label> 
    </td></tr></table> 
</div> 
<div id="hotel" style="display:block;"> 
    <label>Categoria:</label> 
    <label><select name="cathotel"> 
          <option selected>4 Estrellas</option> 
          <option>3 Estrellas</option> 
          <option>2 Estrellas</option> 
     <option>1 Estrella</option> 
        </select> 
    </label> 
</div> 
<div id="pension" style="display:none;"> 
    <label>Categoria:</label> 
    <label><select name="catpension"> 
          <option selected>3 Estrellas</option> 
          <option>2 Estrellas</option> 
     <option>1 Estrella</option> 
        </select> 
    </label> 
</div> 
<div id="casarural" style="display:none;"> 
    <label>Categoria:</label> 
    <label><select name="catcasarural" > 
          <option selected>Grupo A</option> 
          <option>Grupo B</option> 
     <option>Grupo C</option> 
        </select> 
    </label> 
</div> 
<div id="museo" style="display:none;"> 
    <label>Categoria:</label> 
    <label><select name="catmuseo" > 
          <option selected>Arqueol&oacute;gico</option> 
          <option>Cera</option> 
     <option>Tem&aacute;tico</option> 
        </select> 
    </label> 
</div> 
<div id="arquitectura" style="display:none;"> 
    <label>Categoria:</label> 
    <label><select name="catarquitectura" > 
          <option selected>Catedral</option> 
          <option>Iglesia</option> 
     <option>Centro Hist&oacute;rico</option> 
     <option>Puente</option> 
     <option>Edificio</option> 
        </select> 
    </label> 
</div> 
<div id="otrosespacios" style="display:none;"> 
    <label>Categoria:</label> 
    <label><select name="catotrosespacios" > 
          <option selected>Estatua</option> 
          <option>Parque</option> 
     <option>Exposici&oacute;n</option> 
        </select> 
    </label> 
</div> 
<div id="tiendasropa" style="display:none;"> 
    <label>Categoria:</label> 
    <label><select name="cattiendasropa" > 
          <option selected>Deporte</option> 
          <option>Informal</option> 
        </select> 
    </label> 
</div> 
<div id="bares" style="display:none;"> 
    <label>Categoria:</label> 
    <label><select name="catbares" > 
          <option selected>Bar</option> 
          <option>Cafeteria</option> 
        </select> 
    </label> 
</div> 
<div id="pub" style="display:none;"> 
    <label>Categoria:</label> 
    <label><select name="catpub" > 
          <option selected>Primera hora</option> 
          <option>&Uacute;ltima hora</option> 
        </select> 
    </label> 
</div> 
<div id="restaurante" style="display:none;"> 
    <label>Categoria:</label> 
    <label><select name="catrestaurante" > 
          <option selected>3 tenedores</option> 
          <option>2 tenedores</option> 
     <option>1 tenedor</option> 
        </select> 
    </label> 
</div> 
<div id="termalismo" style="display:none;"> 
    <label>Categoria:</label> 
    <label><select name="cattermalismo" > 
          <option selected>Gratis</option> 
          <option>Pago</option> 
        </select> 
    </label> 
</div> 
<div> 
    <table><tr><td> 
    <label align="top">Descripcion Breve:</label></td><td> 
    <label><textarea name="descripcion"  cols="25" rows="5"></textarea></label> 
    </td></tr> 
    <tr><td>    
    <label>Foto cabecera</label></td><td> 
    <label><input type="file" name="foto" /></label> 
    </td></tr> 
    <tr><td> 
    <label>Descripcion:</label></td><td> 
    <label><textarea name="descripcion"  cols="50" rows="19"></textarea></label> 
    </td></tr> 
    <tr><td> 
    <label>Latitud:</label></td><td> 
    <label><input type="text" name="lat"  /></label> 
    </td></tr> 
    <tr><td> 
    <label>Longitud:</label></td><td> 
    <label><input type="text" name="lng"  /></label> 
    </td></tr> 
    <tr><td> 
   <input type="submit" name="enviar"  value="Enviar formulario" /></td><td> 
        <input type="reset" name="vaciar"  value="Vaciar" /> 
    </td></tr> 
    </table> 
</div>      
</form> 


JavaScript:

Código Javascript :

<script type="text/javascript"> 
//<![CDATA[ 
 
function getcategoria() 
{ 
   var categoria; 
   categoria = document.getElementById('tipo').value; 
   document.getElementById('hotel').style.display='none'; 
   document.getElementById('pension').style.display='none'; 
   document.getElementById('casarural').style.display='none'; 
   document.getElementById('museo').style.display='none'; 
   document.getElementById('arquitectura').style.display='none'; 
   document.getElementById('otrosespacios').style.display='none'; 
   document.getElementById('tiendasropa').style.display='none'; 
   document.getElementById('bares').style.display='none'; 
   document.getElementById('pub').style.display='none'; 
   document.getElementById('restaurante').style.display='none'; 
   document.getElementById('termalismo').style.display='none'; 
   switch(categoria) 
   { 
   case "Hotel": 
      document.getElementById('hotel').style.display='block';       
      break; 
   case "Pension": 
      document.getElementById('pension').style.display='block'; 
      break; 
   case "Casa Rural":
      document.getElementById('casarural').style.display='block'; 
      break; 
   case "Museo": 
      document.getElementById('museo').style.display='block'; 
      break; 
   case "Arquitectura": 
      document.getElementById('arquitectura').style.display='block'; 
      break; 
   case "Otros espacios": 
      document.getElementById('otrosespacios').style.display='block'; 
      break; 
   case "Tiendas de ropa": 
      document.getElementById('tiendasropa').style.display='block'; 
      break; 
   case "Bares y cafeterias": 
      document.getElementById('bares').style.display='block'; 
      break; 
   case "Pubs": 
      document.getElementById('pub').style.display='block'; 
      break; 
   case "Restaurante": 
      document.getElementById('restaurante').style.display='block'; 
      break; 
   case "Termalismo": 
      document.getElementById('termalismo').style.display='block'; 
      break; 
   } 
    
} 
//]]> 
</script> 

Por VoRk

0 de clabLevel



 

firefox
Citar            
MensajeEscrito el 28 Jul 2010 07:50 pm
Hola espero te sea de ayuda, hice unos toques en el código y ya funciona como quieres, solo agregué la propiedad value de cada opción ( value=Hotel....etc.). coloque el this como parametro de la función getcategoria(this) más el id="tipo" en el select, quite esta asignación en el script categoria = document.getElementById('tipo') y coloque esta otra categoria = tipo.value; de resto todo igual.

aqui te copio el codigo que funciona

el script

<script type="text/javascript">
//<![CDATA[

function getcategoria(tipo)
{




var categoria;
//categoria = document.getElementById('tipo');
categoria = tipo.value;

document.getElementById('hotel').style.display='none';
document.getElementById('pension').style.display='none';
document.getElementById('casarural').style.display='none';
document.getElementById('museo').style.display='none';
document.getElementById('arquitectura').style.display='none';
document.getElementById('otrosespacios').style.display='none';
document.getElementById('tiendasropa').style.display='none';
document.getElementById('bares').style.display='none';
document.getElementById('pub').style.display='none';
document.getElementById('restaurante').style.display='none';
document.getElementById('termalismo').style.display='none';

switch(categoria)
{
case 'Hotel':
document.getElementById('hotel').style.display='block';
break;
case "Pension":
document.getElementById('pension').style.display='block';
break;
case "Casa Rural":
document.getElementById('casarural').style.display='block';
break;
case "Museo":
document.getElementById('museo').style.display='block';
break;
case "Arquitectura":
document.getElementById('arquitectura').style.display='block';
break;
case "Otros espacios":
document.getElementById('otrosespacios').style.display='block';
break;
case "Tiendas de ropa":
document.getElementById('tiendasropa').style.display='block';
break;
case "Bares y cafeterias":
document.getElementById('bares').style.display='block';
break;
case "Pubs":
document.getElementById('pub').style.display='block';
break;
case "Restaurante":
document.getElementById('restaurante').style.display='block';
break;
case "Termalismo":
document.getElementById('termalismo').style.display='block';
break;
}

}
//]]>
</script>


el html

<form name="formulario" method="post" action="procesar_marca.php" onsubmit="return validar()">

<div id="nombre">
<table><tr><td>
<label>Nombre:</label>
<label><input name="nombre" type="text" size="50" /></label>
</td></tr><tr><td>
<label>Tipo:</label>
<label><select name="tipo" id="tipo" onchange="getcategoria(this);">
<option selected value="Hotel">Hotel</option>
<option value="Pension">Pension</option>
<option value="Casa Rural">Casa Rural</option>
<option value="Museo">Museo</option>
<option value="Arquitectura">Arquitectura</option>
<option value="Otros espacios">Otros espacios</option>
<option value="Tiendas de ropa">Tiendas de ropa</option>
<option value="Bares y cafeterias">Bares y cafeterias</option>
<option value="Pubs">Pubs</option>
<option value="Restaurante">Restaurante</option>
<option value="Termalismo">Termalismo</option>
</select>
</label>
</td></tr></table>
</div>
<div id="hotel" style="display:block;">
<label>Categoria:</label>
<label><select name="cathotel" >
<option selected>4 Estrellas</option>
<option>3 Estrellas</option>
<option>2 Estrellas</option>
<option>1 Estrella</option>
</select>
</label>
</div>
<div id="pension" style="display:none;">
<label>Categoria:</label>
<label><select name="catpension" >
<option selected>3 Estrellas</option>
<option>2 Estrellas</option>
<option>1 Estrella</option>
</select>
</label>
</div>
<div id="casarural" style="display:none;">
<label>Categoria:</label>
<label><select name="catcasarural" >
<option selected>Grupo A</option>
<option>Grupo B</option>
<option>Grupo C</option>
</select>
</label>
</div>
<div id="museo" style="display:none;">
<label>Categoria:</label>
<label><select name="catmuseo" >
<option selected>Arqueol&oacute;gico</option>
<option>Cera</option>
<option>Tem&aacute;tico</option>
</select>
</label>
</div>
<div id="arquitectura" style="display:none;">
<label>Categoria:</label>
<label><select name="catarquitectura" >
<option selected>Catedral</option>
<option>Iglesia</option>
<option>Centro Hist&oacute;rico</option>
<option>Puente</option>
<option>Edificio</option>
</select>
</label>
</div>
<div id="otrosespacios" style="display:none;">
<label>Categoria:</label>
<label><select name="catotrosespacios" >
<option selected>Estatua</option>
<option>Parque</option>
<option>Exposici&oacute;n</option>
</select>
</label>
</div>
<div id="tiendasropa" style="display:none;">
<label>Categoria:</label>
<label><select name="cattiendasropa" >
<option selected>Deporte</option>
<option>Informal</option>
</select>
</label>
</div>
<div id="bares" style="display:none;">
<label>Categoria:</label>
<label><select name="catbares" >
<option selected>Bar</option>
<option>Cafeteria</option>
</select>
</label>
</div>
<div id="pub" style="display:none;">
<label>Categoria:</label>
<label><select name="catpub" >
<option selected>Primera hora</option>
<option>&Uacute;ltima hora</option>
</select>
</label>
</div>
<div id="restaurante" style="display:none;">
<label>Categoria:</label>
<label><select name="catrestaurante" >
<option selected>3 tenedores</option>
<option>2 tenedores</option>
<option>1 tenedor</option>
</select>
</label>
</div>
<div id="termalismo" style="display:none;">
<label>Categoria:</label>
<label><select name="cattermalismo" >
<option selected>Gratis</option>
<option>Pago</option>
</select>
</label>
</div>
<div>
<table><tr><td>
<label align="top">Descripcion Breve:</label></td><td>
<label><textarea name="descripcion" cols="25" rows="5"></textarea></label>
</td></tr>
<tr><td>
<label>Foto cabecera</label></td><td>
<label><input type="file" name="foto" /></label>
</td></tr>
<tr><td>
<label>Descripcion:</label></td><td>
<label><textarea name="descripcion" cols="50" rows="19"></textarea></label>
</td></tr>
<tr><td>
<label>Latitud:</label></td><td>
<label><input type="text" name="lat" /></label>
</td></tr>
<tr><td>
<label>Longitud:</label></td><td>
<label><input type="text" name="lng" /></label>
</td></tr>
<tr><td>
<input type="submit" name="enviar" value="Enviar formulario" /></td><td>
<input type="reset" name="vaciar" value="Vaciar" />
</td></tr>
</table>
</div>
</form>

Por RafaelJ

0 de clabLevel



 

msie7

   Página 1 de 1

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.