Trocitos de programación: dependiendo select option

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).

domingo, 28 de octubre de 2012

Ocultar y mostrar div con JQuery

Con este trocito de código podemos ocultar o mostrar un div u otro dependiendo el valor seleccionado en un select option de HTML (usando JQuery, para ver esto usando solo javascript 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"){
           $("#nCuenta").show();
           $("#nTargeta").hide();

      }else{

           $("#nCuenta").hide();
           $("#nTargeta").show();

      }
}

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.

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 = "";
      }
}