PDA

View Full Version : Javascript hide check box answer



cimm.mann
05-26-2009, 05:11 PM
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


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

Philip M
05-26-2009, 05:28 PM
Use this in place of your function showNext():-


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

cimm.mann
05-26-2009, 05:34 PM
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

Philip M
05-26-2009, 06:42 PM
What error? It ought to work. It is the same as your showNext() function only adapted to toggle the display.