Show/Hide a div when a radio is/isnt selected

**ben_johnson1991** · 10-16-2009 01:00 PM

Hello, this is the first time i've attempted to use this kind of scripting in a form.
basically, my form contains basic information.

i have 2 radios to suggest the best way to contact someone, radios are phone and email.

When the phone radio is selected i want a <div to appear which contains "best time to contact"

This is my current scripting, please could i have a detailed response as i am having no luck with the current soultions i have found

.
..
...
<span>Best way to reply:</span>

<input type="radio" name="reply" value="Email" id="reply_0" /> E-mail <BR />

<div style="margin-left:270px;"><input type="radio" name="reply" value="Phone" id="reply_1" onclick=""/>Phone</div> <br/>

<div id="timehide"><span>Best time to get hold of you:</span>
<select>
<option value="Any">Any</option>
<option value="06:00 - 10:00">06:00 - 10:00</option>
<option value="10:00 - 12:00">10:00 - 12:00</option>
<option value="12:00 - 14:00">12:00 - 14:00</option>
<option value="14:00 - 16:00">14:00 - 16:00</option>
<option value="16:00 - 18:00">16:00 - 18:00</option>
<option value="18:00 - 20:00">18:00 - 20:00</option>
</select></div>

...
..
.

Please if any one can solve my issue i will be greatly thankful!!

Cheers, ben!

**JMRKER** · 10-16-2009 03:47 PM

If this is not what you want, it should be close ...
Give it a try:

Code:

<html>
<head>
<title>Respond</title>
<script type="text/javascript">
// From: http://www.webdeveloper.com/forum/showthread.php?t=218396

function ShowTimes(IDS,flag) {
  var status = 'none';
  if (flag) { status = 'block'; }
  document.getElementById('timehide').style.display = status;
}
</script>
</head>
<body>
<span>Best way to reply:</span>
<input type="radio" name="reply" value="Email" id="reply_0" onchange="ShowTimes('timehide',false)"/> E-mail <BR />
<div style="margin-left:270px;">
 <input type="radio" name="reply" value="Phone" id="reply_1" onchange="ShowTimes('timehide',true)"/>Phone
</div> 
<br>
<div id="timehide" style="display:none">
 <span>Best time to get hold of you:</span>
 <select>
  <option value="Any">Any</option>
  <option value="06:00 - 10:00">06:00 - 10:00</option>
  <option value="10:00 - 12:00">10:00 - 12:00</option>
  <option value="12:00 - 14:00">12:00 - 14:00</option>
  <option value="14:00 - 16:00">14:00 - 16:00</option>
  <option value="16:00 - 18:00">16:00 - 18:00</option>
  <option value="18:00 - 20:00">18:00 - 20:00</option>
 </select>
</div>
</body>
</html>

Good Luck!

Thread: Show/Hide a div when a radio is/isnt selected

Thread Tools

Display

Hybrid View

Show/Hide a div when a radio is/isnt selected

Something to consider ...

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions