[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now


PHP/CSS Tab logic

Posted on 2007-07-30
Medium Priority
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
  • 2
LVL 14

Accepted Solution

huji earned 1000 total points
ID: 19593384
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


' 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



'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 :)

LVL 14

Expert Comment

ID: 19593414
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.


Assisted Solution

DigitalTyrant earned 1000 total points
ID: 19594410
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="https://secure.in-command.com/www.yakimahotshots.org/registration/registrationform.php">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;

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
Many old projects have bad code, but the budget doesn't exist to rewrite the codebase. You can update this code to be safer by introducing contemporary input validation, sanitation, and safer database queries.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Wufoo.com provides powerful tools for surveying targeted groups, and utilizing data from completed surveys to find trends, discover areas of demand or customer expectation, and make business decisions on products or services.
Suggested Courses
Course of the Month18 days, 18 hours left to enroll

834 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