mostrar div dependiendo de radiobutton

[catpaw]

Hola sigo aqui dando lata

tengo esta funcion entre el head con javascript:

Código:

<script language="JavaScript">
function habilita_div(){
if (document.fopcion.rad.value == "x_rpe"){
  document.getElementById('busqueda_rpe').style.display = "block"; 
}
</script>

y en mi codigo asi:

Código HTML:

<form name="fopcion">
Por:<br><br> 
<input type="radio" id="rad1" name="rad" value="x_rpe" onclick="habilita_div()"> RPE
<input type="radio" id="rad2" name="rad" value="x_numinv" onclick="habilita_div()"> N&uacute;m. Inventario
<input type="radio" id="rad3" name="rad" value="x_dos" onclick="habilita_div()"> Ambos
<br><br>
</form>
<div id="busqueda_rpe" style="display:none"> 
<form name="frpe" action="consulta_rpe.php" method="get" onSubmit="return valida_rpe(this.form)">
RPE: <input type="text" name="rpe" size="7" maxlength="5" onBlur="javascript:this.value=this.value.toUpperCase();" />
<input type='submit' value='Buscar' name='Buscar'>
</form>	
</div> 

y no me funciona
cuando le doy clic al radio de rpe, no me aparece el div id="busqueda_rpe"

que estoy haciendo mal???

gracias desde ya x su ayuda...

[zerokilled]

aunque no te produce error, la condicion document.fopcion.rad.value == "x_rpe" siempre evaluara a false. la razon es que rad no representa un solo radio sino todos los radios con el mismo nombre. a esto se le conoce como una coleccion de elementos HTML - objeto HTMLCollection-. ahora bien, las colecciones no tienen la propiedad value, por tanto al intentar leerlo devuelve undefined. en fin, la condificion vendria evaluando undefined == "x_pre" lo cual evidentemente es falso. tienes varias soluciones siendo la mas comoda pasar por argumento de la funcion la referencia del radio. simplemente defines un parametro en tu funcion, y en el evento onclick le agregas entre los parentesis el keyword this. luego en la funcion trabajas desde el parametro.

[catpaw]

ok, gracias por tomarse el tiempo de contestarme...

vamos por partes, no es que no entienda, es que no se casi nada de javascript

entonces:

mi condicion esta mal ya que estoy usando el name del radio y todos tienen el mismo nombre, entonces supongo que en lugar de usar el name debo usar el id???

Pero usar la id tampoco me servira porque no se tiene la propiedad value verdad?? auque mencionas que las colecciones no tienen esa propiedad (hablamos especificamente del name??) entonces el id no entraria en esa clasificacion de colecciones es correcto??? entonces si lo podria intentar con el id???
por ejemplo:

Código:

if (document.fopcion.rad1.value == "x_rpe"){

y bueno entoces me dices:

pasar por argumento de la funcion la referencia del radio. simplemente defines un parametro en tu funcion, y en el evento onclick le agregas entre los parentesis el keyword this. luego en la funcion trabajas desde el parametro

la verdad no entendi muy bien, si me puedes poner pseudocodigo te lo agracederia mucho, aunque a mi poco conocimiento de javascript seria algo como esto???

Código HTML:

<input type="radio" id="rad1" name="rad" value="x_rpe" onclick="habilita_div(this.form)"> 

pero en la funcion no se como poner eso que me dices??

Disculpame si no entendi te repito que no se de javascript por eso pregunto tanto...

[zerokilled]

el problema no es que preguntes tanto, el problema es querer hacer las cosas con los pies. quiero decir, aun te hace falta leer mucho material referente a javascript y el DOM. muchas de tus dudas se responden en la gran mayoria de los manuales. veamos...

parece que tienes una confunsion bien notable a lo que obtener la referencia de un elemento por ID o por NAME. el atributo no es quien define las propiedades que ese elemento puede tener, es otra entidad que define sus propiedades. en el caso de los elementos HTML es el DOM. NAME y ID siemplemente son dos formas de identificar un elemento pero a la misma vez tiene grandes diferencias:

• un ID lo puede tener literalmente cualquier elemento, un NAME solo algunos elementos.
• para tomar un elemento por ID se tiene que usar explicitamente el metodo getElementById, con NAME puedes usar la jerarquia definida por DOM. ejemplo, document.nombre_formulario.nombre_campo...
• un ID es unico en el documento y no se puede repetir. en contraste, un NAME puede repetirse cuantas veces quieras en el documento

simplemente lo que tienes que hacer son tres pasos:

1. cada vez que invoques tu funcion, le pasas como parametro this. o sea, dentro de los parentesis es lo unico que tienes que poner. no necesitas this.form porque dicha linea hace referencia al formulario. lo que necesitas es la referencia del radio en si, el cual se representa con this.
   
2. en la declaracion de tu funcion define el parametro. o sea,
   Código:

   function nombre_funcion(parameter){
   ...
   }
   

   de modo que parameter es una variable temporera que contendra el radio.
   
3. finalmente en tu funcion debes cambiar todas las referencias del campo por el parametro definido. es decir, en tu funcion tienes document.fopcion.rad1.value. lo marcado en rojo lo cambias por el nombre del parametro definido. en mi ejemplo, parameter.

[catpaw]

ok, bueno tenia esto:

Código HTML:

<form name="fopcion">
 Por:<br><br> 
<input type="radio" id="rad1" name="rad" value="x_rpe" onclick="habilita_div()"> RPE
... mas input's
</form>

<div id="busqueda_rpe" style="display:none">
texto...
</div> 

y despues el script:

Código:

<script language="JavaScript">
function habilita_div(){
document.getElementById('busqueda_rpe').style.display="block";
</script>

y no funciona... despues esto:

Código HTML:

<form name="fopcion">
 Por:<br><br> 
<input type="radio" id="rad1" name="rad" value="x_rpe" onclick="habilita_div(this.)"> RPE
... mas input's
</form>

<div id="busqueda_rpe" style="display:none">
texto...
</div> 

y el script:

Código:

<script language="JavaScript">
  function habilita_div(valor){
      if (valor.value == "x_rpe"){
         document.getElementById('busqueda_rpe').style.display="block";
      }	
</script>

tampoco funciona... se que esta mal mi sintaxis pero bueno un poco de codigo de ejemplo no me vendria mal, llevo todo el dia programando esto y otras cossas y ya estoy ciclada

Gracias...

[zerokilled]

en ambos codigos te falta cerrar el cuerpo de la funcion. es decir, al final te falta una llave de cierre. en el segundo codigo tienes un caracter de mas, el punto.

[catpaw]

ok, gracias, definitivamente ayer estaba tan estresada que ya ni veia algo tan obvio y decidi por dejarlo, y hoy despues de corregir eso que me observaste zerokilled, salio todo a la primera...

Gracias por tenerme paciencia XD

Aqui dejo mi codigo:

Código HTML:

<form name="fopcion">
Por:<br><br> 
<input type="radio" id="rad1" name="rad" value="x_rpe" onclick="habilita_rpe()"> RPE
<input type="radio" id="rad2" name="rad" value="x_numinv" onclick="habilita_numinv()"> N&uacute;m. Inventario
<input type="radio" id="rad3" name="rad" value="x_dos" onclick="habilita_dos()"> Ambos
<br><br>
</form>

<div id="busqueda_rpe" style="display:none">
 TEXTO...
</div>
<div id="busqueda_numinv" style="display:none">
 TEXTO...
</div>
<div id="busqueda_dos" style="display:none">
 TEXTO...
</div> 

y el script:

Código:

<script language="JavaScript">
function habilita_rpe(){
  document.getElementById('busqueda_rpe').style.display='block';
  document.getElementById('busqueda_numinv').style.display='none';
  document.getElementById('busqueda_dos').style.display='none';  	
}
function habilita_numinv(){
 document.getElementById('busqueda_rpe').style.display='none';
 document.getElementById('busqueda_numinv').style.display='block';
 document.getElementById('busqueda_dos').style.display='none';  	
}
function habilita_dos(){
 document.getElementById('busqueda_rpe').style.display='none';
 document.getElementById('busqueda_numinv').style.display='none';
 document.getElementById('busqueda_dos').style.display='block';  	
}
</script>