«

Hi, friends,

First please take a look at my sample HTML page at:

http://members.lycos.co.uk/wodesite/

Each of the tabs is linked to its corresponding HTML form page. One
can browse each form by clicking on the tabs.

Those pages are actually gonna be HTML forms in which the user supplies
his personal info and then click a "submit" button to send the info to
the database.

Now, I want to be able to collect all in once all the user-input data
from all of the separate HTML forms linked to the tabs, and then do a
single "submit" action to send the data to the database.

But, I am not sure how I can get such user-input data in different HTML
forms all in once. Any solution to this problem? Thanks.

I know that it is doable if I combine all the forms into a single HTML
page, but then I will have a very lengthy form, which eventually ruins
the beauty or the advantage of the tabs I've created.

Please ask if I did not make it clear what I wanna do.

In other words, what I want is like the "Internet Options" form of
Microsoft Internet Explorer.

The Internet Options form has the following tabs:

General Security Privacy Content Connections Programs Advanced

We can click any of these tabs and change the settings and finally when
we click the "Apply" button, all settings from all tabs are saved.

Is this doable with the Web?

wrote:

> Hi, friends,
>
> First please take a look at my sample HTML page at:
>
> http://members.lycos.co.uk/wodesite/
>
> Each of the tabs is linked to its corresponding HTML form page. One
> can browse each form by clicking on the tabs.
>
> Those pages are actually gonna be HTML forms in which the user supplies
> his personal info and then click a "submit" button to send the info to
> the database.
>
> Now, I want to be able to collect all in once all the user-input data
> from all of the separate HTML forms linked to the tabs, and then do a
> single "submit" action to send the data to the database.
>
> But, I am not sure how I can get such user-input data in different HTML
> forms all in once. Any solution to this problem? Thanks.
>
> I know that it is doable if I combine all the forms into a single HTML
> page, but then I will have a very lengthy form, which eventually ruins
> the beauty or the advantage of the tabs I've created.
>
> Please ask if I did not make it clear what I wanna do.

Two possible options:

1.) You create a single, large form. You could 'simulate' several pages by
showing only a part of it at a time and hiding the rest of it (using CSS).
The page switching will involve JavaScript, so make sure that a user agent
without JS will always see the full form without hidden parts. There may be
some issues with form values not being sent, if the corresponding input
element is not visible when the form submitted (I think, I remember
something like this, but I'm not sure, so better do some research on this
topic. At least this approach is possible, as I've seen it various times
'in the wild'). Finding a good, understandable way to indicate
missing/wrong data is probably quite a challenge.

2.) Convert the link that point to different parts of the form into submit
buttons. Collect the data, but do not write it to the DB - store it in
session variables or create hidden input fields to carry the values through
all forms.

The first approach is faster, as no additional page reloads are needed. But
an implementation is not for the faint-hearted. The second approch is more
robust and the one I would choose (and have often implemented).


--
Benjamin Niemann
Email: pink at odahoda dot de
WWW: http://www.odahoda.de/

Thx, Ben.

I thought of both, too. For solution 1, I am not sure how to
dynamically hide divs of a single HTML page using Javascript. Any
idea?

Meanwhile, I'll try implementing solution 2.

Benjamin Niemann wrote:
> wrote:
>
> > Hi, friends,
> >
> > First please take a look at my sample HTML page at:
> >
> > http://members.lycos.co.uk/wodesite/
> >
> > Each of the tabs is linked to its corresponding HTML form page. One
> > can browse each form by clicking on the tabs.
> >
> > Those pages are actually gonna be HTML forms in which the user supplies
> > his personal info and then click a "submit" button to send the info to
> > the database.
> >
> > Now, I want to be able to collect all in once all the user-input data
> > from all of the separate HTML forms linked to the tabs, and then do a
> > single "submit" action to send the data to the database.
> >
> > But, I am not sure how I can get such user-input data in different HTML
> > forms all in once. Any solution to this problem? Thanks.
> >
> > I know that it is doable if I combine all the forms into a single HTML
> > page, but then I will have a very lengthy form, which eventually ruins
> > the beauty or the advantage of the tabs I've created.
> >
> > Please ask if I did not make it clear what I wanna do.
>
> Two possible options:
>
> 1.) You create a single, large form. You could 'simulate' several pages by
> showing only a part of it at a time and hiding the rest of it (using CSS).
> The page switching will involve JavaScript, so make sure that a user agent
> without JS will always see the full form without hidden parts. There may be
> some issues with form values not being sent, if the corresponding input
> element is not visible when the form submitted (I think, I remember
> something like this, but I'm not sure, so better do some research on this
> topic. At least this approach is possible, as I've seen it various times
> 'in the wild'). Finding a good, understandable way to indicate
> missing/wrong data is probably quite a challenge.
>
> 2.) Convert the link that point to different parts of the form into submit
> buttons. Collect the data, but do not write it to the DB - store it in
> session variables or create hidden input fields to carry the values through
> all forms.
>
> The first approach is faster, as no additional page reloads are needed. But
> an implementation is not for the faint-hearted. The second approch is more
> robust and the one I would choose (and have often implemented).
>
>
> --
> Benjamin Niemann
> Email: pink at odahoda dot de
> WWW: http://www.odahoda.de/

With neither quill nor qualm, quothed:

> Thx, Ben.
>
> I thought of both, too. For solution 1, I am not sure how to
> dynamically hide divs of a single HTML page using Javascript. Any
> idea?

ID the divs and use document.getElementById
("id_name").style.visibility="hidden";

Back on: document.getElementById("id_name").style.visibilit y="visible";

--
Neredbojias
Contrary to popular belief, it is believable.

wrote:

> I thought of both, too. For solution 1, I am not sure how to
> dynamically hide divs of a single HTML page using Javascript. Any
> idea?

Implementing correctly (cross browser support, non-JS browser support, good
usability...) this is pretty difficult. Unless you are already a
JavaScript/CSS expert, you should not try it (unless it is ok, if it will
take several months until you got it right).

> Meanwhile, I'll try implementing solution 2.

That's what I would suggest.

--
Benjamin Niemann
Email: pink at odahoda dot de
WWW: http://www.odahoda.de/

You can also do it with cookies. The links to change pages should be
buttons, with JavaScript onClick instructions to set a session cookie
containing that page's form information. Have the cookie read and
processed by the subsequent page. The trick is that different browsers
process JavaScript-set cookies differently, but for the most part the
procedure works.

Benjamin Niemann wrote:
> wrote:
>
> > I thought of both, too. For solution 1, I am not sure how to
> > dynamically hide divs of a single HTML page using Javascript. Any
> > idea?
>
> Implementing correctly (cross browser support, non-JS browser support, good
> usability...) this is pretty difficult. Unless you are already a
> JavaScript/CSS expert, you should not try it (unless it is ok, if it will
> take several months until you got it right).
>
> > Meanwhile, I'll try implementing solution 2.
>
> That's what I would suggest.

Hi,

I am seriously considering solution 2. But if we convert the links on
the tabs to submit buttons, will they look like the dumb 3-dimensional
"submit" buttons like we see everywhere on the web? If that is the
case, I don't like the idea, because I won't be able to use my nice
cute tabs.

Thanks.

On 6 Sep 2005 15:06:16 -0700, wrote:

> am seriously considering solution 2. But if we convert the links on
> the tabs to submit buttons, will they look like the dumb 3-dimensional
> "submit" buttons like we see everywhere on the web? If that is the
> case, I don't like the idea, because I won't be able to use my nice
> cute tabs.

You can change the submit button to look just the same as your "cute tabs".

Rincewind wrote:
> On 6 Sep 2005 15:06:16 -0700, wrote:
>
> > am seriously considering solution 2. But if we convert the links on
> > the tabs to submit buttons, will they look like the dumb 3-dimensional
> > "submit" buttons like we see everywhere on the web? If that is the
> > case, I don't like the idea, because I won't be able to use my nice
> > cute tabs.
>
> You can change the submit button to look just the same as your "cute tabs".

By using images? It's probably not a good idea to turn the cute tabs
into images because they scale very well right now as texts.
Apparently they wouldn't if they are turned into images.