PDA

Click to See Complete Forum and Search --> : Trouble with radiobuttons and "onclick" event

Caliban
02-21-2003, 04:30 PM
Hi folx,

I'm having trouble with radiobuttons and click event on JavaScript.

Check this piece of code:
==============================
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin

function Update_Info() {
var i;
var Cadena;
alert('Number of radiobuttons=' + document.academicos.raRegistro2.length);
renglon = -999999;
for (i=0;i<document.academicos.raRegistro2.length;i++){
if (document.academicos.raRegistro2[i].checked) {
renglon = i;
Cadena = document.academicos.raRegistro2[i].Sarta;
}
}
alert('Radiobutton Checked is in line ' + renglon);
}

</SCRIPT>
</HEAD>


<FORM NAME="academicos" ACTION = "./nom_mostrar_info.php?IndTabla=3" METHOD="POST">
<TABLE ID='TABLA_ESTUDIOS' BORDER='1'>
<TBODY>
<TR>
<TD><INPUT TYPE = 'RADIO' NAME = 'raRegistro2' ID='CELDA17' SARTA='A|B|C|D' onClick='javascript:Update_Info()'></TD>
</TR>
</TBODY>
</TABLE>
</FORM>
</HTML>
==============================
I assume that

document.academicos.raRegistro2.length = 1

because there's one radiobutton in the page at the beginning.

*
When I click on the radiobutton, the function "Update_Info()" must verify what radiobutton I clicked.

The sentence

alert('Number of radiobuttons='+document.academicos.raRegistro2.length);

sends me the following message:

Number of radiobuttons=undefined

instead of

Number of radiobuttons=1

*
If "document.academicos.raRegistro2.length" is "undefined", logically the for... loop doesn't work, althought I did click the radiobutton.

*
But, if you add another radiobutton below the existent one,

(...)
<TR>
<TD><INPUT TYPE = 'RADIO' NAME = 'raRegistro2' ID='CELDA12' SARTA='C|D|E|F' onClick='javascript:Update_Info()'></TD>
</TR>
(...)

the code works beautiful (number of radiobuttons = 2, radiobutton checked is in line 1 or 2 , etc)
*

What am I doing wrong?
How must be initialized the length of raRegistro2?

Thanx in advance!

Caliban
Caliban
02-21-2003, 04:36 PM
This is the right piece of code:

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin

function Update_Info() {
var i;
var Cadena;
alert('Number of radiobuttons=' + document.academicos.raRegistro2.length);
renglon = -999999;
for (i=0;i<document.academicos.raRegistro2.length;i++){
if (document.academicos.raRegistro2[i].checked) {
renglon = i;
Cadena = document.academicos.raRegistro2[i].Sarta;
}
}
alert('Radiobutton Checked is in line ' + renglon);
}

</SCRIPT>
</HEAD>


<FORM NAME="academicos" ACTION = "./nom_mostrar_info.php?IndTabla=3" METHOD="POST">
<TABLE ID='TABLA_ESTUDIOS' BORDER='1'>
<TBODY>
<TR>
<TD>
<INPUT TYPE = 'RADIO' NAME = 'raRegistro2'
ID='CELDA17' SARTA='A|B|C|D' onClick='javascript:Update_Info();'>
</TD>
</TR>
</TBODY>
</TABLE>
</FORM>
</HTML>


Thanx in advance again,
Caliban
Caliban
02-21-2003, 06:21 PM
Hi folx,

I found a workaround for this issue.

1) I better access the radiobutton's "checked" property by mean of the radiobutton's "id" , instead of the radiobutton's name.

2) I control the "for{...}" loop with the lenght of the table with id = "TABLA_ESTUDIOS", instead of the length of the radiobutton raRegistro2

This is the code:


<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin

function Update_Info() {
var i;
var Cadena;
renglon = -999999;
for (i=1;i<=document.getElementById('TABLA_ESTUDIOS').rows.length;i++)
{
if (document.getElementById('celda'+i+'7').checked == true)
{
renglon = i;
Cadena = document.getElementById('celda'+i+'7').Sarta;
}
}
alert('Radiobutton Checked is in line ' + renglon);
}

</SCRIPT>
</HEAD>


<FORM NAME="academicos" ACTION = "./nom_mostrar_info.php?IndTabla=3" METHOD="POST">
<TABLE ID='TABLA_ESTUDIOS' BORDER='1'>
<TBODY>
<TR>
<TD><INPUT TYPE = 'RADIO' NAME = 'raRegistro2' id='celda17' SARTA='A|B|C|D' onClick='javascript:Update_Info();'></TD>
</TR>
</TBODY>
</TABLE>
</FORM>
</HTML>

I just have to notice that when I need to add a new row in the table TABLA_ESTUDIOS, I must assign the following value to the "id" of the new row(s):

celdaX7
-where X is an integer between 1 and infinite :rolleyes:

Like this:
<TR>
<TD><INPUT TYPE = 'RADIO' NAME = 'raRegistro2' id='celda27' SARTA='S|T|U|W' onClick='javascript:Update_Info();'></TD>
</TR>
<TR>
<TD><INPUT TYPE = 'RADIO' NAME = 'raRegistro2' id='celda37' SARTA='S|T|U|W' onClick='javascript:Update_Info();'></TD>
</TR>

...and so on.


Do you know what I mean? sorry if my english is not good, I try to make me understand :D


Caliban