|
|
Posted by Harlan Messinger on 12/28/06 15:22
Alex wrote:
> Hello,
>
> I hope I can explain this properly. I'm writing an application with a
> tabbed-based navigation, and a form which gets filled out by users will
> be split into 5 subtabs. What I need is instead of the user needing to
> hit a SUBMIT button each time the form within a tab is complete (Before
> clicking the next tab), I want clicking any tab to submit the data.
> I'm affraid that by not doing this, people will fill out the data in
> tab 1, click tab 2, fill it out, click tab 3, and so on... and none of
> their data will be submitted.
>
> My tabs are text based, and I can use the following code to submit the
> data from the tab:
> <a href="javascript:document.formName.submit();">Submit</a>
>
> But if I put this in the URL for say Tab2, how can I tell the browser
> to open the page for tab 2? I'm using CGI coding to process the form
> no matter what page loads next, but upon clicking TAB 2 I need the page
> for TAB2 to load, or TAB3 if that's clicked, and so on.
Two options:
1. Have a hidden field. Instead of having the links submit directly,
have each call a different Javascript function. Each Javascript function
sets the value of the hidden field, and *then* submits the form. Your
single server app can find out which tab was clicked by checking the
value in the hidden field.
2. Instead of having each tabbed pane submitted separately, do the whole
thing on the client side. Within one form, set up each set of inputs as
a separate DIV, each with its own row of tabs on top and its own Submit
button, one right after the other. Then, here's the tricky part: the
tabs don't submit the form. Each calls a Javascript function that sets
the CSS display property to "block" for the DIV that corresponds to the
tab that was clicked and then to "none" for all the others. At any given
time, the user only sees one of the DIVs. (Initially, only the first DIV
should be visible, and the others hidden.)
Navigation:
[Reply to this message]
|