Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

2 issues with forms displayed 1

Status
Not open for further replies.
ScrabbleKing

ScrabbleKing

Programmer
Mar 11, 2007
20
0
0
US
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.

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>
 
Sort by date Sort by votes
Hi

Then you use Explorer, right ?

Anyway, to not confuse any browser, would help to use radio buttons with names unique for each group.
Code: 
    <div id="123_list" style="display:none;">
      <input type="radio" name="Option[red]1[/red]" onclick="CngOption('ABC');" > ABC
      <input type="radio" name="Option[red]1[/red]" onclick="CngOption('DEF');" > DEF
      <input type="radio" name="Option[red]1[/red]" onclick="CngOption('GHI');" > GHI
    </div>
    <div id="456_list" style="display:none;">
      <input type="radio" name="Option[red]2[/red]" onclick="CngOption('JKL');" > JKL
      <input type="radio" name="Option[red]2[/red]" onclick="CngOption('MNO');" > MNO
    </div>
    <div id="789_list" style="display:none;">
      <input type="radio" name="Option[red]3[/red]" onclick="CngOption('PQR');" > PQR
      <input type="radio" name="Option[red]3[/red]" onclick="CngOption('STU');" > STU
      <input type="radio" name="Option[red]3[/red]" onclick="CngOption('VWX');" > VWX
      <input type="radio" name="Option[red]3[/red]" onclick="CngOption('YZ');" > YZ
    </div>

Feherke.
 
Upvote 0 Downvote
Thank you very much, feherke, that solved my second issue. I still hae the first issue. Let re-word it...

When selecting a numeric option or an alpha selection with the mouse, you must select it twice or else you cannot change the radio buttons using the arrow keys more than once without the focus going off of the buttons. Once you choose a radio button a second time with the mouse then you can change the radio buttons to your hearts content with the keyboard.

How can this be fixed?
 
Upvote 0 Downvote
Hi

I am not sure what causes it. I saw that problem when I answered previously, but I can not reproduce it now.

My only idea is to change the hiding to happen only when needed. But not sure if will have any effect.
Code: 
[b]function[/b] newOptions(listID) {
  [b]if[/b] (listID!=[i]'123_list'[/i])
    document.getElementById([i]'123_list'[/i]).style.display = [i]'none'[/i];
  [b]if[/b] (listID!=[i]'456_list'[/i])
    document.getElementById([i]'456_list'[/i]).style.display = [i]'none'[/i];
  [b]if[/b] (listID!='789_list')
    document.getElementById([i]'789_list'[/i]).style.display = [i]'none'[/i];

  document.getElementById(listID).style.display = [i]''[/i];
}

Feherke.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

edd92
  • Locked
  • Question
Dropzone Issues
Replies
0
Views
57
edd92
edd92
edgarv
  • Locked
  • Question
Field with numbers and characters get nan
Replies
1
Views
61
ggriffit
ggriffit
chelares
  • Locked
  • Question
Issues with Tables
Replies
2
Views
48
Offera
Offera
JPSeo
  • Locked
  • Question
Another cjhild_process.exec issue with complex shell command
Replies
0
Views
41
JPSeo
JPSeo
waubain
  • Locked
  • Question
id tag not loading new data with new ajax call 1
Replies
4
Views
72
waubain
waubain

Part and Inventory Search

Sponsor

Back
Top