10 Replies Latest reply on Aug 9, 2010 9:27 AM by unobtrusive

    Can I use Spry Tabbed Panels to create a multi page form?

    StudentsofShiloh Level 1

      I'm trying to setup a multi page form and have been unsuccessful using PHP Sessions.

       

      Would it be possible to use the Spry Tabbed  Panels in DW CS3 and divide the different sections of the form in the  panels?  My thought is to have the Form Element around the main Tab  Div and the submit button at the end of the form.  Would this work?

       

      If so, is there a way to have a "Next" button that will activate  the next Tab so that the user can easily tab through each form field and easily go to the next tab to help with usability?

        • 1. Re: Can I use Spry Tabbed Panels to create a multi page form?
          StudentsofShiloh Level 1

          I'm making some progress.  By using the Tabbed Panels and adding the form element around the Tabbed Pannels, I was able to send the form information from both tabs to my email. 

           

          http://www.soleproductions.com/oakley/tabform.php

           

          How can I get the "Next Page" link at the bottom to activate Tab 2?  I tried using the Behaviors and adding a Show/Hide element but the only option for that is "div "TabbedPalels1" and "input "Submit".  I was thinking when you click on the link, I could tell it to hide Tab 1 and Reveal Tab 2.

          • 2. Re: Can I use Spry Tabbed Panels to create a multi page form?
            Zabeth69 Level 5

            Because you have Tabbed Panels already, you don't need the show-hide behavior. Just use a programmed 'open'. Even better, why not use the Tabs on the Tabbed Panels? Of course, if you will actually have labels on the Tabs, you will want to "navigate" between Panels using links (similar to what you have now, but ones that work!).

             

            Here's a page that will help with that: http://labs.adobe.com/technologies/spry/samples/tabbedpanels/tabbed_panel_sample.htm

             

            Beth

            • 3. Re: Can I use Spry Tabbed Panels to create a multi page form?
              StudentsofShiloh Level 1

              Thx for the link Beth.  Yes, I will have labels (instead of Tab1, Tab2 etc.) on the tabs and would like for the user to be able to navigate between the tabs from the bottom of each page of the form.

               

              I looked at the page you linked to and checked out the source code for the "Using Links to Open Tabs" menu.  I'm trying to add an onclick from within DW.  I've opened the behaviors and clicked the "Show All Events" tab and see the onClick option.   It allows me to type something to the right of it.

               

              I'm new to DW, have been a long time GoLive user.  In GoLive, I could select a link, then in the Actions select onClick and then use a dropdown menu to tell GoLive what I want it to do.  Guess I'm not seeing that in DW so I'm a little confused.

               

              Here is the code for the basic tabbed panels

               

              <div id="TabbedPanels1" class="TabbedPanels">
                <ul class="TabbedPanelsTabGroup">
                  <li class="TabbedPanelsTab" tabindex="0">Tab 1</li>
                  <li class="TabbedPanelsTab" tabindex="0">Tab 2</li>
                </ul>
                <div class="TabbedPanelsContentGroup">
                  <div class="TabbedPanelsContent">Content 1</div>
                  <div class="TabbedPanelsContent">Content 2</div>
                </div>
              </div>

               

              If I want to "trigger" the tab 2 to open, what would I need to type in for the onClick?

              • 4. Re: Can I use Spry Tabbed Panels to create a multi page form?
                Ben M Adobe Community Professional

                There are 2 sets of directions because I have not seen in your post whether you are using the Spry Tabbed Panels v1 (1.6.1) or v2 (1.7).

                 

                V1 (Spry 1.6.1) - http://labs.adobe.com/technologies/spry/articles/tabbed_panel/index.html 

                 

                V2 (Spry 1.7) - http://labs.adobe.com/technologies/spry/ui/docs/tabbedpanels2/index.html

                 

                Search for: Open Panels Programmatically

                 

                Either page has that. But the rest of the descriptions can differ based on what version you are using.

                1 person found this helpful
                • 5. Re: Can I use Spry Tabbed Panels to create a multi page form?
                  Zabeth69 Level 5

                  But you don't need to use behaviors. Just type it into the link in Code View.

                   

                  By the way, the tabs themselves are a way to go between panels.

                   

                  Your links at the bottom of each panel will be "additional" ways to get around.

                   

                  On Tabbed Panel #1:

                        (nothing on the left)

                        on the right: "Next Panel" (will go to Tab #2)

                     Next Panel

                   

                  On Tabbed Panel #2:

                       on the left: "Previous Panel"

                  <a href="#" onclick="TabbedPanels1.showPanel(0); return false;">Previous Panel</a>

                           on the right: "Next Panel"

                  <a href="#" onclick="TabbedPanels1.showPanel(2); return false;">Next Panel</a>

                   

                  and so forth.

                   

                  Remember, the Panels are counted from 0: the first panel is 0, the second is 1, the third is 2, etc.

                   

                  Beth

                  • 6. Re: Can I use Spry Tabbed Panels to create a multi page form?
                    StudentsofShiloh Level 1

                    Beth, thank you!  I was able to get the tabs to advance using your suggested

                     

                             on the right: "Next Panel"

                     

                    <a href="#" onclick="TabbedPanels1.showPanel(2); return false;">Next Panel</a>

                     

                     

                    In order to make it more graphical, I added a Next Button as suggested in the "Open Tabs Programatically" info at http://labs.adobe.com/technologies/spry/articles/tabbed_panel/index.html

                     

                    <button onclick="TabbedPanels1.showPanel(0)" >open first  panel</button>

                    <button onclick="TabbedPanels1.showPanel('tabID')">open   panel</button>

                    <script type="text/javascript">

                    var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");

                    </script>

                     

                    When I add the above code, when I clicked on the Next Button, it would submit the form.  After looking at the Text Code, I noticed the Button Code did not have the ;return false; in the code so once I added that, the buttons now work as I want them to.

                     

                    Take a look at http://www.soleproductions.com/oakley/tabform.php

                     

                    Now that I have the basic setup, I can begin to setup the actual Online Application.

                     

                    Thanks again for everyone's help.  I guess I was looking for the WISIWIG way to do it since I'm not very good at hand coding.

                    • 7. Re: Can I use Spry Tabbed Panels to create a multi page form?
                      Zabeth69 Level 5

                      You will find, as you get more used to Dreamweaver, that once you understand CSS and a little bit of javascript, much is possible. There will not be a wizard or WYSIWYG for everything, although you can do a lot in Design View.

                       

                      Beth

                      • 8. Re: Can I use Spry Tabbed Panels to create a multi page form?
                        StudentsofShiloh Level 1

                        With DW, I'm learning to work in split view so that I can see and manipulte the code instead of always relying on the design view.  I just finished Total Training for DW CS3 Essentials and will be purchasing TT for DW CS3 Advanced as well to help me learn some of the ins and outs of DW.

                        • 9. Re: Can I use Spry Tabbed Panels to create a multi page form?
                          Zabeth69 Level 5

                          By the way, you don't need the URL in the <a href for the panel-changing link. Just using a hash mark (#) says "stay on this page", which you will be doing, even though the view changes when you go to the next tab.

                           

                          I like the idea of working in split view. I typically use Code View on the left and Live View on the right, although if you are using CS3, you may not have Live View.

                           

                          Beth

                          • 10. Re: Can I use Spry Tabbed Panels to create a multi page form?
                            unobtrusive

                            Great idea! Much better than having a multiple-page form... and there's some good advice from the people that have replied in this post.

                             

                            I have some questions on your validation form with the tabbed panels:

                             

                            1. Does it degrade gracefully, and still work? For example, when you turn JavaScript, CSS, images, and other things off?

                             

                            2. Is it possible to go from tab-to-tab (using the top tabs, or the buttons on bottom) without entering all of the required information?

                             

                            3. Is it safe to use this form to enter credit card details, and then email those to the website's account?

                             

                            4. Does it load the page fast, despite having multiple steps all pre-loaded? Can we make subsequent steps require some 'loading' (without refreshing the page)?

                             

                            5. If it doesn't do either of these, how could we make it do that?

                             

                            I hope to hear from you!