Activar o no un input text con un input radio

Rafael · #1 (**permalink**) 04/11/2012, 01:09

Hola.

Tengo un formulario

Código HTML:

Ver original<input type="radio" name="Escojer" value="Si">
<input type="radio" name="Escojer" value="No">
 
<input type="Text" name="SI">
<select name="No">

Necesito que si uno selecciona el pimer radio (SI), se active o cambie de color el input de texto, y si selecciono (NO) se prenda o cambie de color el select.

Tengo esta opción con un checkbox

Código HTML:

Ver originalfunction toggle(chkbox, group) { 
    var visSetting = (chkbox.checked) ? "visible" : "hidden"; 
    document.getElementById(group).style.visibility = visSetting; 
} 
function swap(radBtn, group) { 
    var modemsVisSetting = (group == "modems") ? ((radBtn.checked) ? "" : "none") : "none"; 
    document.getElementById("modems").style.display = modemsVisSetting; 
} 
</script> 
---
<form> 
<input type="checkbox" name="monitor" onclick="toggle(this, 'myGroup')" />Monitor
<span id="myGroup">
  Contenido
</span>

Pero no me funciona con checkbox, no con los radios. ¿Un tip porfa?

TAJNG · #2 (**permalink**) 04/11/2012, 02:05

Tu problemática se parece un poco a la que expuse yo en este hilo:
http://www.forosdelweb.com/f13/manejar-numeros-argumento-funcion-1021147/

La verdad tengo prisa, en otro momento te hubiera explicado un poco mejor, pero la idea es que al detectar cambio de estado (onChange), es decir de activado a desactivado, de seleccionado a des-seleccionado, de 1 a 0, o como lo quiera ver. El javascript debe hacer "algo" en el elemento que te interese, en este caso tu "algo" es habilitar y deshabilitar el input/select; esto se hace con la propiedad disabled que puede ser true o false.

Te dejo un ejemplo funcional de lo que requieres, la clave son los ID, es muy útil manejar así las páginas, te lo recomiendo y espero te ayude. Las claves del código son el onchange y las ID.

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" 
"http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
      <title>Activa y desactiva
      </title>
    <script type="text/javascript">
      function activainput() {
        document.getElementById("js_no").disabled = true; //DESHABILITA el select (id="js_no")
        document.getElementById("js_si").disabled = false; //HABILITA el input (id="js_si")
      }
      function activaselect() {
        document.getElementById("js_no").disabled = false; //HABILITA el select
        document.getElementById("js_si").disabled = true; //DESHABILITA el input
      }
    </script> 
  </head>
  <body>
    <div>
      <form name="formulario" action="#">
        <input type="radio" name="Escojer" value="Si" onchange="activainput();">Si
        <input type="Text" name="SI" id="js_si">
        <br><br>
        <input type="radio" name="Escojer" value="No" onchange="activaselect();">No
        <select name="No" id="js_no">
          <option value="no">No</option>
        </select>
      </form>
    </div>
  </body>
</html>

Espero haberte ayudado, un saludo.-

PD: como recomendacion no te bases en códigos solo para cambiarlos, es mejor hacerlos uno porque las necesidades de otros no siempre son las mismas que las nuestras.

Rafael · #3 (**permalink**) 04/11/2012, 18:42

Mil gracias.
El código lo uso para aprender un poquito más cada día.

Rafael · #4 (**permalink**) 05/11/2012, 09:23

Retomo el tema.

Acabé utilizando el evento onclick, en lugar de onchange, ya que el maravilloso explorer, respondía al segundo click, así que a partir de ahí prendía los campos al revés.

Una pregunta. Si quiero que se activen 2 eventos, ¿tengo que ponerlo así?:

function activainput() {
document.getElementById("js_no").disabled = true;
document.getElementById("js_no").style.visibility = hidden;

o se puede algo como
function activainput() {
document.getElementById("js_no").disabled = true && style.visibility = hidden;

zerokilled · #5 (**permalink**) 05/11/2012, 11:35

buenas...

@rafael. la segunda alternativa no te funcionaría porque javascript pensará que style es una variable pero no está definida por ningún lado. por lo visto lo que tu quieres hacer es acortar la cantidad de código a escribir. en ese caso puedes almacenar en una variable la referencia del elemento y a partir de esa variable accesar a las propiedades.

Código:

var elem = document.getElementById("js_no");
elem.disabled = true;
elem.style.visibility = "hidden";

Rafael · #6 (**permalink**) 08/11/2012, 12:13

Oooooohhhh.

Mil cracias.

Estaba exlorando esta versión

Código Javascript:

Ver originalfunction unhide(divID) {
 var item = document.getElementById(divID);
 if (item) {
 item.className=(item.className=='NoEstoy')?'unhidden':'SiEstoy';
 }
 }

Y tengo algunas dudas

¿divID es parte del DOM? ¿y la palabra unhidden?

Y esta forma de poner el signo de interrogación es algo parecido a un eval?
?'unhidden':

Edito. unhidden al parecer no lo es, así que no estoy seguro contra qué cosa evalua esto.

furoya · #7 (**permalink**) 08/11/2012, 14:08

Hola Rafael. Todo esto está en los tutoriales, pero hay algo que es totalmente cierto: la mayoría de los manuales están pensados para quien tiene idea de programación. Si vienen de otros rubros no siempre se entiende la lógica.

Te traduzco.

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">

<script type="text/javascript">

/* ÉSTA ES LA FUNCIÓN QUE SE DISPARA CON EL CLICK.
divID ES EL VALOR PASADO DENTRO DE LA FUNCIÓN, QUE ES IGUAL AL id DEL div 
CLICKEADO (EN ESTE CASO: "algunDiv") */
function unhide(divID) {	alert("divID= "+ divID) //para confirmar

/* CREÁS LA VARIABLE item QUE REFERENCIA AL "DOCUMENTO 
QUE TIENE UN ELEMENTO CON UN id QUE SEA IGUAL AL VALOR QUE LE PASARON 
A divID " */
 var item = document.getElementById(divID);

/* AHORA UNA CONDICIÓN: "SI ESA VARIABLE item EXISTE 
(QUE REALMENTE APARECIÓ EN EL DOCUMENTO UN ELEMENTO CON id IGUAL 
AL VALOR QUE LE PASARON A divID) ", SE EJECUTA LO QUE HAY ENTRE LAS LLAVES 
PARA if. SI NO HUBIESE APARECIDO, NO SE HACÍA NADA */
 if (item) {

/* A item (QUE ERA EL ELEMENTO DENTRO DEL DOCUMENTO 
QUE TENÍA EL id COMO LE MANDARON A divID) SE LE ASIGNA UNA class 
SEGÚN OTRA CONDICIÓN:
SI item (ADEMÁS DE TODO) TIENE POR NOMBRE DE class "NoEstoy", 
ENTONCES SE LA CAMBIA POR "unhidden", EN CUALQUIER OTRO CASO 
(SI NO TIENE, O TIENE OTRA) SE LE CAMBIA POR "SiEstoy" */
 item.className=(item.className=='NoEstoy')?'unhidden':'SiEstoy';
 }

	alert("item.className= "+item.className) //para confirmar
}
</script>

</head>
<body>
<div onclick="unhide(this.id)" class="NoEstoy" id="algunDiv">Foros del Web.</div>
</body>
</html>

emprear · #8 (**permalink**) 08/11/2012, 16:05

al la muy buena explicación de @furoya, te agrego

Cita:

Y esta forma de poner el signo de interrogación es algo parecido a un eval?

A la expresión de esa línea se la conoce como operador ternario, la sintásis es

condición ? "resultado si se cumple" : "resultado si no se cumple";

Es una forma abreviada de hacer un condicional, ejemplo

var a = 3;
if (a == 3){
alert('negro');
}else{
alert('rojo');
}

utilizando el o. ternario
var a = 3;
(a == 3)? 'negro': 'rojo';

En expresiones más complejas puede no resultar tan atractivo.
Este artículo extiende más el concepto, uso y rendimiento comparado con tras construcciones para establecer condiciones

http://www.etnassoft.com/2011/04/01/...io-javascript/

SAludos

Rafael · #9 (**permalink**) 09/11/2012, 08:51

¡Mil gracias por las explicaciones (y la paciencia))!

Supongo que "negro" y "rojo", (no en este ejemplo), a su vez pueden ser funciones también, no sólo cadenas de texto.

emprear · #10 (**permalink**) 09/11/2012, 09:17

Cita:

Iniciado por Rafael

¡Mil gracias por las explicaciones (y la paciencia))!

Supongo que "negro" y "rojo", (no en este ejemplo), a su vez pueden ser funciones también, no sólo cadenas de texto.

Si, exactamente, 2 funciones ó una misma función con diferentes parámetros, ej:

Código Javascript:

Ver originalfunction m_o(cdv) {
var e = document.getElementById(cdv);
e.style.display =(e.style.display=="block")?cTxt(cdv,tb,'none'):cTxt(cdv,tn,'block');
}

Saludos

Rafael · #11 (**permalink**) 09/11/2012, 17:18

Ok. Voy a practicar un poco