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

x
?
Solved

PHP/CSS Tab logic

Posted on 2007-07-30
3
Medium Priority
?
262 Views
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.

Thanks!
0
Comment
Question by:stevefNYC
  • 2
3 Comments
 
LVL 14

Accepted Solution

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

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
 
LVL 14

Expert Comment

by:huji
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.

Huji
0
 
LVL 4

Assisted Solution

by:DigitalTyrant
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>

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

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