• Share this topic on Twitter and help it get discovered sooner.
3 replies [Last post]
Anonymous
Anonymous's picture
Guru
calgary,alberta
calgary,alberta

cry

Hi

I have displayed three radio buttons Cash, Credit Card & Cheque respectively. When user click on Cash/Credit Card related text boxes like cheque no, date if clicked Chequed should be displayed. Cash is default 7 no text boxes associated with it.

ShaRa

Tags:
Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 14 hours 15 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5055
Points: 2633

when click a radio button display related text boxes

Hi ShaRa,
What I would do is wrap the fields associated with each radio button in a div with display set to none or visibility set to hidden, then use the onchange event when a radio button is clicked to call some JavaScript which displays the correct hidden div.
Here's a simplified not tested example.

<script type="javascript">
function switchvis(id){ 
   if(document.getElementById(id)){    
       var ele = document.getElementById(id);    
       if(ele.style.visibility=="hidden"){    
           ele.style.visibility="visible";      
       }else{ 
           ele.style.visibility="hidden";      
       } 
   } 
} 
</script>

<input type="radio" name="cash" id="cash" onchange="javascript:switchvis( 'idOfLayer' );" >cheque

<div id="theid" style="visibility:hidden;">
   <input type="text" name="date" />
   <input type="text" name="Number" />
</div> 

dbowne
Offline
Enthusiast
Washinton DC
Last seen: 10 years 48 weeks ago
Washinton DC
Joined: 2003-05-22
Posts: 53
Points: 0

display vs visibility

I recommend switching visibility:visible/hidden to display:block/none

I have found that most folks want the hidden item to not take up any space on the page when hidden, that may not be the case here.

dbowne

joshuakaufman
Offline
newbie
Last seen: 10 years 47 weeks ago
Joined: 2003-06-01
Posts: 1
Points: 0

when click a radio button display related text boxes

I think this article by Peter Paul Koch describes exactly what you're trying to do.