PDA

Click to See Complete Forum and Search --> : Checking/unchecking radio buttons/checkboxes

rpd
12-01-2003, 09:02 AM
Hi,

I have a question on checking/unchecking radio buttons/checkboxes and clearing textboxes "attached"
to a radio button/checkbox.

This is a simplified example of the HTML for the FORM.
<FORM name="MyForm">
Question 1
<table>
<tr><td><input type=radio name=list1 value=1>Q1 Radio 1</td>
<td><input type=radio name=list1 value=2>Q1 Radio 2</td></tr>
<tr><td><input type=radio name=list1 value=3>Q1 Radio 3</td>
<td><input type=radio name=list1 value=4>Q1 Radio 4</td>
<td><input type=text name=edit1a size=40 value=""></td></tr>
<tr><td><input type=radio name=list1 value=5>Q1 Radio 5</td>
<td><input type=radio name=list1 value=6>Q1 Radio 6</td>
<td><input type=text name=edit1b size=40 value=""></td></tr>
<tr><td><input type=radio name=list1 value=7>Q1 Radio 7</td>
<td><input type=radio name=list1 value=8>Q1 Radio 8</td></tr>
</table>
Question 2
<table>
<tr><td><input type=checkbox name=list2 value=1>Q2 Checkbox 1</td></tr>
<tr><td><input type=checkbox name=list2 value=2>Q2 Checkbox 2</td></tr>
<tr><td><input type=checkbox name=list2 value=3>Q2 Checkbox 3</td>
<td><input type=text name=edit2 size=40 value=""></td></tr>
<tr><td><input type=checkbox name=list2 value=4>Q2 Checkbox 4</td></tr>
</table>
</FORM>

In reality a form will contain 1 to N radio button groups and/or checkbox groups, and each group
can have 0 to N textboxes attached to individual buttons/checkboxes. Therefore the Javascript should
work with any number of groups and any number of textboxes in a group.
The name of a group is always "LIST" and a number, but the numbering of the lists is not sequential
(groups in 1 form could have the names LIST11 and LIST19).
The name of a textbox is always "EDIT" and a number, but again the numbering is not sequential,
for instance "EDIT15" and "EDIT23".

What I would like to achieve through Javascript is:
A. when a user enters a textbox the preceding radio/checkbox should be checked.
So entering textbox "edit1a" should check "Q1 radio 4" in radio button group "list1".

B. when a user leaves a textbox and the textbox is empty, the preceding radio/checkbox should be unchecked.
So when leaving textbox "edit1a" and this textbox is empty, uncheck "Q1 radio 4" in radio button group "list1".

C. when a user clicks a radio button/checkbox preceding a textbox, the textbox should get focus.
So clicking "Q1 radio 4" in radio button group "list1" should move focus to "edit1a".

D. when a user selects a radio button all textboxs attached to other radio buttons in the radio button group
should be cleared.
So when "Q1 radio 1" is selected, the textboxes "edit1a" and "edit1b" should be cleared.

E. when a user deselects a check box attached to a textbox, that texbox should be cleared.
So when "Q2 Checkbox 3" is deselected, textbox "edit2" should be cleared.

All this functionality has to be "real time", I don't want to wait for the user submitting the form.

The main problem is that the HTML for the FORM is generated by an external application, and that
I CAN'T INFLUENCE this generated HTML. So, I can't use inline event handlers. I can however use Javascript
by adding a SCRIPT-tag in the HEAD-section.

Can anyone help?
clairec666
12-01-2003, 09:21 AM
This is very possible............. I can't remember exactly what to do, but I'll work it out and post it here in a while

Claire
clairec666
12-01-2003, 09:24 AM
Originally posted by rpd
The main problem is that the HTML for the FORM is generated by an external application, and that
I CAN'T INFLUENCE this generated HTML. So, I can't use inline event handlers. I can however use Javascript
by adding a SCRIPT-tag in the HEAD-section.

Can anyone help? [/B]

Okay, just read that bit again, now I'm not sure. Is there any way that you can input the HTML yourself, so that you can influence it? You would definately need onclick="function()" for when one of the boxes is selected, then it would be possible using DOM to check/uncheck other boxes.
Gollum
12-01-2003, 09:31 AM
OK, step one is to schedule some code to execute once the HTML has loaded. Can you modify the <body> tag in any way (by adding onload="initInputs();")? If not, you may need to set a timer or something.

Next you need to implement a function to scan through your input controls and add handlers.
Something like this...

function initInputs()
{
var aCtl = document.body.getElementsByTagName('input');
var oRC = null;
for ( var i = 0; i < aCtl.length; i++ )
{
switch ( aCtl[i].type.toLower() )
{
case 'radio':
case 'checkbox':
if ( aCtl[i].name.substring(0, 4) == 'list' ) oRC = aCtl[i]
break;
case 'text':
if ( aCtl[i].name.substring(0,4) == 'edit' )
{
aCtl[i].onFocus = edit_onFocus;
aCtl[i].onBlur = edit_onBlur;
aCtl[i].oRC = oRC;
}
}
}
}

function edit_onFocus()
{
this.oRC.checked = true;
}

function edit_onBlur()
{
if ( this.value == "" ) this.oRC.checked = false;
}
rpd
12-01-2003, 09:33 AM
I'm afraid that's just it, I can't influence the HTML code.

With Javascript I can loop through all elements and when the element is a radio button I can dynamically add an event handler with something like "varRadio.onfocus = myFunction" or "varTextbox.onblur=myFunction".
However, I think with such an event handler you can't use parameters, therefore it's very difficult to distinguish between the different groups and textboxes.

Please continue you effort.
clairec666
12-01-2003, 09:35 AM
I see what you mean about the parameters, I had that problem with some past scripts, but I did find a way around that. It was on somebody elses script, and I can't find it at the moment. I'll tell you as soon as I have it.