...

View Full Version : Help needed in adding next and Back Buttons



keranali
02-11-2012, 08:07 PM
Hello everyone,

I am totally new to javascript, I have a web form I designed using coffeecup, the form is very long about 4 pages long and it is all in one long scroll down the page, I was wondering if I can add page breaks and at the bottom of each categoty inserting a button for next and back whilst hiding the rest of the categories until next is clicked etc. until you reach submit.

Please help in anyway you can?\

Yhanks
K

xelawho
02-11-2012, 08:49 PM
you can put the sections into divs and show one and hide the rest:



<html>
<head>
</head>
<body>
<form name="myform">
<div>
Lifespan and life stages
<p>Depending on breed, management and environment, the modern domestic horse
has a life expectancy of 25 to 30 years.[6] Uncommonly, a few animals live
into their 40s and, occasionally, beyond.[7] The oldest verifiable record
was &quot;Old Billy&quot;, a 19th-century horse that lived to the age of 62.[6]
In modern times, Sugar Puff, who had been listed in the Guinness Book of World
Records as the world's oldest living pony, died in 2007 at age 56.[8]</p>
<p>Regardless of a horse's actual birth date, for most competition purposes,
an animal is considered a year older on January 1 of each year in the Northern
Hemisphere[6][9] and August 1 in the Southern Hemisphere.[10] The exception
is in endurance riding, where the minimum age to compete is based on the animal's
actual calendar age.[11]</p>
<p>The following terminology is used to describe horses of various ages:</p>
<p> Foal: a horse of either sex less than one year old. A nursing foal is sometimes
called a suckling and a foal that has been weaned is called a weanling.[12]
Most domesticated foals are weaned at five to seven months of age, although
foals can be weaned at four months with no adverse physical effects.[13]<br>
Yearling: a horse of either sex that is between one and two years old.[14]<br>
Colt: a male horse under the age of four.[15] A common terminology error is
to call any young horse a &quot;colt&quot;, when the term actually only refers
to young male horses.[16]<br>
Filly: a female horse under the age of four.[12]<br>
Mare: a female horse four years old and older.[17]<br>
Stallion: a non-castrated male horse four years old and older.[18] Some people,
particularly in the UK, refer to a stallion as a &quot;horse&quot;.[19]<br>
Gelding: a castrated male horse of any age.[12]</p>
<p>In horse racing, these definitions may differ: For example, in the British
Isles, Thoroughbred horse racing defines colts and fillies as less than five
years old.[20] However, Australian Thoroughbred racing defines colts and fillies
as less than four years old.[21]</p>
<input type="button" value="see next" onclick="goNext(0)"/>
</div>
<div>
<p>Colors and markings<br>
Two horses in a field. The one on the left is a dark brown with black mane
and tail. The one on the right is a light red all over.<br>
Bay (left) and chestnut (sometimes called &quot;sorrel&quot;) are two of the
most common coat colors, seen in almost all breeds.<br>
Main articles: Equine coat color, Equine coat color genetics, and Horse markings</p>
<p>Horses exhibit a diverse array of coat colors and distinctive markings, described
with a specialized vocabulary. Often, a horse is classified first by its coat
color, before breed or sex.[35] Horses of the same color may be distinguished
from one another by white markings,[36] which, along with various spotting
patterns, are inherited separately from coat color.[37]</p>
<p>Many genes that create horse coat colors have been identified, although research
continues to further identify factors that result in specific traits. One
of the first genetic relationships to be understood was that between recessive
&quot;red&quot; (chestnut) and dominant &quot;black&quot; allele that is controlled
by the Melanocortin 1 receptor, also known as the &quot;extension gene&quot;
or &quot;red factor.&quot; Additional genes control suppression of base red
and black color to point coloration as seen in bay, spotting patterns such
as pinto or leopard, dilutions such as palomino or dun, as well as graying,
and all the other factors that create the dozens of possible coat colors found
in horses.[38] These colors can be modified by at least ten other genes to
create all other colors.[38]</p>
<p>Horses which have a white coat color are often mislabeled; a horse that looks
&quot;white&quot; is usually a middle-aged or older gray. Grays are born a
darker shade, get lighter as they age, and usually have black skin underneath
their white hair coat (with the exception of pink skin under white markings).
The only horses properly called white are born with a white hair coat and
have predominantly pink skin, a fairly rare occurrence.[39] Different and
unrelated genetic factors can produce white coat colors in horses, including
several different alleles of dominant white and the sabino-1 gene.[40] However,
there are no &quot;albino&quot; horses, defined as having both pink skin and
red eyes.[41</p>
<input type="button" value="see previous" onclick="goBack(1)"/> <input type="button" value="see next" onclick="goNext(1)"/>
</div>
<div>
<p>Skeletal system<br>
Main article: Skeletal system of the horse<br>
Diagram of a horse skeleton with major parts labeled.<br>
The skeletal system of a modern horse</p>
<p>Horses have a skeleton that averages 205 bones.[49] A significant difference
between the horse skeleton and that of a human, is the lack of a collarbone—the
horse's forelimbs are attached to the spinal column by a powerful set of muscles,
tendons, and ligaments that attach the shoulder blade to the torso. The horse's
legs and hooves are also unique structures. Their leg bones are proportioned
differently from those of a human. For example, the body part that is called
a horse's &quot;knee&quot; is actually made up of the carpal bones that correspond
to the human wrist. Similarly, the hock contains bones equivalent to those
in the human ankle and heel. The lower leg bones of a horse correspond to
the bones of the human hand or foot, and the fetlock (incorrectly called the
&quot;ankle&quot;) is actually the proximal sesamoid bones between the cannon
bones (a single equivalent to the human metacarpal or metatarsal bones) and
the proximal phalanges, located where one finds the &quot;knuckles&quot; of
a human. A horse also has no muscles in its legs below the knees and hocks,
only skin, hair, bone, tendons, ligaments, cartilage, and the assorted specialized
tissues that make up the hoof.[50]</p>
<input type="button" value="see previous" onclick="goBack(2)"/>
<input type="submit" value="Submit" />
</div>
</form>
<script type="text/javascript">
var divs=document.myform.getElementsByTagName("div")
for ( x = 0; x < divs.length; x++ ){
divs[x].style.display="none"
}
divs[0].style.display="block"

function goNext(divnum){
divs[divnum].style.display="none"
divs[divnum+1].style.display="block"
}
function goBack(divnum){
divs[divnum].style.display="none"
divs[divnum-1].style.display="block"
}
</script>
</body>
</html>

keranali
02-11-2012, 09:49 PM
Hello xelawho

Thank you for your help however I am a bit lost I am a total newbee
can you show me with this code I tried but the form isn't working the way it suppose to.

thanks a million
k




<!DOCTYPE HTML>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Start of the headers for CoffeeCup Web Form Builder -->
<script type="text/javascript" src="common/js/form_init.js" data-name=""
id="form_init_script">
</script>
<link rel="stylesheet" type="text/css" href="theme/default/css/default.css"
id="theme" />
<!-- End of the headers for CoffeeCup Web Form Builder -->
<title>
Web form test 1
</title>
</head>

<body>
<!-- Start of the body content for CoffeeCup Web Form Builder -->
<form style="BACKGROUND-COLOR: rgb(246,246,246); WIDTH: 900px; COLOR: #000333; FONT-SIZE: 13px; WebkitTransform: ; webkitTransform: scale(1)"
id="docContainer" class="fb-100-item-column fb-toplabel fb-large selected-object"
enctype="multipart/form-data" method="post" action="../Web form test 1.php"
novalidate="novalidate" data-form="manual_iframe">
<div style="MIN-HEIGHT: 20px" id="fb-form-header1" class="fb-form-header">
<a id="fb-link-logo1" class="fb-link-logo" href="" target="_blank"><img style="DISPLAY: none" id="fb-logo1" class="fb-logo" title="Alternative text" alt="Alternative text" src="common/images/image_default.png"/></a>
</div>
<div id="section1" class="section fb-100-item-column">
<div id="column1" class="column ui-sortable">
<div style="MIN-HEIGHT: 4552px; DISPLAY: none" id="fb_confirm_inline">
</div>
<div style="DISPLAY: none" id="fb_error_report">
</div>
<div style="FILTER: " id="item2" class="fb-item fb-100-item-column">
<div class="fb-header fb-item-alignment-center">
<h2 style="COLOR: #9fa0ab; FONT-SIZE: 30px">
Ttal
</h2>
</div>
</div>
<div style="FILTER: " id="item4" class="fb-item fb-100-item-column">
<div class="fb-header fb-item-alignment-left">
<h2 style="DISPLAY: inline; COLOR: #ff0015; FONT-SIZE: 20px">
Step 1. Let's Start with the Basics
</h2>
</div>
</div>
<div style="FILTER: ; PADDING-BOTTOM: 2px; PADDING-RIGHT: 10px; PADDING-TOP: 20px"
id="item3" class="fb-item fb-25-item-column">
<div class="fb-grouplabel">
<label style="FONT-STYLE: normal; DISPLAY: inline" id="item3_label_0">
What's Today's Date
</label>
</div>
<div class="fb-input-date">
<input id="item3_date_1" class="datepicker" name="date3" autofocus required
data-hint="" type="date" />
</div>
</div>
<div style="FILTER: ; PADDING-BOTTOM: 2px; PADDING-TOP: 20px" id="item54"
class="fb-item fb-25-item-column">
<div class="fb-grouplabel">
<label style="DISPLAY: inline" id="item54_label_0">
Expected Delivery Date
</label>
</div>
<div class="fb-input-date">
<input id="item54_date_1" class="datepicker" name="date54" data-hint=""
type="date" />
</div>
</div>
<div style="FILTER: ; PADDING-RIGHT: 65px; HEIGHT: 50px" id="item55" class="fb-item fb-20-item-column">
<div class="fb-spacer">
<div id="item55_div_0">
</div>
</div>
</div>
<div style="FILTER: ; PADDING-BOTTOM: 2px; PADDING-RIGHT: 4px; PADDING-TOP: 20px"
id="item11" class="fb-item fb-25-item-column">
<div class="fb-grouplabel">
<label style="DISPLAY: inline" id="item11_label_0">
Job Number
</label>
</div>
<div class="fb-input-number">
<input id="item11_number_1" name="number11" required data-hint="" step="1"
autocomplete="off" max="999999999" min="0" type="number" />
</div>
</div>
<div style="FILTER: ; PADDING-BOTTOM: 0px; PADDING-TOP: 0px" id="item133"
class="fb-item fb-100-item-column">
<div class="fb-static-text">
<p style="FONT-SIZE: 11px">
Yes we all want our jobs printed first, however setting a resonable expected
delivery date will help in preventing spoil jobs.
</p>
</div>
</div>
<div style="FILTER: ; PADDING-RIGHT: 10px" id="item7" class="fb-item fb-25-item-column">
<div class="fb-grouplabel">
<label style="DISPLAY: inline" id="item7_label_0">
First Name
</label>
</div>
<div class="fb-input-box">
<input id="item7_text_1" class="" name="text7" maxlength="40" required
data-hint="" autocomplete="on" placeholder="John" type="text" />
</div>
</div>
<div style="FILTER: ; PADDING-RIGHT: 10px" id="item8" class="fb-item fb-25-item-column">
<div class="fb-grouplabel">
<label style="DISPLAY: inline" id="item8_label_0">
Last Name
</label>
</div>
<div class="fb-input-box">
<input id="item8_text_1" class="" name="text8" maxlength="40" required
data-hint="" autocomplete="on" placeholder="Doe" type="text" />
</div>
</div>
<div style="FILTER: " id="item14" class="fb-item">
<div class="fb-sectionbreak">
<hr style="BORDER-TOP: 1px solid">
</div>
</div>
<div id="item15" class="fb-item fb-100-item-column">
<div class="fb-header">
<h2 style="DISPLAY: inline; COLOR: #ff0015; FONT-SIZE: 20px">
Step 2. Company Information
</h2>
</div>
</div>
<div style="FILTER: " id="item16" class="fb-item fb-100-item-column">
<div class="fb-grouplabel">
<label style="DISPLAY: inline" id="item16_label_0">
Company Name
</label>
</div>
<div class="fb-input-box">
<input id="item16_text_1" class="" name="text16" maxlength="254" required
data-hint="" autocomplete="on" placeholder="The Office Authority Limited"
type="text" />
</div>
</div>
<div style="FILTER: ; PADDING-RIGHT: 10px" id="item17" class="fb-item fb-25-item-column">
<div class="fb-grouplabel">
<label style="DISPLAY: inline" id="item17_label_0">
Contact Person
</label>
</div>
<div class="fb-input-box">
<input id="item17_text_1" class="" name="text17" maxlength="254" required
data-hint="" autocomplete="on" placeholder="Jane Doe" type="text" />
</div>
</div>
<div style="FILTER: ; PADDING-RIGHT: 10px" id="item34" class="fb-item fb-25-item-column">
<div class="fb-grouplabel">
<label id="item34_label_0">
Phone Number
</label>
</div>
<div class="fb-phone">
<input id="item34_tel_1" class="" name="tel34" data-hint="" placeholder="868-658-3546"
type="tel" />
</div>
</div>
<div style="FILTER: " id="item42" class="fb-item fb-50-item-column">
<div class="fb-grouplabel">
<label id="item42_label_0">
Email
</label>
</div>
<div class="fb-input-box">
<input id="item42_email_1" class="" name="email42" maxlength="254" data-hint=""
autocomplete="on" placeholder="you@domain.com" type="email" />
</div>
</div>
<div id="item35" class="fb-item fb-75-item-column">
<div class="fb-grouplabel">
<label style="DISPLAY: inline" id="item35_label_0">
Address
</label>
</div>
<div class="fb-input-box">
<input id="item35_text_1" class="" name="text35" maxlength="254" required
data-hint="" autocomplete="on" placeholder="Street Address " type="text"
/>
</div>
</div>
<div style="FILTER: " id="item38" class="fb-item fb-25-item-column">
<div class="fb-grouplabel">
<label style="DISPLAY: inline" id="item38_label_0">
City
</label>
</div>
<div class="fb-input-box">
<input id="item38_text_1" class="" name="text38" maxlength="60" required
data-hint="" autocomplete="on" placeholder="Port of Spain" type="text"
/>
</div>
</div>

xelawho
02-11-2012, 11:05 PM
ah, yeah - I didn't think that your form would already have divs :(

I don't know where you want your "pagination" so I guessed. By the looks of it, you'll have to wrap your "pages" in additional divs (you can find where your sections start and finish by using firebug's html inspector). With the code below the additional divs start like this:

<div class="section_break">
and end like all divs do, like this:

</div>

just before that end tag you put the buttons.

good luck!



<!DOCTYPE HTML>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Start of the headers for CoffeeCup Web Form Builder -->
<script type="text/javascript" src="common/js/form_init.js" data-name="" id="form_init_script">
</script>
<link rel="stylesheet" type="text/css" href="theme/default/css/default.css"
id="theme" />
<!-- End of the headers for CoffeeCup Web Form Builder -->
<title>
Web form test 1
</title>
</head>

<body>
<!-- Start of the body content for CoffeeCup Web Form Builder -->
<form style="BACKGROUND-COLOR: rgb(246,246,246); WIDTH: 900px; COLOR: #000333; FONT-SIZE: 13px; WebkitTransform: ; webkitTransform: scale(1)"
id="docContainer" class="fb-100-item-column fb-toplabel fb-large selected-object"
enctype="multipart/form-data" method="post" action="../Web form test 1.php"
novalidate="novalidate" data-form="manual_iframe">
<div style="MIN-HEIGHT: 20px" id="fb-form-header1" class="fb-form-header">
<a id="fb-link-logo1" class="fb-link-logo" href="" target="_blank"><img style="DISPLAY: none" id="fb-logo1" class="fb-logo" title="Alternative text" alt="Alternative text" src="common/images/image_default.png"/></a>
</div>
<div id="section1" class="section fb-100-item-column">
<div id="column1" class="column ui-sortable">
<div style="MIN-HEIGHT: 4552px; DISPLAY: none" id="fb_confirm_inline">
</div>
<div style="DISPLAY: none" id="fb_error_report">
</div>
<div class="section_break">
<div style="FILTER: " id="item2" class="fb-item fb-100-item-column">
<div class="fb-header fb-item-alignment-center">
<h2 style="COLOR: #9fa0ab; FONT-SIZE: 30px">
Ttal
</h2>

</div>
<div style="FILTER: " id="item4" class="fb-item fb-100-item-column">
<div class="fb-header fb-item-alignment-left">
<h2 style="DISPLAY: inline; COLOR: #ff0015; FONT-SIZE: 20px">
Step 1. Let's Start with the Basics
</h2>
</div>
</div>
<div style="FILTER: ; PADDING-BOTTOM: 2px; PADDING-RIGHT: 10px; PADDING-TOP: 20px"
id="item3" class="fb-item fb-25-item-column">
<div class="fb-grouplabel">
<label style="FONT-STYLE: normal; DISPLAY: inline" id="item3_label_0">
What's Today's Date
</label>
</div>
<div class="fb-input-date">
<input id="item3_date_1" class="datepicker" name="date3" autofocus required
data-hint="" type="date" />
</div>
</div>
<div style="FILTER: ; PADDING-BOTTOM: 2px; PADDING-TOP: 20px" id="item54"
class="fb-item fb-25-item-column">
<div class="fb-grouplabel">
<label style="DISPLAY: inline" id="item54_label_0">
Expected Delivery Date
</label>
</div>
<div class="fb-input-date">
<input id="item54_date_1" class="datepicker" name="date54" data-hint=""
type="date" />
</div>
</div>
<div style="FILTER: ; PADDING-RIGHT: 65px; HEIGHT: 50px" id="item55" class="fb-item fb-20-item-column">
<div class="fb-spacer">
<div id="item55_div_0">
</div>
</div>
</div>
<div style="FILTER: ; PADDING-BOTTOM: 2px; PADDING-RIGHT: 4px; PADDING-TOP: 20px"
id="item11" class="fb-item fb-25-item-column">
<div class="fb-grouplabel">
<label style="DISPLAY: inline" id="item11_label_0">
Job Number
</label>
</div>
<div class="fb-input-number">
<input id="item11_number_1" name="number11" required data-hint="" step="1"
autocomplete="off" max="999999999" min="0" type="number" />
</div>
</div>
<div style="FILTER: ; PADDING-BOTTOM: 0px; PADDING-TOP: 0px" id="item133"
class="fb-item fb-100-item-column">
<div class="fb-static-text">
<p style="FONT-SIZE: 11px">
Yes we all want our jobs printed first, however setting a resonable expected
delivery date will help in preventing spoil jobs.
</p>
</div>
</div>
<div style="FILTER: ; PADDING-RIGHT: 10px" id="item7" class="fb-item fb-25-item-column">
<div class="fb-grouplabel">
<label style="DISPLAY: inline" id="item7_label_0">
First Name
</label>
</div>
<div class="fb-input-box">
<input id="item7_text_1" class="" name="text7" maxlength="40" required
data-hint="" autocomplete="on" placeholder="John" type="text" />
</div>
</div>
<div style="FILTER: ; PADDING-RIGHT: 10px" id="item8" class="fb-item fb-25-item-column">
<div class="fb-grouplabel">
<label style="DISPLAY: inline" id="item8_label_0">
Last Name
</label>
</div>
<div class="fb-input-box">
<input id="item8_text_1" class="" name="text8" maxlength="40" required
data-hint="" autocomplete="on" placeholder="Doe" type="text" />
</div>
</div>
<div style="FILTER: " id="item14" class="fb-item">
<input type="button" value="see next" onclick="goNext(0)"/>
<div class="fb-sectionbreak">
<hr style="BORDER-TOP: 1px solid">
</div>
</div>
</div>
</div>
<div class="section_break">
<div id="item15" class="fb-item fb-100-item-column">
<div class="fb-header">
<h2 style="DISPLAY: inline; COLOR: #ff0015; FONT-SIZE: 20px">
Step 2. Company Information
</h2>
</div>
</div>
<div style="FILTER: " id="item16" class="fb-item fb-100-item-column">
<div class="fb-grouplabel">
<label style="DISPLAY: inline" id="item16_label_0">
Company Name
</label>
</div>
<div class="fb-input-box">
<input id="item16_text_1" class="" name="text16" maxlength="254" required
data-hint="" autocomplete="on" placeholder="The Office Authority Limited"
type="text" />
</div>
</div>
<div style="FILTER: ; PADDING-RIGHT: 10px" id="item17" class="fb-item fb-25-item-column">
<div class="fb-grouplabel">
<label style="DISPLAY: inline" id="item17_label_0">
Contact Person
</label>
</div>
<div class="fb-input-box">
<input id="item17_text_1" class="" name="text17" maxlength="254" required
data-hint="" autocomplete="on" placeholder="Jane Doe" type="text" />
</div>
</div>
<div style="FILTER: ; PADDING-RIGHT: 10px" id="item34" class="fb-item fb-25-item-column">
<div class="fb-grouplabel">
<label id="item34_label_0">
Phone Number
</label>
</div>
<div class="fb-phone">
<input id="item34_tel_1" class="" name="tel34" data-hint="" placeholder="868-658-3546"
type="tel" />
</div>
</div>
<div style="FILTER: " id="item42" class="fb-item fb-50-item-column">
<div class="fb-grouplabel">
<label id="item42_label_0">
Email
</label>
</div>
<div class="fb-input-box">
<input id="item42_email_1" class="" name="email42" maxlength="254" data-hint=""
autocomplete="on" placeholder="you@domain.com" type="email" />
</div>
</div>
<div id="item35" class="fb-item fb-75-item-column">
<div class="fb-grouplabel">
<label style="DISPLAY: inline" id="item35_label_0">
Address
</label>
</div>
<div class="fb-input-box">
<input id="item35_text_1" class="" name="text35" maxlength="254" required
data-hint="" autocomplete="on" placeholder="Street Address " type="text"
/>
</div>
</div>
<div style="FILTER: " id="item38" class="fb-item fb-25-item-column">
<div class="fb-grouplabel">
<label style="DISPLAY: inline" id="item38_label_0">
City
</label>
</div>
<div class="fb-input-box">
<input id="item38_text_1" class="" name="text38" maxlength="60" required
data-hint="" autocomplete="on" placeholder="Port of Spain" type="text"
/>
</div>
<input type="button" value="see previous" onclick="goBack(1)"/> <input type="button" value="see next" onclick="goNext(1)"/>
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
var divs=document.getElementById("docContainer").getElementsByTagName("div")
var headers=[]
for ( x = 0; x < divs.length; x++ ){
if(divs[x].className=="section_break"){
headers.push(divs[x])
}
}

for ( y = 0; y < headers.length; y++ ){
headers[y].style.display="none"
}

headers[0].style.display="block"

function goNext(divnum){
headers[divnum].style.display="none"
headers[divnum+1].style.display="block"
}
function goBack(divnum){
headers[divnum].style.display="none"
headers[divnum-1].style.display="block"
}
</script>
</body>
</html>

keranali
02-12-2012, 10:17 PM
Hey Thanks for your help, I know your code is working but for some reason I cant get it to work on my entire form The buttons are showing up well and everything but the the screen is still not separating I have been trying non stop for hours But I know it's something im doing wrong.


Thanks
K

xelawho
02-12-2012, 10:34 PM
yes, there seems to be lots going on in your form, I guess for styling purposes. It took me a while to figure out which bit belonged to what as well. Like I say, use the html inspector in firebug or if you are really struggling post the whole thing here



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum