Results 1 to 5 of 5

Thread: Interactive Forms using HTML and Java Script

  1. #1
    Join Date
    Jun 2012
    Posts
    33
    Thanks
    16
    Thanked 0 Times in 0 Posts

    Exclamation Interactive Forms using HTML and Java Script

    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?

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    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>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. #3
    Join Date
    Jun 2012
    Posts
    33
    Thanks
    16
    Thanked 0 Times in 0 Posts

    Default

    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?
    Last edited by gemzilla; 06-16-2012 at 09:06 AM. Reason: typo

  4. #4
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    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>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  5. #5
    Join Date
    Jun 2012
    Posts
    33
    Thanks
    16
    Thanked 0 Times in 0 Posts

    Default

    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>

Bookmarks

Posting Permissions

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