PDA

View Full Version : Javascript help please!



cimm.mann
05-22-2009, 03:36 PM
Hi,

In this code ive made i need some help.

I would like the answers to appear as soon as the form is clicked - so if they click a check box the field will display straight away as apposed to having to click off it.

Also i need the answer to appear and disapear as they click on and off.

can you help me please?

thanks


<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" onblur = "showNext('lastname')">

</div>

<div id ="lastname" class="inpane">
Last name: <input type = "text" name="lastname" onblur = "showNext('emailaddress')">
</div>

<div id ="emailaddress" style=display:block class="inpane">
Email: <input type = "text" name="emailaddress" onblur = "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="radio" value="yes" onblur = "showNext('dynamic')"><br>
Deep Tracking<input class="rad" name="deep tracking" type="radio" value="yes" onblur = "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="radio" value="1month" onblur = "showNext('a1')"><br>
Twice a month<input class="rad" name="frequencydc" type="radio" value="2month" onblur = "showNext('a2')"><br>
Three times a month<input class="rad" name="frequencydc" type="radio" value="3month" onblur = "showNext('a3')"><br>
Four times a month<input class="rad" name="frequencydc" type="radio" value="4month" onblur = "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" onblur = "showNext('b1')"><br>
Twice a month<input class="rad" name="frequencydt" type="radio" value="2month" onblur = "showNext('b2')"><br>
Three times a month<input class="rad" name="frequencydt" type="radio" value="3month" onblur = "showNext('b3')"><br>
Four times a month<input class="rad" name="frequencydt" type="radio" value="4month" onblur = "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>