JS show &hide Table row not working properly for radio buttons!

[hpadwal]

Hello all,


I have the following script which works great for check boxes and and links however radio buttons are a bit annoying.

Clicking a radio button will DISPLAY a tablr row containing infomation. Clicking another button (which hase the same name) displays that options info ande should close any other radio button that was selected before.

Radio button 1

<input type="radio" name="box" value="2" onclick="box_select(2);box_select_price(2);showtext('row1');" style="cursor:hand;" /><img src="images/13.gif" border="0" />

radio button 2

<input type="radio" name="box" value="3" onclick="box_select(2);box_select_price(2);showtext('row2');" style="cursor:hand;" /><img src="images/13.gif" border="0" />

table row id

<tr id="row2" style="display:none;">
   <td class="subtext">Hello</td>
</tr>

and Function:

function showtext(x) 
{ 
     if (document.getElementById(x).style.display == 'none')

     {
          document.getElementById(x).style.display = 'block';
     }
}

Can you help?

_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/

- Doh

http://www.my-portfolio.me.uk

 

[hpadwal]

the above method simply keeps displaying all the table rows and not hiding them.

It still doesnt work if i put the following ELSE statment in

function showtext(x) 
{ 
     if (document.getElementById(x).style.display == 'none')

     {
          document.getElementById(x).style.display = 'block';
     }

     else
     {
          document.getElementById(x).style.display = 'none';
     }


}

I have also used the following functions for EACH button in hope that would work but it doesnt.

function showtext(x) 
{ 
     if (document.getElementById('row1').style.display == 'none')

     {alert("1")
     
          document.getElementById('row1').style.display = 'none';
          document.getElementById('row2').style.display == 'none';
	  document.getElementById('row3').style.display == 'none';
	  document.getElementById('row4').style.display == 'none';
     }
}

function showtext2(x) 
{ 
   
     if (document.getElementById('row2').style.display == 'none')

     {alert("2")
          
          document.getElementById('row1').style.display = 'none';
          document.getElementById('row2').style.display == 'block';
	  document.getElementById('row3').style.display == 'none';
	  document.getElementById('row4').style.display == 'none';
     }
}

........an so on...

_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/

- Doh

http://www.my-portfolio.me.uk

 

[BillyRayPreachersSon]

If yo uwant only one row to be "open" at a time, then you'll need to have a global variable which keeps track of the ID of the currently displayed row.

Then, when any other row is shown, simply hide the row with the ID in that global variable, and change the variable to have the ID of the row you've just shown.

Hope this helps,
Dan



[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[BabyJeffy]

...however radio buttons are a bit annoying...

So, what exactly is your problem? Is something not working?

Cheers,
Jeff

[tt]Jeff's Page @ Code Couch

http://www.codecouch.com/jeff/

http://www.codecouch.com/jeff/blog/

[/tt]

What is Javascript? FAQ216-6094

 

[BabyJeffy]

Hmmm... OP updated the post and my posting is out of sync. Ah well

Jeff

[tt]Jeff's Page @ Code Couch

http://www.codecouch.com/jeff/

http://www.codecouch.com/jeff/blog/

[/tt]

What is Javascript? FAQ216-6094

 

[theniteowl]

Your code does not close ALL rows not selected, it only tests and toggles the row related to the clicked radio button. And it DOES toggle that one on and off which is also a potential problem.
You use the onclick event for the radio button which does not care whether that radio is currently selected or not.
So when you click a button it gets selected, and the associated row is made visible. If you click the same radio button again, it STAYS selected but the associated row is now toggled off again.

As Dan suggested above, you have to track which row is to be displayed. Store the row name in a global variable then when a new row is selected you first toggle OFF the row that was previously selected as stored in the variable, then you turn ON the newly selected row. Finally you would update the global variable with the new selections name.

You may want to change your function to an onchange event instead of onclick to prevent toggling the same row off again if they click on the already selected radio button.


Stamp out, eliminate and abolish redundancy!

 

[hpadwal]

hello all,

through trai and error i have managed to figure it out, i wasnt far off, but i am sure my code can be coded more efficently by a more experienced coder. But heh, it works though.

ps. theniteowl, thanks for your response to my earlier post regarding client side validating credit card details in JS

Here is the code for anyone else who may need it:

An onlclick function for each radio button

function showtext69(x) 
{ 
     if (document.getElementById('row3').style.display == 'none')

     {
          document.getElementById('row3').style.display = 'block';
          document.getElementById('row4').style.display = 'none';
          document.getElementById('row2').style.display = 'none';
          document.getElementById('row1').style.display = 'none';
     }

   


}
function showtext68(x) 
{ 
     if (document.getElementById('row4').style.display == 'none')

     {
          document.getElementById('row4').style.display = 'block';
          document.getElementById('row3').style.display = 'none';
          document.getElementById('row2').style.display = 'none';
          document.getElementById('row1').style.display = 'none';
     }

    

}
function showtext67(x) 
{ 
     if (document.getElementById('row2').style.display == 'none')

     {
          document.getElementById('row2').style.display = 'block';
          document.getElementById('row4').style.display = 'none';
          document.getElementById('row3').style.display = 'none';
          document.getElementById('row1').style.display = 'none';
     }

 

}
function showtext66(x) 
{ 
     if (document.getElementById('row1').style.display == 'none')

     {
          document.getElementById('row1').style.display = 'block';
          document.getElementById('row4').style.display = 'none';
          document.getElementById('row3').style.display = 'none';
          document.getElementById('row2').style.display = 'none';
     }


}

_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/

- Doh

http://www.my-portfolio.me.uk

 

[theniteowl]

Try this:

function showtext(x)  
{ 
  if (x != lastsel) 
  {
    document.getElementById(x).style.display = 'block';
    if (lastsel != '')
    {
      document.getElementById(lastsel).style.display = 'none';
    }
    lastsel = x;
  }
}

First a global variable is set to contain the value of the last selection.
If the new selection is not the same as the last selection then it shows the new selection row. If the last selection was not blank (first run through) then hide the last selected row. Then update the lastsel value with the new value.


Stamp out, eliminate and abolish redundancy!