Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    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.

    Code:
    <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" />

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,731
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    Is this what you are looking for?

    Code:
    <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

  • Users who have thanked Philip M for this post:

    Minerva (12-01-2009)

  • #3
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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


  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,731
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    Quote Originally Posted by Minerva View Post
    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

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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •