PHP/CSS Tab logic

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.

Thanks!
LVL 3
stevefNYCAsked:
Who is Participating?
 
hujiCommented:
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

ELSE

'render the preview :)

END IF
0
 
hujiCommented:
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.

Huji
0
 
DigitalTyrantCommented:
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>

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

function validate()
{
  valid = false;
  //code to validate info tab
  isValid = valid;
}
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.