PDA

View Full Version : Interactive Forms using HTML and Java Script



gemzilla
06-14-2012, 02:08 PM
I am making an interactive form for a website.

I want it so when a visitor checks the radio button another set of questions will appear.

so far I have created the DIV which contains the questions to appear.

What do I do now for the java script?

vwphillips
06-15-2012, 11:38 AM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/

.answer {
overflow:hidden;width:200px;height:0px;background-Color:#FFCC66;
}

/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/

function zxcShow(id,nu,ms){
var o=zxcShow[id],f,t;
if (!zxcShow[id]){
var clds=document.getElementById(id).childNodes,ary=[],z0=0;
for (;z0<clds.length;z0++){
if (clds[z0].nodeType==1){
ary.push([clds[z0],clds[z0].getElementsByTagName('DIV')[0].offsetHeight,'dly'+z0]);
clds[z0].style.height='0px';
}
}
o=zxcShow[id]={
ary:ary,
ms:typeof(ms)=='number'?ms:500
}
}
if (o.ary&&o.ary[nu]){
if (o.lst&&o.lst!=o.ary[nu]){
f=o.lst[0].offsetHeight,t=0;
animate(o,o.lst[0],f,t,new Date(),o.ms*Math.abs((t-f)/o.lst[1]),o[o.lst[2]]);
}
f=o.ary[nu][0].offsetHeight,t=o.ary[nu][1];
animate(o,o.ary[nu][0],f,t,new Date(),o.ms*Math.abs((t-f)/o.ary[nu][1]),o[o.ary[nu][2]]);
o.lst=o.ary[nu];
}
}

function animate(o,obj,f,t,srt,mS,to){
var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
if (isFinite(now)){
obj.style.height=Math.max(now,0)+'px';
}
if (ms<mS){
o[to]=setTimeout(function(){ oop.animate(o,obj,f,t,srt,mS,to); },10);
}
else {
obj.style.height=t+'px';
}
}

/*]]>*/
</script>

</head>

<body>
<form >
<input type="radio" name="Q1" onclick="zxcShow('A1',0);" />
<input type="radio" name="Q1" onclick="zxcShow('A1',1);" />
<div id="A1" >
<div class="answer">
<div >
Answer 1<br />
Answer 2<br />
Answer 3<br />
</div>
</div>
<div class="answer">
<div >
Answer 4<br />
Answer 5<br />
Answer 6<br />
Answer 7<br />
</div>
</div>
</div>
</form>
</body>

</html>

gemzilla
06-16-2012, 09:06 AM
Thank you for your reply, however i have never used java script and i have no idea what all that means lol.

I dont need anything fancy, just something like:

IF this radio button is checked THEN
un hide this div
ENDIF

is that possible?

vwphillips
06-16-2012, 01:39 PM
<style type="text/css">
/*<![CDATA[*/

.answer {
overflow:hidden;display:none;width:200px;height:100px;background-Color:#FFCC66;
}

/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/

function zxcShow(id,closelast){
var obj=document.getElementById(id);;
if (closelast&&zxcShow.lst){
zxcShow.lst.style.display='none';

}
obj.style.display='block';
zxcShow.lst=obj;
}

function animate(o,obj,f,t,srt,mS,to){
var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
if (isFinite(now)){
obj.style.height=Math.max(now,0)+'px';
}
if (ms<mS){
o[to]=setTimeout(function(){ oop.animate(o,obj,f,t,srt,mS,to); },10);
}
else {
obj.style.height=t+'px';
}
}

/*]]>*/
</script>

</head>

<body>

</body>
<input type="radio" name="tom" onmouseup="zxcShow('b1',true);" />
<input type="radio" name="tom" onmouseup="zxcShow('b2',true);" />


<div id="b1" class="answer" >
<div>
Answer 1<br />
Answer 2<br />
Answer 3<br />
</div>
</div>

<div id="b2" class="answer" >
<div>
Answer 4<br />
Answer 5<br />
Answer 6<br />
</div>
</div>

</html>

gemzilla
06-18-2012, 09:53 AM
Thank you, this has been very helpful. One more query:

I have this code which consists of a check box and when a user checks it some radio buttons pop down. I would like it so that when they un check it removes in checked radio buttons and then makes the radio buttons dissapear.

This is the code I have a the moment:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style type="text/css">
/*<![CDATA[*/

.answer {
overflow:hidden;display:none;
}

/*]]>*/
</style>

<script type="text/javascript">
/*<![CDATA[*/

function zxcShow(id,closelast){
var obj=document.getElementById(id);;
if (closelast&&zxcShow.lst){
zxcShow.lst.style.display='none';

}
obj.style.display='block';
zxcShow.lst=obj;
}


/*]]>*/
</script>

</head>

<body>
<table width="166" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="166" valign="top"><span class="Text">
<input name="Question" type="checkbox" id="question" value="Question" onmouseup="zxcShow('b2',true);" />
Question
</span></td>
</tr>
<tr>
<td height="19" valign="top">

<div id='b2' class="answer">
<p><strong>I hold:</strong></p>
<p>Answer 1
<input type="radio" name="radio" id="answer1" value="Answer 1" />
</p>
<p>Answer 2
<input type="radio" name="radio" id="answer2" value="Answer 2" />
</p>
<p>Answer 3
<input type="radio" name="radio" id="answer3" value="Answer 3" />
</p>
</div></td>
</tr>
</table>
</body>
</html>