#javascript: ocultar/mostrar un #div

Fuente: http://foros.tresuvesdobles.com/index.php?showtopic=1021

Para poner texto oculto que se muestra al pulsar un link y se vuelve a ocultar al pulsar otra vez:

1. Copia este codigo a alguna parte de la pagina (como, por ejemplo, entre las etiquetas <head> y </head>).

 language="javascript" type="text/javascript">
        function muestra(nombrediv) {
                if(document.getElementById(nombrediv).style.display == '') {
                                document.getElementById(nombrediv).style.display = 'none';
                } else {
                                document.getElementById(nombrediv).style.display = '';
                }
        }

2. Usa el siguiente codigo para el link:

div onClick="javascript:muestra('tu div')">mostrar/ocultar</div>

 

div style=display:none id=“NOMBRE DEL DIV”>  Y PON AQUI EL TEXTO OCULTO

Si quieres que el texto se muestre al principio y se oculte al pulsar el link, borra la parte ‘style=”display:none”‘ del <div>.

#javascript #getElementById vs #select by librosweb.es

Fuente: http://librosweb.es/javascript/capitulo_7/utilidades_basicas_para_formularios.html

Las listas desplegables (<select>) son los elementos en los que es más difícil obtener su valor. Si se dispone de una lista desplegable como la siguiente:

<select id="opciones" name="opciones">
  <option value="1">Primer valor</option>
  <option value="2">Segundo valor</option>
  <option value="3">Tercer valor</option>
  <option value="4">Cuarto valor</option>
</select>

En general, lo que se requiere es obtener el valor del atributo value de la opción (<option>) seleccionada por el usuario. Obtener este valor no es sencillo, ya que se deben realizar una serie de pasos. Además, para obtener el valor seleccionado, deben utilizarse las siguientes propiedades:

  • options, es un array creado automáticamente por el navegador para cada lista desplegable y que contiene la referencia a todas las opciones de esa lista. De esta forma, la primera opción de una lista se puede obtener mediante document.getElementById("id_de_la_lista").options[0].
  • selectedIndex, cuando el usuario selecciona una opción, el navegador actualiza automáticamente el valor de esta propiedad, que guarda el índice de la opción seleccionada. El índice hace referencia al arrayoptions creado automáticamente por el navegador para cada lista.
// Obtener la referencia a la lista
var lista = document.getElementById("opciones");
 
// Obtener el índice de la opción que se ha seleccionado
var indiceSeleccionado = lista.selectedIndex;
// Con el índice y el array "options", obtener la opción seleccionada
var opcionSeleccionada = lista.options[indiceSeleccionado];
 
// Obtener el valor y el texto de la opción seleccionada
var textoSeleccionado = opcionSeleccionada.text;
var valorSeleccionado = opcionSeleccionada.value;
 
alert("Opción seleccionada: " + textoSeleccionado + "\n Valor de la opción: " + valorSeleccionado);

Como se ha visto, para obtener el valor del atributo value correspondiente a la opción seleccionada por el usuario, es necesario realizar varios pasos. No obstante, normalmente se abrevian todos los pasos necesarios en una única instrucción:

var lista = document.getElementById("opciones");
 
// Obtener el valor de la opción seleccionada
var valorSeleccionado = lista.options[lista.selectedIndex].value;
 
// Obtener el texto que muestra la opción seleccionada
var valorSeleccionado = lista.options[lista.selectedIndex].text;

Lo más importante es no confundir el valor de la propiedad selectedIndex con el valor correspondiente a la propiedad value de la opción seleccionada. En el ejemplo anterior, la primera opción tiene un value igual a 1. Sin embargo, si se selecciona esta opción, el valor de selectedIndex será 0, ya que es la primera opción del array options (y los arrays empiezan a contar los elementos en el número 0).

#javascript: interaccion de #div y objetos de un form con un checkbox gracias a #getElementById

Tipico tipiquisisisimo formulario donde tenemos una casilla de verificación o checkbox y queremos que si esta activado o no pasen cosas mágicas a nuestro alrededor … vamos, que se muestren u oculten objetos, divs, de tó

Por un lado tenemos el check al cual le agregamos la propiedad onchange tal que asi (madre mia cuanta informacion, verdad?)

<input name="checkbox" type="checkbox" id="checkbox" onchange="javascript:hazalgo();" value="1" />

y por otro lado la funcion javascript

<script>
function hazalgo() {
	if(document.getElementById('checkbox').checked){
		objeto1 = document.getElementById('c2');
		objeto1.style.display='none';
		objeto2 = document.getElementById('cuota');
		objeto2.value='30';
	}else{
		objeto1 = document.getElementById('c2');
		objeto1.style.display='';
		objeto2 = document.getElementById('cuota');
		objeto2.value='20';
	}
	//
	//alert(' - '+document.getElementById('checkbox').value);
}
</script>    

Mother mine esto parece el algoritmo de hal 9000 verdad? bien, como veis en el if comprobamos si esta marcado o no el check. Si esta marcado ocultamos el div c2 y en la caja de texto “cuota” insertamos el valos 30 y si el check no esta marcado pues mostramos el div c2 y el inputbox cuota toma el valor 20

Despues de ver este laborioso y complicado ejemplo os preguntais como puede ser que no este trabajando en la NASA verdad? … la respuesta es facil, hay que hacer un psicotecnico

Espero haberle sido de ayuda a alguien … a una persona seguro, a mi que escribo este articulo para acordarme de lo que hago, que ultimamente soy como el protagonista de Memento