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

Code:

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

Code:

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

Code:

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

Thread: Interactive Forms using HTML and Java Script

Thread Tools

Search Thread

Interactive Forms using HTML and Java Script

Bookmarks

Bookmarks

Posting Permissions