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 2 of 2
  1. #1
    New Coder
    Join Date
    Oct 2011
    Posts
    92
    Thanks
    38
    Thanked 0 Times in 0 Posts

    Question Hidden text to reveal on certain conditions..

    Hi I have the following code. What I want to do is for certain questions to remain hidden inless certain conditions are met, then they appear to be answered. I am thinking with the <div> but not sure how. I also thought maybe with css but cant write a if statement in css so that a no go.

    Please help.

    Code:
    <tr><td align="left">Do you own a Yorkie?<br />
    <input type="radio" name="owner" value="yes" /> Yes 
    <input type="radio" name="owner" value="no" checked="checked" /> No<br />
    <!-- If answer is no above the below questions are hidden, if yes then they appear -->>
    <div id="breeders">
    How many? <select name="qnty" size="1"> 
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5+</option></select> 
    Are you a breeder? <input type="radio" name="breeder" value="yes" checked="checked" /> Yes 
    <input type="radio" name="breeder" value="no" /> No</div></td></tr>
    JavaScript Code: I am using a onload within the form opening tag
    Code:
    function showDiv() {
    if(document.forms[2].owner.value == "yes") {
    document.getElementById('breeders').style.visibility = 'visible';
    }
    else
    document.getElementById('breeders').style.visibility = 'hidden';
    }
    Last edited by hans_cellc; 10-13-2011 at 11:22 AM.

  • #2
    New Coder
    Join Date
    Oct 2011
    Posts
    92
    Thanks
    38
    Thanked 0 Times in 0 Posts
    I got it: in my body I placed the following onload:

    Code:
    onload="document.getElementById('breeders').style.visibility = 'hidden';"
    I then changed my javaScript to two seperate functions:

    Code:
    function showDiv() {
    document.getElementById('breeders').style.visibility = 'visible';
    }
    
    function hideDiv() {
    document.getElementById('breeders').style.visibility = 'hidden';
    }
    and then added to calling handlers:

    Code:
    <tr><td align="left">Do you own a Yorkie?<br />
    <input type="radio" name="owner" value="yes"  onclick="showDiv()" /> Yes 
    <input type="radio" name="owner" value="no" checked="checked" onclick="hideDiv()" /> No<br />
    <!-- If answer is no above the below questions are hidden, if yes then they appear -->
    <div id="breeders">
    How many? <select name="qnty" size="1"> 
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5+</option></select> 
    Are you a breeder? <input type="radio" name="breeder" value="yes" /> Yes 
    <input type="radio" name="breeder" value="no" checked="checked" /> No</div></td></tr>


  •  

    Posting Permissions

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