Display/Hide DIV Based on Radio Button Input

Hi Guys,

I'm fairly new to Javascript and would be grateful for any help you can give me. I've had a search on Google and found a couple of potential solutions but nothing seems to work quite right for what I need.

Basically I have a form with several questions followed by Yes/No radio buttons. Dependent on which answer is given, I want to display a different message above the text box.

For example, if you answered 'no' to a certain question then the message above the text box would change to say "Please fill in additional information" or something along those lines.

Below is the HTML to give you an idea of what I mean.


<table>
<tr>
<td>&nbsp;</td>
<td><label class="bold">Yes</label></td>
<td><label class="bold">No</label></td>
</tr>
<tr>
<td><label for="property_q1"> - Is this your house?</label></td>

<td><input name="property_q1" id="property_q1" type="radio" value="Yes" /></td>

<td><input name="property_q1" id="property_q1" type="radio" value="No" /></td>
</tr>
</table>

<br />

<div id="fine">It's fine, don't worry about filling it in.</div>
<div id="fill" style="display:none">Please fill in the form below.</div>
<table>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td><textarea name="info" id="info" cols="60" rows="5"></textarea></td>
</tr>
</table>
<input type="submit" />

Is this what you are looking for?

<table>
<tr>
<td>&nbsp;</td>
<td><label class="bold">Yes</label></td>
<td><label class="bold">No</label></td>
</tr>
<tr>
<td><label for="property_q1"> - Is this your house?</label></td>

<td><input name="property_q1" type="radio" value="Yes" onclick = "showMessage(1)"/></td>
<td><input name="property_q1" type="radio" value="No" onclick = "showMessage(2)"/></td>
</tr>
</table>

<br />

<div id="fine" style="display:none">It's fine, don't worry about filling it in.</div>
<div id="fill" style="display:none">Please fill in the form below.</div>
<table>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td><textarea name="info" id="info" cols="60" rows="5"></textarea></td>
</tr>
</table>

<script type = "text/javascript">
function showMessage(which) {
if (which == 1) {
document.getElementById("fine").style.display = "block";
document.getElementById("fill").style.display = "none";
}
else {
document.getElementById("fine").style.display = "none";
document.getElementById("fill").style.display = "block";
}
}
</script>

In last month's article about beer and the many breweries in Belgium, 'rapist monks' should have read 'Trappist monks'. - Woking Review

That's a brilliant script, very useful and works perfectly for what I need it for.

Thank you very much for taking the time to put that together, made my day a hell of a lot less stressful! lol

:thumbsup:

That's a brilliant script, very useful and works perfectly for what I need it for.

Thank you very much for taking the time to put that together, made my day a hell of a lot less stressful! lol

:thumbsup:

Hardly brilliant, rather simple, but I am glad to have been of use to the Goddess of Wisdom! :D