PHP/CSS Tab logic

Posted on 2007-07-30
Last Modified: 2013-11-19
I'm currently writing an application which users pop in information about a product. The meat of the information is put into a page with four tabs. Tabs are labeled with something like:

Info | Photos | Misc | Preview

I'd like Photos/Misc/Preview to NOT be accessible until all the proper information is input into Info and validated by client/server-side stuff and input into a database so an object can be referenced for the rest of the tabs.

My question is basically not how to do this, but more of a best practice approach. How would you folks prefer something like this handled? Using $_SESSION? Disable navigating to tabs or redirecting the user to Info until it properly returns some value? After it has that value, allow navigation to the other tabs?

Code examples surely would be appreciated also and I'll award points to whoever gives me the most insightful response.

Question by:stevefNYC
    LVL 14

    Accepted Solution

    I'm not sure if I've fully understood what you meant by "tab" here. However, in my view, the best idea is to store what the user uploads in session variables, and add a session variable (which is set every time the user uploads the data) which is set to true if each tab is complete. One idea would be to use a session variable like this:

    Session("activeTab") = 1

    ' do some calculations or comparisons, if you found out the first tab data is complete:

    IF .. calculations show the tab data is complete:

    Session("activeTab") = 2

    END IF

    ' do some calculations or comparisons, if you found out the second tab data is complete:

    IF .. calculations show the tab data is complete again:

    Session("activeTab") = 3

    END IF


    'Now, show the appropriate tab

    IF Session("activeTab") = 1

    'render the first tab forms

    ELSEIF Session("activeTab") = 2

    'render the second tab forms


    'render the preview :)

    END IF
    LVL 14

    Expert Comment

    pardon me, I mistakenly wrote the psuedocode in the above in an ASP like fashion. However, it is pseudocode and I'm sure you'll understand it.

    LVL 4

    Assisted Solution

    I have an example of a form that registers players for a basketball tournament.  I do not disable the tabs, but I show a red exclamation point when information is still required.  When all information is input correctly, the red exclamation point turns to a green check mark.  This can be viewed at <a href="">Yakima Hot Shots Registration</a>.

    I use Javascript and a common validation function.  Each time a user tries to leave a tab it validates the current page and updates the icons accordingly.  Here is an example for your scenario.

    each tab contains an onclick event that fires a function to display the proper elements:
    <li onclick="showItem(0)">Info</li>
    <li onclick="showItem(1)">Photos</li>
    <li onclick="showItem(2);">Misc</li>
    <li onclick="showItem(3);">Preview</li>

    isValid = false;
    function showItem(o)
        case 0:
          //code to show info form;
        case 1:
          //run validate function to validate Info tab
            //code to show photos tab
            //code to show info tab
        case 2:
          //run validate function to validate Info tab
            //code to show misc tab
            //code to show info tab
        case 3:
          //run validate function to validate Info tab
            //code to show preview tab
            //code to show info tab

    function validate()
      valid = false;
      //code to validate info tab
      isValid = valid;

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Training Course: Android App Development

    This course will involve creating widgets, customize list view, grid view, spinners, etc. Creating applications using audio, video, and SQLite database. Ending with publication on Google Play.

    Shoutout to Emily Plummer ( for giving me this article! She did most of it, I just finished it up and posted it for her :)    Introduction In a previous article (http://www.experts-exchang…
    I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
    This video teaches users how to migrate an existing Wordpress website to a new domain.
    The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

    737 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    18 Experts available now in Live!

    Get 1:1 Help Now