Problem getting info from multiple HTML pages

Discussion in 'HTML' started by antonyliu2002@yahoo.com, Sep 1, 2005.

  1. Guest

    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.
    , Sep 1, 2005
    #1
    1. Advertising

  2. Guest

    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?
    , Sep 1, 2005
    #2
    1. Advertising

  3. 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/
    Benjamin Niemann, Sep 1, 2005
    #3
  4. Guest

    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/
    , Sep 2, 2005
    #4
  5. Neredbojias Guest

    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.visibility="visible";

    --
    Neredbojias
    Contrary to popular belief, it is believable.
    Neredbojias, Sep 2, 2005
    #5
  6. 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/
    Benjamin Niemann, Sep 3, 2005
    #6
  7. Guest

    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.
    , Sep 3, 2005
    #7
  8. Guest

    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.
    , Sep 6, 2005
    #8
  9. Rincewind Guest

    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, Sep 7, 2005
    #9
  10. Guest

    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.
    , Sep 7, 2005
    #10
  11. Rincewind Guest

    On 7 Sep 2005 08:13:35 -0700, wrote:

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


    No you don't have to turn them to images you can apply css rules to the
    submit button on a form.
    Rincewind, Sep 7, 2005
    #11
  12. Guest

    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?
    , Sep 7, 2005
    #12
  13. Guest

    O, is that right? I don't know how to do this with CSS. Any online
    tutorial please?
    , Sep 7, 2005
    #13
  14. wrote:

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

    --
    Benjamin Niemann
    Email: pink at odahoda dot de
    WWW: http://www.odahoda.de/
    Benjamin Niemann, Sep 7, 2005
    #14
  15. Rincewind Guest

    On 7 Sep 2005 09:38:58 -0700, wrote:

    > 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.
    Rincewind, Sep 8, 2005
    #15
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Vasanth
    Replies:
    0
    Views:
    529
    Vasanth
    Jun 28, 2004
  2. Andrea Williams

    Clear the Render info & change to different info

    Andrea Williams, Oct 27, 2004, in forum: ASP .Net
    Replies:
    2
    Views:
    1,398
    Ken Dopierala Jr.
    Oct 27, 2004
  3. Replies:
    4
    Views:
    271
  4. Kiran
    Replies:
    0
    Views:
    1,205
    Kiran
    Feb 6, 2005
  5. ilya

    get CPU info, RAM info

    ilya, Apr 8, 2010, in forum: Java
    Replies:
    43
    Views:
    5,929
    Mike Schilling
    Apr 19, 2010
Loading...

Share This Page