Foros del Web » Programando para Internet » Javascript »

función para activar/desactivar radio butons e imágenes asociadas

 Estas en el tema de función para activar/desactivar radio butons e imágenes asociadas en el foro de Javascript en Foros del Web. Tengo creada la siguiente esctructura con HTML: o Fecha concreta <inpu type=text> <img> o Posterior a... <inpu type=text> <img> o Anterior a... <inpu type=text> <img> ...
  #1 (permalink)  
Antiguo 12/04/2006, 03:03
 
Fecha de Ingreso: mayo-2005
Mensajes: 510
Antigüedad: 19 años
Puntos: 1
función para activar/desactivar radio butons e imágenes asociadas
Tengo creada la siguiente esctructura con HTML:

o Fecha concreta
<inpu type=text> <img>
o Posterior a...
<inpu type=text> <img>
o Anterior a...
<inpu type=text> <img>
o Entre...
<inpu type=text> <img>
y...
<inpu type=text> <img>

Las imágenes son dibujitos de un calendario. Al pinchar sobre ellas se abre una ventana JS para seleccionar una fecha, la cual, al pinchar sobre ella, se introduce en el input type=text. Los circulitos de la izquierda son radio buttons.

He querido dar una funcionalidad adicional con JS, q es la siguiente:
Al pinchar sobre cada uno de los radio buttons, las imágenes no asociadas a el se cambian por otra imagen (la misma pero con mas baja densidad, dando apariencia de imagen deshabilitada), y los inputs no asociados a el se deshabilitan. El cursor se sitúa en el input asociado.
Al pinchar sobre cada una de las imágenes el resto de imágenes se cambian por la imagen de menor densidad, su radio buton asociado se cambia a checked y el resto de radio buttons se cambian a checked=false.
Pero no terminan de funcionar del todo mis funciones!! En su día me ayudó ludovico2000 a crear la función (Muchas gracias!!!), pero ahora he retocado alguna cosa y la he fastidiado...

Dejo aquí el código por si alguien puede echarle un vistazo y encontrar qué falla. El error es q en la función gestionarImagenes(img), q de vez en cuando (no sigue una regla fija) al pinchar sobre una imagen, las demás imágenes desaparecen, pero no sé a qué es debido.

Muchas gracias!

--> El código es muy largo pero muy repetitivo, con ver la cuarta parte de todo es suficiente!!

Creación HTML:

Código HTML:
<table border="0px"><tr><td>
<input type=radio name="tipofecha" id="rbuno" value="1" onclick="gestionarRadioButton(this)" checked="true">Día concreto ... <br><input id="fecha1" name="fecha1" type="text"><a href="javascript:NewCal('fecha1','ddmmyyyy')"><img id="uno" src="../img/cal.gif" onClick="gestionarImagenes(this)"></a><br>
<input type=radio name="tipofecha" id="rbdos" value="2" onclick="gestionarRadioButton(this)">Posterior a ... <br><input id="fecha2" name="fecha2" type="text" disabled><a href="javascript:NewCal('fecha2','ddmmyyyy')"><img id="dos" src="../img/cal2.gif" onClick="gestionarImagenes(this)"></a><br>
<input type=radio name="tipofecha" id="rbtres" value="3" onclick="gestionarRadioButton(this)">Anterior a ...  <br><input id="fecha3" name="fecha3" type="text" disabled><a href="javascript:NewCal('fecha3','ddmmyyyy')"><img id="tres" src="../img/cal2.gif" onClick="gestionarImagenes(this)"></a><br>
<input type=radio name="tipofecha" id="rbcuatro" value="4" onclick="gestionarRadioButton(this)">Entre ...  <br><input id="fecha4" name="fecha4" type="text" disabled><a href="javascript:NewCal('fecha4','ddmmyyyy')"><img id="cuatro" src="../img/cal2.gif" onClick="gestionarImagenes(this)"></a><br>
<input type=radio name="ninguno" id="rbcinco" value="5" style="visibility:hidden">y ...  <br><input name="fecha5" id="fecha5" name="fecha5" type="text" disabled><a href="javascript:NewCal('fecha5','ddmmyyyy')"><img id="cinco" src="../img/cal2.gif" onClick="gestionarImagenes(this)"></a></td></tr></table>
Funciones en JavaScript:

Código: 
function gestionarImagenes(img) {
	var valori = 0;
	valori = img.id;
	if (valori == "uno") {
		document.getElementById("rbuno").checked=true;
		document.getElementById("rbdos").checked=false;
		document.getElementById("rbtres").checked=false;
		document.getElementById("rbcuatro").checked=false;
		document.getElementById("fecha1").disabled=false;
		document.getElementById("fecha2").disabled=true;
		document.getElementById("fecha3").disabled=true;
		document.getElementById("fecha4").disabled=true;
		document.getElementById("fecha5").disabled=true;
		document.getElementById("fecha2").value="";
		document.getElementById("fecha3").value="";
		document.getElementById("fecha4").value="";
		document.getElementById("fecha5").value="";
		document.getElementById("uno").src="../img/cal.gif";
		document.getElementById("dos").src="../img/cal2.gif"; 
		document.getElementById("tres").src="../img/cal2.gif";
		document.getElementById("cuatro").src="../img/cal2.gif";
		document.getElementById("cinco").src="../img/cal2.gif";
		document.getElementById("fecha1").focus();
	}
	else if (valori == "dos") {
		document.getElementById("rbuno").checked=false;
		document.getElementById("rbdos").checked=true;
		document.getElementById("rbtres").checked=false;
		document.getElementById("rbcuatro").checked=false;
		document.getElementById("fecha1").disabled=true;
		document.getElementById("fecha2").disabled=false;
		document.getElementById("fecha3").disabled=true;
		document.getElementById("fecha4").disabled=true;
		document.getElementById("fecha5").disabled=true;
		document.getElementById("fecha1").value="";
		document.getElementById("fecha3").value="";
		document.getElementById("fecha4").value="";
		document.getElementById("fecha5").value="";
		document.getElementById("uno").src="../img/cal2.gif";
		document.getElementById("dos").src="../img/cal.gif"; 
		document.getElementById("tres").src="../img/cal2.gif";
		document.getElementById("cuatro").src="../img/cal2.gif";
		document.getElementById("cinco").src="../img/cal2.gif";
		document.getElementById("fecha2").focus();
	}
	else if (valori == "tres") {
		// código equivalente para este caso				}
	else if (valori == "cuatro") {
		// codigo equivalente para este caso				}
	else if (valori == "cinco") {
		document.getElementById("rbuno").checked=false;
		document.getElementById("rbdos").checked=false;
		document.getElementById("rbtres").checked=false;
		document.getElementById("rbcuatro").checked=true;
		document.getElementById("fecha1").disabled=true;
		document.getElementById("fecha2").disabled=true;
		document.getElementById("fecha3").disabled=true;
		document.getElementById("fecha4").disabled=false;
		document.getElementById("fecha5").disabled=false;
		document.getElementById("fecha1").value="";
		document.getElementById("fecha2").value="";
		document.getElementById("fecha3").value="";
		document.getElementById("uno").src="../img/cal2.gif";
		document.getElementById("dos").src="../img/cal2.gif"; 
		document.getElementById("tres").src="../img/cal2.gif";
		document.getElementById("cuatro").src="../img/cal.gif";
		document.getElementById("cinco").src="../img/cal.gif";
		document.getElementById("fecha4").focus();
	}
}

function gestionarRadioButton(rb) {
	var valor = 0;
	valor = rb.value;
	if (valor=="1") {
		document.getElementById("fecha1").disabled=false;
		document.getElementById("fecha2").disabled=true;
		document.getElementById("fecha3").disabled=true;
		document.getElementById("fecha4").disabled=true;
		document.getElementById("fecha5").disabled=true;
		document.getElementById("fecha2").value="";
		document.getElementById("fecha3").value="";
		document.getElementById("fecha4").value="";
		document.getElementById("fecha5").value="";
		document.getElementById("uno").src="../img/cal.gif";
		document.getElementById("dos").src="../img/cal2.gif"; 
		document.getElementById("tres").src="../img/cal2.gif";
		document.getElementById("cuatro").src="../img/cal2.gif";
		document.getElementById("cinco").src="../img/cal2.gif";
		document.getElementById("fecha1").focus();
		}
	else if (valor=="2") {
		document.getElementById("fecha1").disabled=true;
		document.getElementById("fecha2").disabled=false;
		document.getElementById("fecha3").disabled=true;
		document.getElementById("fecha4").disabled=true;
		document.getElementById("fecha5").disabled=true;
		document.getElementById("fecha1").value="";
		document.getElementById("fecha3").value="";
		document.getElementById("fecha4").value="";
		document.getElementById("fecha5").value="";
		document.getElementById("uno").src="../img/cal2.gif";
		document.getElementById("dos").src="../img/cal.gif"; 
		document.getElementById("tres").src="../img/cal2.gif";
		document.getElementById("cuatro").src="../img/cal2.gif";
		document.getElementById("cinco").src="../img/cal2.gif";
		document.getElementById("fecha2").focus();
	}
	else if (valor=="3") {
		// codigo equivalente para esete caso	
	}
	else if (valor=="4") {
		// codigo equivalente para este caso				}
}
</script>
  #2 (permalink)  
Antiguo 14/04/2006, 16:50
 
Fecha de Ingreso: mayo-2005
Mensajes: 510
Antigüedad: 19 años
Puntos: 1
Nadie tiene alguna idea... ??
  #3 (permalink)  
Antiguo 14/04/2006, 18:10
Avatar de Cap.Buscapina  
Fecha de Ingreso: octubre-2004
Ubicación: Argentina
Mensajes: 836
Antigüedad: 19 años, 6 meses
Puntos: 4
hola,


lo que he probado parece funcionar, claro que habría que revisar todo el codigo (a veces una simple comilla genera el colapso).

Lo que si me parece es que es un codigo bastante repetitivo y qeu podrías intentar simplificarlo utilizando bucles o bien otro sistema.

Cuando tenga tiempo intentaré alguna otra solucion.
saludos.
__________________
by Capitán Buscapina
.
  #4 (permalink)  
Antiguo 15/04/2006, 08:55
 
Fecha de Ingreso: mayo-2005
Mensajes: 510
Antigüedad: 19 años
Puntos: 1
Si si, es totalmente repetitivo, me conformé con copiar y pegar y utilizarlo, a ver si funcionaba... El problema q me dá a mi es q la primera vez no me dan errores, pero al usarlo repetidas veces se me van algunas imágenes...
Muchas gracias!!
  #5 (permalink)  
Antiguo 16/04/2006, 15:31
Avatar de jam1138
/** @package Moderador */
  
Fecha de Ingreso: julio-2004
Ubicación: sèveR led onieR lE
Mensajes: 9.368
Antigüedad: 19 años, 9 meses
Puntos: 102
Prueba con esto:
Código: 
<html>
<head>
<script language="JavaScript" type="text/javascript">
<!--
function cambioEstado(orig) {
		fields= document.formulario.getElementsByTagName('fieldset');
    for (i=0; i<fields.length; i++) {
	      cont= fields[i].childNodes;
				for(j=0; j<cont.length; j++) {
				    if(cont[j].nodeName=='IMG') {
						    cont[j].src= (orig.id==fields[i].id)?'../img/cal.gif':'../img/cal2.gif';
						} else if (cont[j].nodeName=='INPUT') {
						    if(cont[j].type=='text') {
						        cont[j].value='';
						        cont[j].disabled= (orig.id==fields[i].id)?'':'disabled';
								} else if (cont[j].type=='radio') {
								    cont[j].checked= (orig.id==fields[i].id)?'checked':'';
								}
						}
				}
		}
}

/* Agrega la llamada a  al inicio de la función NewCal */
function NewCal(nam, formt, pepe) {
     cambioEstado(pepe); // esto

// Demás contenido...		 
}

//-->
</script>
</head>
<body>
<form name="formulario">
    <fieldset id="field1">
       <input name="tipofecha" id="rbuno" value="1" type="radio" checked="checked"
			     onClick="cambioEstado(this.parentNode)" />
			 <label for="rbuno">Día concreto...</label> <br />
  		 <input name="fecha1" type="text" />
  		 <img src="../img/cal.gif" onclick="NewCal('fecha1', 'ddmmyyyy', this.parentNode)" />
    </fieldset>
    <fieldset id="field2">
       <input name="tipofecha" id="rbdos" value="2" type="radio"
			     onClick="cambioEstado(this.parentNode)" />
			 <label for="rbdos">Posterior a...</label> <br />
  		 <input name="fecha2" type="text" disabled="disabled" />
  		 <img src="../img/cal2.gif" onclick="NewCal('fecha2', 'ddmmyyyy', this.parentNode)" />
    </fieldset>
    <fieldset id="field3">
       <input name="tipofecha" id="rbtres" value="3" type="radio"
			     onClick="cambioEstado(this.parentNode)" />
			 <label for="rbtres">Anterior a...</label> <br />
  		 <input name="fecha3" type="text" disabled="disabled" />
  		 <img src="../img/cal2.gif" onclick="NewCal('fecha3', 'ddmmyyyy', this.parentNode)" />
		</fieldset>
    <fieldset id="field4">
       <input name="tipofecha" id="rbcuatro" value="4" type="radio"
			     onClick="cambioEstado(this.parentNode)" />
			 <label for="rbcuatro">Entre...</label> <br />
  		 <input name="fecha4" type="text" disabled="disabled" />
			 <img src="../img/cal2.gif" onclick="NewCal('fecha4', 'ddmmyyyy', this.parentNode)" />
			     y...
			 <input name="fecha5" type="text" disabled="disabled" />
  		 <img src="../img/cal2.gif" onclick="NewCal('fecha5', 'ddmmyyyy', this.parentNode)" />
    </fieldset>
</form>
</body>
</html>
... era muy lioso tu código, opté por crear una nueva función JS junto con algunas modificaciones en el HTML, de las importantes:
- una "limpieza"
- agregué un <fieldset> para agrupar los elementos que incumben en opción, gracias a eso se simplifica el JS
- eliminé el enlace en la imágen... agregué un nuevo parámetro a la función NewCal() (ojo con eso, ve los comentarios)

Aun se puede simplificar más... peguntaré cómo evitar escribir el ''onClick" a cada rato , es algo que desde hace tiempo me pregunto...

Espero te sirva. Suerte!

PD:
Pregunta: a tu función NewCal(), ¿qué parámetros le estás pasando?, ¿el "fechaX" es el id ó el name del textbox?
__________________
٩(͡๏̯͡๏)۶
» Cómo hacer preguntas de manera inteligente «

"100 años después, la revolución no es con armas, es intelectual y digital"
Última edición por jam1138; 16/04/2006 a las 15:45
  #6 (permalink)  
Antiguo 16/04/2006, 17:17
Avatar de Cap.Buscapina  
Fecha de Ingreso: octubre-2004
Ubicación: Argentina
Mensajes: 836
Antigüedad: 19 años, 6 meses
Puntos: 4
holas a todos.

Sin tener que recurrir a bucles, también se puede encontrar una solucion.

Probalo con utilizando el codigo html de tu primer mensaje (no te olvides de la etiqueta form) y con este codigo javascript:
Cita:
var enabled="fecha1";
var imagen="uno";
function gestionarRadioButton(radio){
document.getElementById(enabled).disabled=true;
enabled="fecha"+radio.value;
document.getElementById(enabled).disabled=false;
if(radio.value>3){document.getElementById('fecha5' ).disabled=false;
}else{
document.getElementById('fecha5').disabled=true;
}
}

function gestionarImagenes(i){
document.getElementById(imagen).src="cal2.gif";
i.src="cal.gif";
imagen=i.id;
al menos lo probé y parece cumplir con las espectativas.


saludos


PD: me parece innecesario lamar a la funcion NewCal desde un enlace pudiendolo hacer todo desde un onclick (o viceversa)
Cita:
<img id="dos" src="cal2.gif" onClick="gestionarImagenes(this),NewCal('fecha2',' ddmmyyyy')">
__________________
by Capitán Buscapina
.
  #7 (permalink)  
Antiguo 16/04/2006, 18:27
Avatar de Cap.Buscapina  
Fecha de Ingreso: octubre-2004
Ubicación: Argentina
Mensajes: 836
Antigüedad: 19 años, 6 meses
Puntos: 4
Cita:
Iniciado por jam1138
... peguntaré cómo evitar escribir el ''onClick" a cada rato , es algo que desde hace tiempo me pregunto...
Cita:
function ver(e){
alert(e.srcElement.id);
alert(e.srcElement.tagName);
}

</script>
y en el body
Cita:
onclick="ver(event)"
saludos
__________________
by Capitán Buscapina
.
Última edición por Cap.Buscapina; 16/04/2006 a las 18:44
  #8 (permalink)  
Antiguo 16/04/2006, 18:55
Avatar de jam1138
/** @package Moderador */
  
Fecha de Ingreso: julio-2004
Ubicación: sèveR led onieR lE
Mensajes: 9.368
Antigüedad: 19 años, 9 meses
Puntos: 102
...
No va con Mozilla: e.srcElement has no properties
__________________
٩(͡๏̯͡๏)۶
» Cómo hacer preguntas de manera inteligente «

"100 años después, la revolución no es con armas, es intelectual y digital"
  #9 (permalink)  
Antiguo 17/04/2006, 09:07
Avatar de Cap.Buscapina  
Fecha de Ingreso: octubre-2004
Ubicación: Argentina
Mensajes: 836
Antigüedad: 19 años, 6 meses
Puntos: 4
con FF y Opera se puede poner
Cita:
e.target.id
e.target.tagName
pero claro, no va en IE, por lo que habría que diferenciarlo.
una pagina que puede ayudar con alguna otra alternativa valida para todos podría ser:
http://www.w3schools.com/htmldom/dom_obj_event.asp

hay ejemplos que me parece que funcan en todos.

saludos
__________________
by Capitán Buscapina
.
  #10 (permalink)  
Antiguo 18/04/2006, 04:56
Avatar de jam1138
/** @package Moderador */
  
Fecha de Ingreso: julio-2004
Ubicación: sèveR led onieR lE
Mensajes: 9.368
Antigüedad: 19 años, 9 meses
Puntos: 102
Cita:
una pagina que puede ayudar con alguna otra alternativa valida para todos podría ser:
http://www.w3schools.com/htmldom/dom_obj_event.asp

hay ejemplos que me parece que funcan en todos.
Gracias, hay con tiempo le hecharé un ojo .

__________________
٩(͡๏̯͡๏)۶
» Cómo hacer preguntas de manera inteligente «

"100 años después, la revolución no es con armas, es intelectual y digital"
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 15:30.