Problem getting info from multiple HTML pages

[antonyliu2002]

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.

 

[antonyliu2002]

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?

 

[Benjamin Niemann]

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).

 

[antonyliu2002]

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.

 

[Neredbojias]

With neither quill nor qualm, (e-mail address removed) 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.visibility="visible";

 

[Benjamin Niemann]

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.

 

[TheWebJunkie]

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.

 

[antonyliu2002]

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).


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.

 

[Rincewind]

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".

 

[antonyliu2002]

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.

 

[Rincewind]

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.

No you don't have to turn them to images you can apply css rules to the
submit button on a form.

 

[antonyliu2002]

Hi, Ben,

For solution 2, where do you store the collected form info so that each
pages linked to the tabs can share it? In a cookie?

 

[antonyliu2002]

O, is that right? I don't know how to do this with CSS. Any online
tutorial please?

 

[Benjamin Niemann]

Hi, Ben,

For solution 2, where do you store the collected form info so that each
pages linked to the tabs can share it? In a cookie?

What are you using to process the form submission on the server side? PHP,
ASP, .NET, perl, Python...? Most programming environments have some kind of
support for 'session data' where you can store the submitted data.

 

[Rincewind]

O, is that right? I don't know how to do this with CSS. Any online
tutorial please?

Hold on you've got me confused here, not hard sometimes I admit. In an
earlier post you said:

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.

So I assumed, I know I shouldn't, that you were using CSS for your buttons,
but now your saying that your not using CSS. So I checked your page again
and I see that you are using images.

So why not use the image as a background and text as normal.

I don't know how your seeing this on your machine but on mine I get a line
of 6 tabs at the top and the on the next row I get one tab directly below
the second tab of the top row, if I resize my window down to the point that
I get three rows, I have one row of three, the next row down has two tabs,
again starting under the second tab in, then the third row has three tabs.

To be honest it looks naff.

take a look at the source of
http://gutfeldt.ch/matthias/articles/styleforms/ or
http://www.stopdesign.com/examples/css/tests/buttons/ to give you an idea
how to go the CSS route.