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>