Page 1 of 1

Tricky Border Problem

Posted: Fri Jun 10, 2005 11:27 pm
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!

Posted: Mon Jun 13, 2005 11:57 am
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.

Posted: Mon Jun 13, 2005 7:03 pm
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 -_-

check's in the mail

Posted: Mon Jun 13, 2005 7:59 pm
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

Posted: Tue Jun 14, 2005 11:56 am
by froth
I'm sure I'd whither in direct sunlight :)