Bienvenidos a Trocitos de programación


Bienvenidos a Trocitos de programación (En construcción)
Creo este blog para hacer como un pequeño repositorio de pequeños scripts o trocitos de código que he utilizado en algún momento y pueden ser útiles para otras personas o para mi mismo en algún momento.
Aclarar que no soy ningún experto en la materia ni mucho menos y que tampoco no todos los códigos estarán hechos por mi en su totalidad sino que igual en su momento busque una solución y encontre la solución completa o parcial.
(por esto pido comprensión si alguna vez alguien ve algun trocito que él mismo puso en algun foro ya que no puedo tener las fuentes de todas las cosas que he sacado de internet, si se diera el caso, el propietario que deje un comentario publicando su desaprobación de que yo publique ese contenido junto con un enlace al lugar en el que él lo publico, y mis más sinceras disculpas).

lunes, 16 de enero de 2012

Ocultar y mostrar div con javascript

Con este trocito de código podemos ocultar o mostrar un div u otro dependiendo el valor seleccionado en un select option de HTML, simplemente cambia la propiedad CSS del div(para ver este ejemplo usando JQuery visita esta entrada):
Ejemplo:
Nuestro numero de cuenta es: 000000000000000000000

Codigo HTML:

<div>
      <div>
           <SELECT NAME="pago" onChange="pagoOnChange(this)">
              <OPTION VALUE="transferencia">Transferéncia</OPTION>
              <OPTION VALUE="tarjeta">Pago con tarjeta</OPTION> 
           </SELECT>
      </div>
      <div id="nCuenta" style="display:none;">
           Nuestro numero de cuenta es: 000000000000000000000
      </div>
      <div id="nTargeta" style="display:;">
           <br>
           Numero*
           <br>
           <input type='text' name='nTarjeta'size='20' maxLength='60'>
           <br><br>
           Titular*
           <br>
           <input type='text' name='titularTarjeta'size='20' maxLength='60'>
           <br><br>
           Numero de seguridad*
           <input type='text' name='numeroSeguridad'size='3' maxLength='3'>
      </div>
</div>
Codigo Javascript:

function pagoOnChange(sel) {
      if (sel.value=="transferencia"){
           divC = document.getElementById("nCuenta");
           divC.style.display = "";

           divT = document.getElementById("nTargeta");
           divT.style.display = "none";

      }else{

           divC = document.getElementById("nCuenta");
           divC.style.display="none";

           divT = document.getElementById("nTargeta");
           divT.style.display = "";
      }
}
Bueno ahí lo dejo, seguro que hay alguna forma mejor o más optima pero yo lo resolví así, si alguien quiere poner un comentario explicando una forma mejor que no se vea cohibido puesto que la función de este blog es ayudar y mejorar en la medida de lo posible.

Un saludo.

17 comentarios:

  1. muchas gracias! tu ejemplo me sirvio mucho :)

    ResponderEliminar
  2. Está excelente el ejemplo, Gracias!

    ResponderEliminar
  3. Muchas Gracias de VERDAD tenia mas de 4 días tratando de hacer esto y no encontraba un buen ejemplo, gracias :)

    ResponderEliminar
  4. Muy bueno y sencillo. Muchas gracias!!!

    ResponderEliminar
  5. esta muy bien tu ejemplo, me sirvio de mucho.

    ResponderEliminar
  6. disculpa lo que pasa que tu codigo no esta funcionando soy nuevo en eto puedes ayudarmwe

    ResponderEliminar
    Respuestas
    1. Perdona la demora, ¿que és lo que no te funciona?. Si lo copias "tal cual" deberia funcionar, es más, encima del código tienes el ejemplo funcionando...

      Eliminar
  7. gracias amigo muy buen aporte, pero necesito tu ayuda, lo que pasa es que con el primer select list muestro otros select list dependiendo de la opción seleccionada del primero, de modo que con el segundo select list tenga que mostrar otro div de acuerdo a la opcion que seleccionen enel segundo select list, con tu codigo ya puedo mostrar el segundo select list pero no puedo adarptar la funcion para que con el select list que muestro, pueda mostrar otro div, agradeceria tu ayuda

    ResponderEliminar
  8. No, para hacer eso deberias crear una función para cada select ya que necesitas evaluar cada una de las opciones del nuevo select, o, en la función, primero hacer una serie de if (o switch) primero para identificar el select que estas tocando, y luego dentro dentro de cada uno de ellos otro If (o switch) para identificar el valor que estas seleccionando.
    Lo que si que se podria generalizar es lo que oculta uno y muestra otro creando una funcion donde le tienes que pasar por parámetro el que quieres mostrar, y el que quieres ocultar (o como es en tu caso, un array con los que quieres ocultar).

    Un saludo

    ResponderEliminar
  9. Gracias! el ejemplo esta muy ensillo y fácil de entender me ayudo mucho

    ResponderEliminar
  10. Excelente aportacion amigo ejemplo practico, secillo y sobre todo muy funcional.

    ResponderEliminar
  11. Muy bueno el ejemplo, pero una vez que seleccionas Pago con tarjeta, y volves a cargar la pagina, queda seleccionada la ultima opcion pero sin desplegar la misma.

    ResponderEliminar
    Respuestas
    1. Pue si, así es, el javascript es muy caprichoso y le pican cosas como esta, cosas parecidas sucenden cuando juegas con "Atrás" y "Siguiente" del navegador.
      Para prevenir esto que comentas habría que jugar con los eventos de la pagina y comprobar que elemento hay seleccionado o setearlo al primero, lo más común suele ser hacerlo en el onLoad del document

      Eliminar