Hi I need a sample code that will hide or disable the next fields base on my previous selection
For example if I have two radio buttons M and F for Gender and I selected M, the fields related to F will be hidden or disabled.
Any idea on how can this be done? Thanks
This is a javascript job.
e.g.
<html>
<head>
<title>My dynamic page</title>
<script type="text/javascript">
function checkGender () {
var male, female, bustsize, ahemsize, gender;
male = document.getElementById('radio_select_m');
female = document.getElementById('radio_select_f');
bustsize = document.getElementById('bust_size');
ahemsize = document.getElementById('ahem_size');
if (male.checked) {
bustsize.disabled = true;
ahemsize.disabled = false;
} else if (female.checked) {
bustsize.disabled = false;
ahemsize.disabled = true;
}
}
</script>
</head>
<body>
<form name="myform" action="a_page.php" method="GET">
I am...<br />
Male <input type="radio" id="radio_select_m" name="gender_select" onmouseup="checkGender();" onkeyup="checkGender();" /><br />
Female<input type="radio" id="radio_select_f" name="gender_select" onmouseup="checkGender();" onkeyup="checkGender();" /><br />
<br />
Enter your bust size <input type="text" name="bust_size" id="bust_size" value="34C" /><br />
Enter the length of your personal area <input type="text" name="ahem_size" id="ahem_size" value="12 inches" /><br />
<br />
<input type="submit" value="Tell us some very personal information">
</form>
</body>
</html>
The best way to do this is with the 'onkeyup' and 'onmouseup' events, but the problem with these is that, at least in IE (evil evil evil) the 'checked' property is not changed until after the event has been called. This means that the first time you select something, the function effectively does nothing.
The alternative approach is to use the 'onchange' event, but this means that the function is not called until you change focus to another element, so nothing appears to happen until you try to do something else.
It's a bit catch 22 - probably the best compromise is to use 'onchange' as this will always work first time, just not until you try and do something else.
The other, always works, approach to that problem is this...
<script type="text/javascript">
function checkGender (exec) {
if (exec != undefined) {
setTimeout(checkGender,10);
return;
}
var male, female, bustsize, ahemsize, gender;
male = document.getElementById('radio_select_m');
female = document.getElementById('radio_select_f');
bustsize = document.getElementById('bust_size');
ahemsize = document.getElementById('ahem_size');
if (male.checked) {
bustsize.disabled = true;
ahemsize.disabled = false;
} else if (female.checked) {
bustsize.disabled = false;
ahemsize.disabled = true;
}
}
</script>
...
Male <input type="radio" id="radio_select_m" name="gender_select" onmouseup="checkGender(true);" onkeyup="checkGender(true);" />
...but it's a bit messy.
P.S. Apologies for being crude, but it's hard to resist when you are mentally 8 years old... 
One simple way of doing it is this
<script type="text/javascript">
function showHideContent(o)
{
var id = o.name + '_' + o.value;
var blockRoot = o.parentNode;
while (blockRoot != undefined && blockRoot.nodeName != 'FIELDSET')
{
blockRoot = blockRoot.parentNode;
}
if (blockRoot == undefined)
{
return null;
}
var hidden = blockRoot.getElementsByClassName('toggleHide');
var shown = blockRoot.getElementsByClassName('toggleShow');
for (var i = 0; i < shown.length; ++i)
{
if (shown[i].id != id)
{
shown[i].className = 'toggleHide';
}
}
for (var i = 0; i < hidden.length; ++i)
{
if (hidden[i].id == id)
{
hidden[i].className = 'toggleShow';
}
}
}
</script>
<style type="text/css">
.toggleHide { display: none; }
div .toggleShow { display: block; }
span .toggleShow { display: inline; }
</style>
</head>
<body style="margin: 30px;">
<form action="" method="post">
<fieldset>
<legend>Group A</legend>
<label>Male <input type="radio" name="gender" value="male" onclick="showHideContent(this)" checked="checked"/></label>
<label>Female <input type="radio" name="gender" value="female" onclick="showHideContent(this)"/></label>
<div id="gender_male" class="toggleShow">
Male options...
</div>
<div id="gender_female" class="toggleHide">
Female options...
</div>
</fieldset>
<fieldset>
<legend>Group B</legend>
<label>Age
<select name="age" onclick="showHideContent(this)">
<option value="10_20">10 to 20</option>
<option value="20_30" selected="selected">20 to 30</option>
<option value="40_plus">40+</option>
</select>
</label>
<div id="age_10_20" class="toggleHide">
Stuff for people between 10 and 20 years
</div>
<div id="age_20_30" class="toggleShow">
Stuff for people between 20 and 30 years
</div>
<span id="age_40_plus" class="toggleHide">
Stuff for people above 40 years
</span>
</fieldset>
I supposed it could be argued that this approach ties the CSS class into program logic, but you might just as well see it as the elements' class attribute is tied into both program logic and CSS.
But one problem that could definitely arise is the difference in how value attributes and id attributes are handled. The id attribute has to be unique, while there is no such constraint on a combination of a name attribute, '', and a value attribute (which is what I use to build myself a string to look for as id. Also, the ID attribute has some restrictions on allowed values. So, either you have to make sure you don't use name attribute values and/or value attribute values that will target an invalid id (obviously), or you'd have to use string replace and/or regexp to strip out characters that would be invalid as ids, but that would also increase the (mathematical) probability of having different combinations of name + '' + value turning into the same string.
And you should probably add logic to deal with page reloads. For example, when you first load the page, male is preselected and the male div is shown. But if you select the female option and reload the page, the male option is selected and the female div is shown...