Form with Navigation

**brazil** · 11-22-2011, 05:08 AM

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?

**vwphillips** · 11-22-2011, 03:47 PM

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>

**brazil** · 11-23-2011, 02:01 AM

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!

**brazil** · 01-07-2012, 05:31 AM

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"...

**brazil** · 01-15-2012, 07:01 PM

**vwphillips** · 01-16-2012, 10:32 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[*/
.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>

Thread: Form with Navigation

Thread Tools

Search Thread

Form with Navigation

Script to create form field in form

dynamically add form elements via JavaScript in accordian form above

Bookmarks

Bookmarks

Posting Permissions