Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: Mr.Know en 16 Octubre 2011, 17:08 pm



Título: como puedo mostrar un div oculto al meter datos en un formulario ??
Publicado por: Mr.Know en 16 Octubre 2011, 17:08 pm
Hola, vereis os pongo un esquema de como tengo montado el formulario:

(http://img72.imageshack.us/img72/3734/esquemag.png)

Lo que llevo varios dias tratando de conseguir es que, los div del 2 al 7 estan ocultos. unicamente se muestra el div 1. Y lo que pretendo es que cuando se seleccione una opcion del SELECT del div 1, se muestre el div 2. Cuando el INPUT del div 2 se introduzca un dato se ative el div 3... y asi uno a uno...

un saludo


Título: Re: como puedo mostrar un div oculto al meter datos en un formulario ??
Publicado por: Mr. Crowley en 17 Octubre 2011, 23:55 pm
Un ejemplo sencillo, con JQuery. De aquí en adelante lo adapta para jugar con los otros divs ;)

Código
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <style type="text/css">
  3. #divPrueba{
  4. display:none;
  5. }
  6. </style>
  7. </head>
  8.  
  9. <select id="selUno">
  10. <option value="">-- Seleccione su opcion --</option>
  11. <option value="Opcion uno, hola">Opcion uno</option>
  12. <option value="Opcion dos, mundo">Opcion dos</option>
  13. <option value="Opcion tres, prueba">Opcion tres</option>
  14. </select>
  15. <div id="divPrueba">Estoy oculto</div>
  16. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
  17. $(document).ready(function(){
  18. $('#selUno').change(function(){
  19. if($('#selUno').val()==''){
  20. $('#divPrueba').css('display','none').html('Otra vez estoy oculto');
  21. }else{
  22. $('#divPrueba').css('display','block').html($(this).val());
  23. }
  24. });
  25. });
  26. </script>
  27. </body>
  28. </html>
  29.