ScrabbleKing
Programmer
The code below works fine with two exceptions:
1) When selecting a numeric choice and then selecting a alpha option...If you then use the arrow keys to switch back and forth between the alpha options the focus goes off of the options after 1 or 2 keypresses causing the arrows keys to no longer change the alpha selection. It will not happen again if you select an alpha selection a 2nd time though (unless you choose a different numeric choice).
2) When using the arrow keys to change the alpha options, it will show the form for the last option of the previous numeric choice in the table when hitting the left or down keys if you are already at the first option of the current numeric choice...it will also show the form for the first option of the next numeric choice in the table when hitting the right or up arrow keys if you are already at the last option of the current numeric choice.
For example: if numeric choise '456' is selected, then 'JKL' and 'MNO' are the options. If 'JKL' is selected and you hit either the left or up arrow key then it will display the 'GHI' form in the table. Also, if 'MNO' is selected and you hit either the right or down arrow key then it will display the 'PQR' form in the table.
How do I fix these issues? Any help would be appreciated.
1) When selecting a numeric choice and then selecting a alpha option...If you then use the arrow keys to switch back and forth between the alpha options the focus goes off of the options after 1 or 2 keypresses causing the arrows keys to no longer change the alpha selection. It will not happen again if you select an alpha selection a 2nd time though (unless you choose a different numeric choice).
2) When using the arrow keys to change the alpha options, it will show the form for the last option of the previous numeric choice in the table when hitting the left or down keys if you are already at the first option of the current numeric choice...it will also show the form for the first option of the next numeric choice in the table when hitting the right or up arrow keys if you are already at the last option of the current numeric choice.
For example: if numeric choise '456' is selected, then 'JKL' and 'MNO' are the options. If 'JKL' is selected and you hit either the left or up arrow key then it will display the 'GHI' form in the table. Also, if 'MNO' is selected and you hit either the right or down arrow key then it will display the 'PQR' form in the table.
How do I fix these issues? Any help would be appreciated.
Code:
<html>
<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--
var Last;
function CngOption(optid){
if (Last){
document.getElementById('options').appendChild(Last);
}
else {
document.getElementById('options').appendChild(document.getElementById('display').firstChild);
}
Last=document.getElementById(optid)
document.getElementById('display').appendChild(Last);
}
function newOptions(listID) {
document.getElementById('123_list').style.display = 'none';
document.getElementById('456_list').style.display = 'none';
document.getElementById('789_list').style.display = 'none';
document.getElementById(listID).style.display = '';
}
//-->
</script></head>
<body>
<table border="1" width="800" height="200">
<tr>
<td width="20%">1</td>
<td id="display" >2</td>
</tr>
</table>
<table>
<tr>
<td width="800" align="center">
<div id="123_list" style="display:none;">
<input type="radio" name="Option" onclick="CngOption('ABC');" > ABC
<input type="radio" name="Option" onclick="CngOption('DEF');" > DEF
<input type="radio" name="Option" onclick="CngOption('GHI');" > GHI
</div>
<div id="456_list" style="display:none;">
<input type="radio" name="Option" onclick="CngOption('JKL');" > JKL
<input type="radio" name="Option" onclick="CngOption('MNO');" > MNO
</div>
<div id="789_list" style="display:none;">
<input type="radio" name="Option" onclick="CngOption('PQR');" > PQR
<input type="radio" name="Option" onclick="CngOption('STU');" > STU
<input type="radio" name="Option" onclick="CngOption('VWX');" > VWX
<input type="radio" name="Option" onclick="CngOption('YZ');" > YZ
</div>
<input type="radio" name="Selection" value="123" onclick="newOptions('123_list');"> 123<br>
<input type="radio" name="Selection" value="456" onclick="newOptions('456_list');"> 456<br>
<input type="radio" name="Selection" value="789" onclick="newOptions('789_list');"> 789<br>
</td>
</tr>
</table>
<DIV id="options" style="position:absolute;visibility:hidden;" >
<form id="ABC" action="[URL unfurl="true"]http://www.ABC.com/">[/URL]
<fieldset>
<legend>ABC</legend>
</fieldset>
</form>
<form id="DEF" action="[URL unfurl="true"]http://DEF.com/">[/URL]
<fieldset>
<legend>DEF</legend>
</fieldset>
</form>
<form id="GHI" action="[URL unfurl="true"]http://GHI.com">[/URL]
<fieldset>
<legend>GHI</legend>
</fieldset>
</form>
<form id="JKL" action="[URL unfurl="true"]http://JKL.com/">[/URL]
<fieldset>
<legend>JKL</legend>
</fieldset>
</form>
<form id="MNO" action="[URL unfurl="true"]http://MNO.com/">[/URL]
<fieldset>
<legend>MNO</legend>
</fieldset>
</form>
<form id="PQR" action="[URL unfurl="true"]http://PQR.com/">[/URL]
<fieldset>
<legend>PQR</legend>
</fieldset>
</form>
<form id="STU" action="[URL unfurl="true"]http://STU.com/">[/URL]
<fieldset>
<legend>STU</legend>
</fieldset>
</form>
<form id="VWX" action="[URL unfurl="true"]http://VWX.com/">[/URL]
<fieldset>
<legend>VWX</legend>
</fieldset>
</form>
<form id="YZ" action="[URL unfurl="true"]http://YZ.com/">[/URL]
<fieldset>
<legend>YZ</legend>
</fieldset>
</form>
</DIV>
</body>
</html>