Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help needed in adding next and Back Buttons

    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

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,773
    Thanks
    55
    Thanked 518 Times in 515 Posts
    you can put the sections into divs and show one and hide the rest:

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

  • #3
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

    Code:
    <!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>
    Last edited by keranali; 02-11-2012 at 08:51 PM.

  • #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,773
    Thanks
    55
    Thanked 518 Times in 515 Posts
    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:
    Code:
    <div class="section_break">
    and end like all divs do, like this:
    Code:
    </div>
    just before that end tag you put the buttons.

    good luck!

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

  • #5
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #6
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,773
    Thanks
    55
    Thanked 518 Times in 515 Posts
    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


  •  

    Posting Permissions

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