Problemas con radiobuttons
Hola
Tengo un pequeño problema, estoy haciendo uso de formularios para generar reportes, pero reulta que en una de los formularios
estoy hacieno uso de radiobuttons y listas, para ello de acuerdo al radiobutton que seleccione se habilitara la lista que le corresponde, en el caso de
elegir otro radiobutton se desahilitara el otro list y se habilitara la lista corresondiente, pero resulta que cuando doy F5 para recargar la página,
siempre se queda seleccionado el ultimo radiobutton que se selecciono, que puedo hacer para que cuando se recargue la página estén los radiobuttons sin seleccionar pero que estén habilitados claro esta.
Este es el código de mi página:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Documento sin título</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
background-color: #00CCCC;
}
-->
</style></head>
<script>
function EstableceEstado1() {
if (document.form1.radiob[1].checked) {
document.form1.select1.selectedIndex = -1
document.form1.select1.disabled = true
}
else
if (document.form1.radiob[0]) {
document.form1.select1.disabled = false
}
if (document.form1.radiob[0].checked) {
document.form1.select2.selectedIndex = -1
document.form1.select2.disabled = true
}
else
if (document.form1.radiob[1]) {
document.form1.select2.disabled = false
}
}
function QuitaFoco1() {
if(document.form1.radiob[0].checked)
document.form1.select2.blur()
if(document.form1.radiob[1].checked)
document.form1.select1.blur()
}
function Deshabilita1() {
if(document.form1.radiob[0]){
document.form1.select1.selectedIndex = -1
document.form1.select1.disabled = true
}
if(document.form1.radiob[1]){
document.form1.select2.selectedIndex = -1
document.form1.select2.disabled = true
}
}
window.onload = Deshabilita1;
if (document.captureEvents) { //N4 requiere invocar la funcion captureEvents
document.captureEvents(Event.LOAD)
}
</script>
<body>
<form name="form1" method="post" action="">
<p>
<input name="radiob" type="radio" value="radiobutton" onclick="EstableceEstado1()">
Pera
<select name="select1[]" id="select1" onFocus="QuitaFoco1()">
<option>uno</option>
<option>dos</option>
</select>
</p>
<p>
<input name="radiob" type="radio" value="radiobutton" onclick="EstableceEstado1()">
Manzana
<select name="select2[]" id="select2" onFocus="QuitaFoco1()">
<option>tres</option>
<option>cuatro</option>
</select>
</p>
<p> </p>
<p> </p>
</form>
</body>
</html>
Ojala y puedan ayudarme, de antemano gracias.
Saludos
Tengo un pequeño problema, estoy haciendo uso de formularios para generar reportes, pero reulta que en una de los formularios
estoy hacieno uso de radiobuttons y listas, para ello de acuerdo al radiobutton que seleccione se habilitara la lista que le corresponde, en el caso de
elegir otro radiobutton se desahilitara el otro list y se habilitara la lista corresondiente, pero resulta que cuando doy F5 para recargar la página,
siempre se queda seleccionado el ultimo radiobutton que se selecciono, que puedo hacer para que cuando se recargue la página estén los radiobuttons sin seleccionar pero que estén habilitados claro esta.
Este es el código de mi página:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Documento sin título</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
background-color: #00CCCC;
}
-->
</style></head>
<script>
function EstableceEstado1() {
if (document.form1.radiob[1].checked) {
document.form1.select1.selectedIndex = -1
document.form1.select1.disabled = true
}
else
if (document.form1.radiob[0]) {
document.form1.select1.disabled = false
}
if (document.form1.radiob[0].checked) {
document.form1.select2.selectedIndex = -1
document.form1.select2.disabled = true
}
else
if (document.form1.radiob[1]) {
document.form1.select2.disabled = false
}
}
function QuitaFoco1() {
if(document.form1.radiob[0].checked)
document.form1.select2.blur()
if(document.form1.radiob[1].checked)
document.form1.select1.blur()
}
function Deshabilita1() {
if(document.form1.radiob[0]){
document.form1.select1.selectedIndex = -1
document.form1.select1.disabled = true
}
if(document.form1.radiob[1]){
document.form1.select2.selectedIndex = -1
document.form1.select2.disabled = true
}
}
window.onload = Deshabilita1;
if (document.captureEvents) { //N4 requiere invocar la funcion captureEvents
document.captureEvents(Event.LOAD)
}
</script>
<body>
<form name="form1" method="post" action="">
<p>
<input name="radiob" type="radio" value="radiobutton" onclick="EstableceEstado1()">
Pera
<select name="select1[]" id="select1" onFocus="QuitaFoco1()">
<option>uno</option>
<option>dos</option>
</select>
</p>
<p>
<input name="radiob" type="radio" value="radiobutton" onclick="EstableceEstado1()">
Manzana
<select name="select2[]" id="select2" onFocus="QuitaFoco1()">
<option>tres</option>
<option>cuatro</option>
</select>
</p>
<p> </p>
<p> </p>
</form>
</body>
</html>
Ojala y puedan ayudarme, de antemano gracias.
Saludos
Respuesta de evalenzuela
1
Por el momento te puedo decir que lo copie en una página con extensión PHP, y no se queda pegado el radio button a diferencia del html que si lo hace, estoy viendo haber que puede ser.
Eduardo Valenzuela
Lima - Perú
Eduardo Valenzuela
Lima - Perú
Cambia tu función Disable1 por esta:
function Deshabilita1()
{
document.form1.radiob[0].checked=false;
document.form1.radiob[1].checked=false;
document.form1.select1.selectedIndex = -1;
document.form1.select1.disabled = true;
document.form1.select2.selectedIndex = -1;
document.form1.select2.disabled = true;
}
Saludos
Eduardo Valenzuela
Lima - Perú
function Deshabilita1()
{
document.form1.radiob[0].checked=false;
document.form1.radiob[1].checked=false;
document.form1.select1.selectedIndex = -1;
document.form1.select1.disabled = true;
document.form1.select2.selectedIndex = -1;
document.form1.select2.disabled = true;
}
Saludos
Eduardo Valenzuela
Lima - Perú
1 respuesta más de otro experto
Respuesta de widowmaker
1
Ya está solucionado, poniendo en el evento onload del body una nueva función. Te mando tú página como ejemplo:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Documento sin título</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
background-color: #00CCCC;
}
-->
</style></head>
<script>
function EstableceEstado1() {
if (document.form1.radiob[1].checked) {
document.form1.select1.selectedIndex = -1
document.form1.select1.disabled = true
}
else
if (document.form1.radiob[0]) {
document.form1.select1.disabled = false
}
if (document.form1.radiob[0].checked) {
document.form1.select2.selectedIndex = -1
document.form1.select2.disabled = true
}
else
if (document.form1.radiob[1]) {
document.form1.select2.disabled = false
}
}
function QuitaFoco1() {
if(document.form1.radiob[0].checked)
document.form1.select2.blur()
if(document.form1.radiob[1].checked)
document.form1.select1.blur()
}
function Deshabilita1() {
if(document.form1.radiob[0]){
document.form1.select1.selectedIndex = -1
document.form1.select1.disabled = true
}
if(document.form1.radiob[1]){
document.form1.select2.selectedIndex = -1
document.form1.select2.disabled = true
}
}
window.onload = Deshabilita1;
if (document.captureEvents) { //N4 requiere invocar la funcion captureEvents
document.captureEvents(Event.LOAD)
}
function estadoIni(){
Deshabilita1();
document.form1.radiob[0].checked=false;
document.form1.radiob[1].checked=false;
}
</script>
<body onload="estadoIni()">
<form name="form1" method="post" action="">
<p>
<input name="radiob" type="radio" value="radiobutton" onclick="EstableceEstado1()">
Pera
<select name="select1[]" id="select1" onFocus="QuitaFoco1()">
<option>uno</option>
<option>dos</option>
</select>
</p>
<p>
<input name="radiob" type="radio" value="radiobutton" onclick="EstableceEstado1()">
Manzana
<select name="select2[]" id="select2" onFocus="QuitaFoco1()">
<option>tres</option>
<option>cuatro</option>
</select>
</p>
<p> </p>
<p> </p>
</form>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Documento sin título</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
background-color: #00CCCC;
}
-->
</style></head>
<script>
function EstableceEstado1() {
if (document.form1.radiob[1].checked) {
document.form1.select1.selectedIndex = -1
document.form1.select1.disabled = true
}
else
if (document.form1.radiob[0]) {
document.form1.select1.disabled = false
}
if (document.form1.radiob[0].checked) {
document.form1.select2.selectedIndex = -1
document.form1.select2.disabled = true
}
else
if (document.form1.radiob[1]) {
document.form1.select2.disabled = false
}
}
function QuitaFoco1() {
if(document.form1.radiob[0].checked)
document.form1.select2.blur()
if(document.form1.radiob[1].checked)
document.form1.select1.blur()
}
function Deshabilita1() {
if(document.form1.radiob[0]){
document.form1.select1.selectedIndex = -1
document.form1.select1.disabled = true
}
if(document.form1.radiob[1]){
document.form1.select2.selectedIndex = -1
document.form1.select2.disabled = true
}
}
window.onload = Deshabilita1;
if (document.captureEvents) { //N4 requiere invocar la funcion captureEvents
document.captureEvents(Event.LOAD)
}
function estadoIni(){
Deshabilita1();
document.form1.radiob[0].checked=false;
document.form1.radiob[1].checked=false;
}
</script>
<body onload="estadoIni()">
<form name="form1" method="post" action="">
<p>
<input name="radiob" type="radio" value="radiobutton" onclick="EstableceEstado1()">
Pera
<select name="select1[]" id="select1" onFocus="QuitaFoco1()">
<option>uno</option>
<option>dos</option>
</select>
</p>
<p>
<input name="radiob" type="radio" value="radiobutton" onclick="EstableceEstado1()">
Manzana
<select name="select2[]" id="select2" onFocus="QuitaFoco1()">
<option>tres</option>
<option>cuatro</option>
</select>
</p>
<p> </p>
<p> </p>
</form>
</body>
</html>