function para radiobuttons.

carlunchos · #1 (**permalink**) 14/01/2005, 06:54

Sres donde fallo con esto?:

<script>
function habilita(form)

{
form.rd2[2].disabled = false;
form.rd2[3].disabled = false;
}

function deshabilita(form)
{

form.rd2[2].disabled = true;
form.rd2[3].disabled = true;
}
</script>

<body>
<form name="ejemplo">
<input type="radio" name="rd1" value="si" checked onClick="habilita(this.form)"> SI, quiero suscribirme.

<input type="radio" name="rd1" value="no" onClick="deshabilita(this.form)"> NO,no quiero suscribirme.

<input type="radio" name="rd2" value="1">Opcion 1.
<input type="radio" name="rd2" value="2">Opcion 2.

</form>
</body>

La idea es que si se clica en NO los "rd2" se ponen disabled pero tambien poder habilitarlos tambien con "SI". Tal vez la falla este en la referencia de cada elemento de formulario.

Saludos.

JavierB · #2 (**permalink**) 14/01/2005, 07:03

Hola carlunchos

Tienes que ponerlo así:

form.rd2[0].disabled = false;
form.rd2[1].disabled = false;

Lo mismo para disabled=true;

Espero que te funcione. Saludos,

carlunchos · #3 (**permalink**) 14/01/2005, 07:25

Al pelo javier , pero necesito algo mas:
que al estar habilitados los rd2 se verifique que cada uno tenga una seleccion, es decir que no se haga el submit hasta que cada radio tenga su click. No se como encararlo.

Gracias de nuevo.

JavierB · #4 (**permalink**) 14/01/2005, 08:30

Hola de nuevo.

<form name="ejemplo" onsubmit="return validar(this)">

Y la función para validar:

Código HTML:

function validar(frm) {
  if(frm.rd1[0].checked)
    if(!frm.rd2[0].checked && !frm.rd2[1].checked) {
      alert('Debes marcar una opcion');
      return false;
    }
}

Saludos,

carlunchos · #5 (**permalink**) 14/01/2005, 12:40

Javierb, de nuevo estoy con este tema:

me habias dicho que pusiera lo siguiente:

form.rd2[0].disabled = false;
form.rd2[1].disabled = false;

pero resulta que al poner :

form.rd25[0].disabled = false;
form.rd25[1].disabled = false;
.....................
form.rd28[4].disabled = false;

me tira error : rd25 es nulo o no es un objeto.

porque si para rd2[0] funciona , para rd25[0] no?

Ademas respecto de:

function validar(frm) {
if(frm.rd1[0].checked)
if(!frm.rd2[0].checked && !frm.rd2[1].checked) {
alert('Debes marcar una opcion');
return false;
}
}

si tengo 25 radios debo poner 24 && o tengo forma de por medio de un contador saber cuantos hay y luego fijarme si hay alguno sin tildar?

Gracias.

JavierB · #6 (**permalink**) 15/01/2005, 04:14

Rehola.

Para no poner muchos && (que ciertamente es un c**azo) puedes usar este código:

Código HTML:

function validar(frm) {
  elem=frm.elements;
  for(i=0;i<elem.length;i++)
    if(elem[i].name=='rd2')
      if(elem[i].checked) return true;
  return false;
}

Si te da un error con rd25[0] es porque no tienes ningún elemento en el formulario que tenga de nombre rd25

Saludos,

carlunchos · #7 (**permalink**) 16/01/2005, 17:43

JavierB o quien pueda darme una mano:

necesito implementar 2 function que son las siguientes y que no doy pie con bola:

<script language="javascript">

function habilita(form)
{
form.rd2[0].disabled = false;
form.rd2[1].disabled = false;
form.rd2[2].disabled = false;
form.rd2[3].disabled = false;
form.rd3[0].disabled = false;
form.rd3[1].disabled = false;
form.rd3[2].disabled = false;
}
function deshabilita(form)
{
form.rd2[0].disabled = true;
form.rd2[1].disabled = true;
form.rd2[2].disabled = true;
form.rd2[3].disabled = true;
form.rd3[0].disabled = true;
form.rd3[1].disabled = true;
form.rd3[2].disabled = true;

}

function validar(frm) {
elem=frm.elements;
for(i=0;i<elem.length;i++)
if(elem[i].name=='rd2')
if(elem[i].checked) return true;
return false;
}
</script>

la linea que llamaria a las function seria:

<td align=center height=30>Si <input type=radio name="rd1" value="1.1" onclick="habilita(this.form)"> No <input type=radio name="rd1" value="1.2" onclick="deshabilita(this.form)"></td>
<tr>
<td align="center" bgcolor="#FFFFCC"><p><b>2:.</b> Direccion</p></td>
</tr>
<tr>
<td align=center colspan=2 height=30>Ninguna <input type=radio name="rd2" value="2.1"> Difusa<input type=radio name="rd2" value="2.2"> Algo<input type=radio name="rd2" value="2.3"> Poca<input type=radio name="rd2" value="2.4"></td>

</tr>
<tr>
<td height=30 colspan=2 align=center bgcolor="#FFFFCC"><p><b>3:.</b> Se debe permitir</p></td>
</tr>
<td align=center colspan=2 height=30>Capital <input type=radio name="rd3" value="3.1"> Provincias<input type=radio name="rd3" value="3.2"> Varios<input type=radio name="rd3" value="3.3"></td>
</tr>
</table>
<table border="0" width="80%" bordercolor="#9999FF" cellpadding="2" cellspacing="2">
<tr>
<td width="200" align=center> <%=pagetitle%>  </td>
<td align=right height=30><input type=button name=envio value="Siguiente" Onclick="validar()"></td>
</tr>
</table>
</form>

La idea es que si doy click en NO se desabilitan los radiobuttons permitiendo el envio del formulario. Si doy click en SI debo verificar que cada radio tenga una seleccion y luego recien poder enviar el formulario.
O tal vez alguien tenga algo mas sencillo de hacer lo que busco y no tan enquilombado como lo que quiero inplementar.

JavierB, he tratado con lo que me pasaste pero no me funca a mi.

Saludos.

kepawe · #8 (**permalink**) 16/01/2005, 21:25

Hola carlunchos JavierB

Si necesitas desabilitar todos los grupos de check dependiende del primer grupo, el script que te envio funciona, no importa el número de grupos que haiga que comprobar, solo tienes que asignarle a los grupos obligatorios un nombre compuesto primero por letras y numeros al final.
Para que entiendas el funcionamiento del script te pongo este enlace donde puedes ver mas claramente como funciona y puedas depuralo mejor y adaptarlo a tus necesidades.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<script>

// El nombre de los radios obligatorio debe tener este formato letras y despues numeros

var msk_fo = /^\w+\d/i
var check_no = false
var check_yes = true
function send_form(current_form){
var field_focus
var radio_group = ""
var ok_form = 0
for(var ctr = 0 ; ctr < current_form.length; ctr++){
if(current_form[ctr].value == "1.2" && current_form[ctr].checked){
check_no = true
}
if(current_form[ctr].value == "1.1" && current_form[ctr].checked){
check_no = false
}
if(msk_fo.test(current_form[ctr].name)){

if(current_form[ctr].type == "radio" && current_form[ctr].name != radio_group){

if(check_radio(eval("current_form." + current_form[ctr].name))){

field_focus = ok_form == 0 ? current_form[ctr] :field_focus
ok_form++
}

radio_group = current_form[ctr].name
}
}
}
if(ok_form === 0 ){

current_form.submit()
}
else{
alert("Por favor, complete el formulario.\t \n" +
(ok_form > 1 ? "Quedan por marcar "+ok_form+"." : "Solo queda por marcar "+ok_form+"." ))
field_focus.focus()
}
}

function disabled_no(current_form){
radio_group = ""

for(var ctr = 0; ctr < current_form.length;ctr++){

if(msk_fo.test(current_form[ctr].name)){

if(current_form[ctr].type == "radio" && current_form[ctr].name != radio_group){

if(check_radio(eval("current_form." + current_form[ctr].name))){continue }

radio_group = current_form[ctr].name
}
}

}

}

function check_radio(radio_group){

if(check_no){
for(var ctr = 0 ; ctr < radio_group.length; ctr++){
if(radio_group[ctr].name != "rd1"){
if(!check_yes){
radio_group[ctr].checked= false
radio_group[ctr].disabled = true
}
else{
radio_group[ctr].disabled = false
}
}
}
return false

}
else{
for(var ctr = 0 ; ctr < radio_group.length; ctr++){
if(radio_group[ctr].checked ){
return false
}
}

return true
}
}
//-->
</script>
</head>
<body>
<table><form name="form1">
<td align=center height=30>Si <input type=radio name="rd1" value="1.1" onclick="check_yes=true;disabled_no(this.form) "> No <input type=radio name="rd1" value="1.2" onclick="check_yes=false;check_no=true; disabled_no(this.form) " ></td>
<tr>
<td align="center" bgcolor="#FFFFCC"><p><b>2:.</b> Direccion</p></td>
</tr>
<tr>
<td align=center colspan=2 height=30>Ninguna <input type=radio name="rd2" value="2.1"> Difusa<input type=radio name="rd2" value="2.2"> Algo<input type=radio name="rd2" value="2.3"> Poca<input type=radio name="rd2" value="2.4"></td>

</tr>
<tr>
<td height=30 colspan=2 align=center bgcolor="#FFFFCC"><p><b>3:.</b> Se debe permitir</p></td>
</tr>
<td align=center colspan=2 height=30>Capital <input type=radio name="rd3" value="3.1"> Provincias<input type=radio name="rd3" value="3.2"> Varios<input type=radio name="rd3" value="3.3"></td>
</tr>
</table>
<table border="0" width="80%" bordercolor="#9999FF" cellpadding="2" cellspacing="2">
<tr>
<td width="200" align=center> <%=pagetitle%>  </td>
<td align=right height=30><input type=button name=envio value="Siguiente" Onclick="send_form(this.form)"></td>
</tr>
</table>
</form>

</body>
</html>

Espero que te sirva.
Saludos

carlunchos · #9 (**permalink**) 17/01/2005, 05:10

Estimado lepawe, funciona y es lo que esperaba. Solo algo mas si no es mucha molestia: quiero entender la logica de lo que me pasaste y tal vez tengas algunos minutos como para enviarme el paso a paso de este tip. Si bien el ejemplo del enlace esta leible, veo que para lo que me enviaste has agregado mas variables y has dispuesto cosas de otra manera. Te animas a explicarmelo?

Gracias de todas maneras.

kepawe · #10 (**permalink**) 17/01/2005, 08:38

De nada, carlunchos. El script tiene un error, si el usario selecciona el radio "no" y refresca la página, podria marcar en los demas radios y enviar el formulario , para evitar esto añade lo siguiente:

<body onload="if(document.form1.rd1[1].checked){check_yes=false;check_no=true; disabled_no(document.form1)}">

Cuando disponga de más tiempo, te enviare el script más depurado con comentarios.

Si encuentras algun otro error, dimelo, intentare corregirlo lo mas rapido posible.

Saludos

carlunchos · #11 (**permalink**) 17/01/2005, 10:33

lepawe, probe lo que me apuntaste pero no graba (seleccion de "NO" + F5), por ende me quedo tranquilo, de todas maneras lo tendre en cuenta.

Gracias nuevamente y espero me puedas pasar el tip comentado.

Saludos.