Tricky Border Problem

PHP programming forum. Ask questions or help people concerning PHP code. Don't understand a function? Need help implementing a class? Don't understand a class? Here is where to ask. Remember to do your homework!

Moderator: General Moderators

Post Reply
bwv2
Forum Commoner
Posts: 83
Joined: Fri Jun 10, 2005 11:50 am
Location: AZ

Tricky Border Problem

Post by bwv2 »

I wish to add an element to my website, but don't know how. Can anyone offer up a solution?

What I want to do is have a table in the middle of my page containing a form for the user to fill. The table needs to look like a series of "stacked" file folders with tabs on the top. When the user hits SUBMIT, the current file folder tab will go to the back, and the next successive tab will come forward, presenting the next form in succession.

Any idea how to get this "file folder" effect? It doesn't even need to look like folder tabs, just blocks at least. I'm just trying to get some sort of cascading effect. Ideally the user could click one of the tabs on the top to go back to a previous page.

Any help would be just grand. Thanks!
User avatar
artexercise
Forum Commoner
Posts: 33
Joined: Thu Nov 20, 2003 9:38 am
Location: Raleigh, NC

Post by artexercise »

Cascading Style Sheets and DIV tags. Each Block should be given a z-index. And clicking a tag header or a control panel or something will reorganize the z-orders through a javascript function.
froth
Forum Commoner
Posts: 31
Joined: Sat Jan 22, 2005 9:26 pm

Post by froth »

no, I don't think that's what he's asking for.

What I would do is have a big php file that contains a separate html page for each tab and have a big conditional that reads $_POST["step"] to know which page to display. On each successive page previous input (and the current step) is stored in hidden input tags. So then you just have something along the lines of: (this would be the code for the "step 4" branch of the main conditional. step 1 was name, 2 was age, 3 was birthday, 4 -the last step- is username)

Code: Select all

print <<<xxxendxxx
<form name=&quote;sendTo&quote; method=&quote;post&quote;>
 <input type=&quote;hidden&quote; name=&quote;name&quote; value=&quote;$_POST&#1111;&quote;name&quote;]&quote;>
 <input type=&quote;hidden&quote; name=&quote;age&quote; value=&quote;$_POST&#1111;&quote;age&quote;]&quote;>
 <input type=&quote;hidden&quote; name=&quote;age&quote; value=&quote;$_POST&#1111;&quote;birthday&quote;]&quote;>
 <input type=&quote;hidden&quote; name=&quote;step&quote; value=&quote;0&quote;>
</form>
<table align=&quote;center&quote; width=&quote;50%&quote; height=&quote;500&quote;>
<tr>
 <td onclick=&quote;document.sendTo.step.value = 1; document.sendTo.submit()&quote; align=&quote;center&quote; valign=&quote;center&quote;><a href=&quote;#&quote;>Step 1</a></td>
 <td onclick=&quote;document.sendTo.step.value = 2; document.sendTo.submit()&quote; align=&quote;center&quote; valign=&quote;center&quote;><a href=&quote;#&quote;>Step 2</a></td>
 <td onclick=&quote;document.sendTo.step.value = 3; document.sendTo.submit()&quote; align=&quote;center&quote; valign=&quote;center&quote;><a href=&quote;#&quote;>Step 3</a></td>
 <td align=&quote;center&quote; valign=&quote;center&quote; bgcolor=&quote;gray&quote;>Step 4</td>
</tr>
<tr>
<td colspan=&quote;4&quote; align=&quote;center&quote;>
xxxendxxx;
print &quote;<br>Username: <input type=\&quote;text\&quote; name=\&quote;username\&quote;&quote;;
if ($_POST&#1111;&quote;username&quote;]) print &quote; value=\&quote;{$_POST&#1111;'username']}\&quote;&quote;
print &quote;<&quote;;
print <<<xxxendxxx
 <input type=&quote;hidden&quote; name=&quote;name&quote; value=&quote;$_POST&#1111;&quote;name&quote;]&quote;>
 <input type=&quote;hidden&quote; name=&quote;age&quote; value=&quote;$_POST&#1111;&quote;age&quote;]&quote;>
 <input type=&quote;hidden&quote; name=&quote;age&quote; value=&quote;$_POST&#1111;&quote;birthday&quote;]&quote;>
 <input type=&quote;hidden&quote; name=&quote;step&quote; value=&quote;finished&quote;>
 <input type=&quote;submit&quote; value=&quote;Submit&quote;>
</td>
</tr></table>
xxxendxxx;
Of course, for previous steps you would need lines similar to

Code: Select all

print &quote;<br>Username: <input type=\&quote;text\&quote; name=\&quote;username\&quote;&quote;;
if ($_POST&#1111;&quote;username&quote;]) print &quote; value=\&quote;{$_POST&#1111;'username']}\&quote;&quote;
print &quote;<&quote;;
And you'd also have to conditionally write the hidden attributes in the main tr/td in previous steps based on whether you actually have the values to make sure data is preserved if you return to the 3rd step after completing it and going back to the 2nd step.

And the final branch of the conditional, "finished", would need to be different of course.

It would be possible but fairly difficult and very hard to maintain to construct a series of conditionals so that there's only one main layout (instead of copying it 4 times for the different steps) and the hidden fields/main td are outputted as appropriate to the current step.

Remember to remove the hidden inputs in the sendTo form for previous steps, whether or not you choose to make it all one layout with conditional segments.

I should charge for this -_-
bwv2
Forum Commoner
Posts: 83
Joined: Fri Jun 10, 2005 11:50 am
Location: AZ

check's in the mail

Post by bwv2 »

Thanks, that's exactly what I was hoping for. After I make my first billion, I'll buy you an island in the mediterranean :)

Brad
froth
Forum Commoner
Posts: 31
Joined: Sat Jan 22, 2005 9:26 pm

Post by froth »

I'm sure I'd whither in direct sunlight :)
Post Reply