Results 1 to 6 of 6

Thread: Form with Navigation

  1. #1
    Join Date
    Nov 2010
    Posts
    15
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default Form with Navigation

    I am interested in a creating a form with navigation. For example, an accordian form! The form should only have one submit button. The accordian can be separated into categories. Each category in the accordian menu is "expanded" data is entered in the form under that category and then the menu is collapsed. And the user can move to the next category. At the end the user can submit the form. The intent is for use on a mobile device. Can anybody help?

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,791
    Thanks
    2
    Thanked 418 Times in 412 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[*/
    .content {
      width:400px;background-Color:#FFFFCC;
    }
    
    .header {
      width:400px;height:20px;background-Color:#FFCC66;
    }
    /*]]>*/
    </style>
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function Accordian(o){
     var oop=this,el=document.getElementById(o.ID),reg=new RegExp('\\b'+o.ContentClass+'\\b'),els=el.getElementsByTagName('*'),ary=[],head,min,cnt=0,z0=0,ms=o.Duration;
     for (; z0<els.length;z0++){
      if(reg.test(els[z0].className)){
       head=els[z0].getElementsByTagName('DIV')[0];
       min=head.offsetHeight;
       ary.push([els[z0],min,els[z0].offsetHeight,true]);
       els[z0].style.overflow='hidden';
       els[z0].style.height=min+'px';
       this.addevt(head,'mouseup','toggle',cnt++);
      }
     }
     this.ary=ary;
     this.ms=typeof(ms)=='number'?ms:1000;
     this.lst=false;
    }
    
    Accordian.prototype={
    
     toggle:function(nu){
      var ary=this.ary,lst=this.lst;
      if (ary[nu]){
       if (lst&&lst!=ary[nu]&&!lst[3]){
        clearTimeout(this.dly2);
        this.close(lst[0],lst[0].offsetHeight,lst[1],new Date(),this.ms)
        lst[3]=true;
       }
       clearTimeout(this.dly1);
       this.open(ary[nu][0],ary[nu][0].offsetHeight,ary[nu][ary[nu][3]?2:1],new Date(),this.ms)
       ary[nu][3]=!ary[nu][3];
       this.lst=ary[nu];
      }
     },
    
     open:function(obj,f,t,srt,mS){
      var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
      if (isFinite(now)&&now>0){
       obj.style.height=now+'px';
      }
      if (ms<mS){
       this.dly1=setTimeout(function(){ oop.open(obj,f,t,srt,mS); },10);
      }
      else {
       obj.style.height=t+'px';
      }
     },
    
     close:function(obj,f,t,srt,mS){
      var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
      if (isFinite(now)&&now>0){
       obj.style.height=now+'px';
      }
      if (ms<mS){
       this.dly2=setTimeout(function(){ oop.close(obj,f,t,srt,mS); },10);
      }
      else {
       obj.style.height=t+'px';
      }
     },
    
     addevt:function(o,t,f,p){
      var oop=this;
      if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p,e);}, false);
      else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](p,e); });
     }
    
    
    }
    
    /*]]>*/
    </script>
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function Init(){
    
    new Accordian({
     ID:'tst',
     ContentClass:'content',
     Duration:500
    });
    
    }
    
    if (window.addEventListener){
     window.addEventListener('load',Init, false);
    }
    else if (window.attachEvent){
     window.attachEvent('onload',Init);
    }
    
    /*]]>*/
    </script>
    
    </head>
    
    <body>
     <form id="tst">
      <div class="content" >
       <div class="header" >Section 1</div>
       Input 1 <input name="" /><br />
       Input 2 <input name="" /><br />
       Input 3 <input name="" /><br />
      </div>
      <div class="content" >
       <div class="header" >Section 2</div>
       Input 3 <input name="" /><br />
       Input 4 <input name="" /><br />
      </div>
      <input type="submit" name="" value="Submit" />
     </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
    Nov 2010
    Posts
    15
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default

    This works great! Thank you very much! The goal of this form is to push information collected in it to a formatted email. Before I get there can you help me create larger button like sections? I appreciate your support!

  4. #4
    Join Date
    Nov 2010
    Posts
    15
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default Script to create form field in form

    I am looking for a script that will create a form field in a webpage. For example, if I am using a web form to collect information (lets say rocks) and I would like to add a data field in a the rock section of the form and there are only 5 fields (rock1-rock5). If I would like to add another rock into the form before I submit then I would like to press a button "add another rock field" and then another field pops up "rock6"...

  5. #5
    Join Date
    Nov 2010
    Posts
    15
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default dynamically add form elements via JavaScript in accordian form above

    <script src="/wp-includes/js/addInput.js" language="Javascript" type="text/javascript"></script>

    var counter = 1;
    var limit = 3;
    function addInput(divName){
    if (counter == limit) {
    alert("You have reached the limit of adding " + counter + " inputs");
    }
    else {
    var newdiv = document.createElement('div');
    newdiv.innerHTML = "Entry " + (counter + 1) + " <br><input type='text' name='myInputs[]'>";
    document.getElementById(divName).appendChild(newdiv);
    counter++;
    }
    }

    Then in the accordian form;

    <div class="content" >
    <div class="header" >Section 2</div>
    Input 3 <input name="" /><br />
    Input 4 <input name="" /><br />

    <div id="dynamicInput">
    Entry 1<br><input type="text" name="myInputs[]">
    </div>
    <input type="button" value="Add another text input" onClick="addInput('dynamicInput');">
    </div>

    This works but the size of the region the fields are in stays the same as a result nothing can be added into the new field. Please help

  6. #6
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,791
    Thanks
    2
    Thanked 418 Times in 412 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[*/
    .content {
      width:400px;background-Color:#FFFFCC;
    }
    
    .header {
      width:400px;height:20px;background-Color:#FFCC66;
    }
    /*]]>*/
    </style>
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function Accordian(o){
     var oop=this,el=document.getElementById(o.ID),reg=new RegExp('\\b'+o.ContentClass+'\\b'),els=el.getElementsByTagName('*'),ary=[],head,min,cnt=0,z0=0,ms=o.Duration;
     for (; z0<els.length;z0++){
      if(reg.test(els[z0].className)){
       head=els[z0].getElementsByTagName('DIV')[0];
       min=head.offsetHeight;
       ary.push([els[z0],min,els[z0].offsetHeight,true]);
       els[z0].style.overflow='hidden';
       els[z0].style.height=min+'px';
       this.addevt(head,'mouseup','toggle',cnt++);
      }
     }
     this.ary=ary;
     this.ms=typeof(ms)=='number'?ms:1000;
     this.lst=false;
    }
    
    Accordian.prototype={
    
     toggle:function(nu){
      var ary=this.ary,lst=this.lst;
      if (ary[nu]){
       if (lst&&lst!=ary[nu]&&!lst[3]){
        clearTimeout(this.dly2);
        this.close(lst[0],lst[0].offsetHeight,lst[1],new Date(),this.ms)
        lst[3]=true;
       }
       clearTimeout(this.dly1);
       this.open(ary[nu][0],ary[nu][0].offsetHeight,ary[nu][ary[nu][3]?2:1],new Date(),this.ms)
       ary[nu][3]=!ary[nu][3];
       this.lst=ary[nu];
      }
     },
    
     open:function(obj,f,t,srt,mS){
      var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
      if (isFinite(now)&&now>0){
       obj.style.height=now+'px';
      }
      if (ms<mS){
       this.dly1=setTimeout(function(){ oop.open(obj,f,t,srt,mS); },10);
      }
      else {
       obj.style.height=t+'px';
      }
     },
    
     close:function(obj,f,t,srt,mS){
      var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
      if (isFinite(now)&&now>0){
       obj.style.height=now+'px';
      }
      if (ms<mS){
       this.dly2=setTimeout(function(){ oop.close(obj,f,t,srt,mS); },10);
      }
      else {
       obj.style.height=t+'px';
      }
     },
    
     addInput:function(nu,id){
      var ary=this.ary[nu],obj=ary[0],d=document.getElementById(id),cip=d.getElementsByTagName('INPUT')[0],h=cip.offsetHeight,nip=zxcAddField('INPUT','text',cip.name);
      nip.size=cip.size;
      obj.style.height=ary[2]+h+'px';
      d.appendChild(document.createElement('BR'));
      d.appendChild(nip);
      ips=obj.getElementsByTagName('INPUT');
      ary[2]+=h;
     },
    
     addevt:function(o,t,f,p){
      var oop=this;
      if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p,e);}, false);
      else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](p,e); });
     }
    
    
    }
    
    function zxcAddField(nn,type,nme){
     var obj;
     try {
      obj=document.createElement('<'+nn+' name="'+(nme||'')+'" '+(type?'type="'+type+'" ':'')+' >');
     }
     catch(error){
      obj=document.createElement(nn);
      if (type){
       obj.type=type;
      }
      obj.name=nme||'';
     }
     return obj;
    }
    
    
    /*]]>*/
    </script>
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function Init(){
    
    A=new Accordian({
     ID:'tst',
     ContentClass:'content',
     Duration:500
    });
    
    }
    
    if (window.addEventListener){
     window.addEventListener('load',Init, false);
    }
    else if (window.attachEvent){
     window.attachEvent('onload',Init);
    }
    
    /*]]>*/
    </script>
    
    </head>
    
    <body>
     <form id="tst">
      <div class="content" >
       <div class="header" >Section 1</div>
       Input 1 <input name="" /><br />
       Input 2 <input name="" /><br />
       Input 3 <input name="" /><br />
       <div id="dynamicInput">
        Entry 1<br><input type="text" name="myInputs[]">
       </div>
       <input type="button" value="Add another text input" onClick="A.addInput(0,'dynamicInput');">
      </div>
      <div class="content" >
       <div class="header" >Section 2</div>
       Input 3 <input name="" /><br />
       Input 4 <input name="" /><br />
       <div id="dynamicInput1">
        Entry 1<br><input type="text" name="myInputs[]">
       </div>
       <input type="button" value="Add another text input" onClick="A.addInput(1,'dynamicInput1');">
      </div>
      <input type="submit" name="" value="Submit" />
     </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/

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
  •