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 Coder
    Join Date
    May 2009
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Javascript hide check box answer

    Hi,

    I have got so close to finishing this stupid form... I know there isnt a onunclick method. But when I click the check box the answer appears. When i click of it, it does not disapear....

    can anyone please help me!

    thanks

    Code:
    <IMG src="/ukassets/images/75/CM%20new%20template/index_r2_c1.jpg" border=0> 
    <style type="text/css">	
    #container {
    width: 650px;
    margin: -12px;
    text-align: right;
    background: #ffffff;
    border: 0px #000000 solid;
    }
    div.inpane, div.outpane {
    background: #ffffff;
    border: 1px #003399 solid;
    padding: 15px;
    margin: 15px;
    font: normal 11px verdana;
    }
    div.inpane {
    position: relative;
    display: block;
    }
    div.outpane {
    position: relative;
    display: none;
    }
    select {
    width: 120px;
    }
    input.rad, input.box {
    position: relative;
    top: 3px;
    }
    </style>
    
    
    <script type = "text/javascript">
    
    function showNext(which) {
    document.getElementById(which).style.display="block";
    }
    </script>
    
    <div id="container">
    <div id ="firstname" class="inpane">
    First name:<input type = "text" name="firstname" onclick = "showNext('lastname')">
    
    </div>
    
    <div id ="lastname" class="inpane">
    Last name: <input type = "text" name="lastname" onclick = "showNext('emailaddress')">
    </div>
    
    <div id ="emailaddress" style=display:block class="inpane">
    Email: <input type = "text" name="emailaddress" onclick = "showNext('modules')">
    </div>
    
    <div id="modules" class="inpane">
    Which Modules are you interested in?<br><br>
    Dynamic Content<input class="rad" name="dynamic content" type="checkbox" value="yes" onclick = "showNext('dynamic')"><br>
    Deep Tracking<input class="rad" name="deep tracking" type="checkbox" value="yes" onclick = "showNext('deep')"><br><br>
    <img src="/ukassets/images/75/CM%20new%20template/continue.jpg" width="80" height="25" alt="" border="0">
    </div>
    
    <div id="dynamic" style=display:none class="outpane">
    How often would you use dynamic content?<br><br>
    Once a month<input class="rad" name="frequencydc" type="checkbox" value="1month" onclick = "showNext('a1')"><br>
    Twice a month<input class="rad" name="frequencydc" type="checkbox" value="2month" onclick = "showNext('a2')"><br>
    Three times a month<input class="rad" name="frequencydc" type="checkbox" value="3month" onclick = "showNext('a3')"><br>
    Four times a month<input class="rad" name="frequencydc" type="checkbox" value="4month" onclick = "showNext('a4')"><br><br>
    <img src="/ukassets/images/75/CM%20new%20template/continue.jpg" width="80" height="25" alt="" border="0">
    </div>
    
    <div id="deep" style=display:none class="inpane">
    How often would you use deep tracking?<br><br>
    Once a month<input class="rad" name="frequencydt" type="radio" value="1month" onclick = "showNext('b1')"><br>
    Twice a month<input class="rad" name="frequencydt" type="radio" value="2month" onclick = "showNext('b2')"><br>
    Three times a month<input class="rad" name="frequencydt" type="radio" value="3month" onclick = "showNext('b3')"><br>
    Four times a month<input class="rad" name="frequencydt" type="radio" value="4month" onclick = "showNext('b4')"><br><br>
    <img src="/ukassets/images/75/CM%20new%20template/continue.jpg" width="80" height="25" alt="" border="0">
    </div>
    
    <div id="a1" style=display:none class="inpane">
    <h3>Once a month</h3><br>
    This might be £100 per go, this is just an example of text</div>
    
    <div id="a2" style=display:none class="inpane">
    <h3>Twice a month</h3><br>This might be £200 per go, this is just an example of text</div>
    
    <div id="a3" style=display:none class="inpane">
    <h3>Three times a month</h3><br> -This might be £300 per go, this is just an example of text</div>
    
    <div id="a4" style=display:none class="inpane">
    <h3>Four Times a month a month</h3><br> -This might be £400 per go, this is just an example of text</div>
    
    <div id="b1" style=display:none class="inpane">
    <h3>Once a month</h3><br>
    This might be £100 per go, this is just an example of text</div>
    
    <div id="b2" style=display:none class="inpane">
    <h3>Twice a month</h3><br>This might be £200 per go, this is just an example of text</div>
    
    <div id="b3" style=display:none class="inpane">
    <h3>Three times a month</h3><br> -This might be £300 per go, this is just an example of text</div>
    
    <div id="b4" style=display:none class="inpane">
    <h3>Four Times a month a month</h3><br> -This might be £400 per go, this is just an example of text</div>
    
    
    <div id="final" class="inpane">
    <input type="submit" value="Submit">
    </div>

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,173
    Thanks
    203
    Thanked 2,549 Times in 2,527 Posts
    Use this in place of your function showNext():-

    Code:
    function Toggle(which) {
    	var Style = document.getElementById(which).style;
    	Style.display = (Style.display == "none") ? "block" : "none";
    }

    The Moving Finger writes; and, having writ,
    Moves on: nor all your piety nor wit
    Shall lure it back to cancel half a line,
    Nor all your tears wash out a word of it.

    -- Omar Khayyam

  • #3
    New Coder
    Join Date
    May 2009
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    this doesnt work, i keeps coming up with a error.

    I replaced the shownext function with what you told me and changed all the shownext's in the code to toggle.

    is this correct?

    sorry philip

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,173
    Thanks
    203
    Thanked 2,549 Times in 2,527 Posts
    What error? It ought to work. It is the same as your showNext() function only adapted to toggle the display.


  •  

    Posting Permissions

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