Submitting forms by clicking on text-based tabs as opposed to SUBMIT button

Discussion in 'HTML' started by Alex, Dec 28, 2006.

  1. Alex

    Alex Guest

    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.

    Any ideas on how to do this? Did I totally confuse everyone?

    Here's an example:

    <li><a href="/CaseRecord/?page=OR" class="here">Surgical/OR</a></li>
    <ul>
    <li><a href="/CaseRecord/?page=Surgical" class="here">Page 1</a></li>
    <li><a href="/CaseRecord/?page=Surgical2" >Page 2</a></li>
    <li><a href="/CaseRecord/?page=Surgical3" >Page 3</a></li>
    <li><a href="/CaseRecord/?page=Surgical4" >Page 4</a></li>
    <li><a href="/CaseRecord/?page=Surgical5" >Page 5</a></li>
    </ul>

    This is my tabbed menu (or part of it anyway). In this code I'm
    sitting on Page 1, but upon finishing the form on Page 1, if someone
    clicks Page 2, Page 3, Page 4, or Page 5 i want the form to submit and
    then load that page which was clicked.

    Is this possible? Thanks for any ideas ...

    Alex
     
    Alex, Dec 28, 2006
    #1
    1. Advertising

  2. Re: Submitting forms by clicking on text-based tabs as opposed toSUBMIT button

    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.


    <snip>

    > Here's an example:
    >
    > <li><a href="/CaseRecord/?page=OR" class="here">Surgical/OR</a></li>
    > <ul>
    > <li><a href="/CaseRecord/?page=Surgical" class="here">Page 1</a></li>
    > <li><a href="/CaseRecord/?page=Surgical2" >Page 2</a></li>
    > <li><a href="/CaseRecord/?page=Surgical3" >Page 3</a></li>
    > <li><a href="/CaseRecord/?page=Surgical4" >Page 4</a></li>
    > <li><a href="/CaseRecord/?page=Surgical5" >Page 5</a></li>
    > </ul>
    >

    <snip>

    How about putting your submit buttons in the tabs and forego the
    JavaScript and the links


    <form action="/CaseRecord" ...



    <ul class="tabbedButtons">
    <li><input type="submit" name="page" value="Surgical"></li>
    <li><input type="submit" name="page" value="Surgical2"></li>
    <li><input type="submit" name="page" value="Surgical3"></li>
    <li><input type="submit" name="page" value="Surgical4"></li>
    <li><input type="submit" name="page" value="Surgical5"></li>
    ....



    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Dec 28, 2006
    #2
    1. Advertising

  3. Alex

    Alex Guest

    Jonathan N. Little wrote:
    > 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.

    >
    > <snip>
    >
    > > Here's an example:
    > >
    > > <li><a href="/CaseRecord/?page=OR" class="here">Surgical/OR</a></li>
    > > <ul>
    > > <li><a href="/CaseRecord/?page=Surgical" class="here">Page 1</a></li>
    > > <li><a href="/CaseRecord/?page=Surgical2" >Page 2</a></li>
    > > <li><a href="/CaseRecord/?page=Surgical3" >Page 3</a></li>
    > > <li><a href="/CaseRecord/?page=Surgical4" >Page 4</a></li>
    > > <li><a href="/CaseRecord/?page=Surgical5" >Page 5</a></li>
    > > </ul>
    > >

    > <snip>
    >
    > How about putting your submit buttons in the tabs and forego the
    > JavaScript and the links
    >
    >
    > <form action="/CaseRecord" ...
    >
    >
    >
    > <ul class="tabbedButtons">
    > <li><input type="submit" name="page" value="Surgical"></li>
    > <li><input type="submit" name="page" value="Surgical2"></li>
    > <li><input type="submit" name="page" value="Surgical3"></li>
    > <li><input type="submit" name="page" value="Surgical4"></li>
    > <li><input type="submit" name="page" value="Surgical5"></li>
    > ...
    >
    >
    >
    > --
    > Take care,
    >
    > Jonathan


    Hi Jonathan,

    Thanks for the reply, but the only problem I see is that how will the
    browser know what page to forward the user to? If the user clicks the
    tab for say page 3 and they're on page 1, I want it to forward the user
    to page 3 and not whatever page is blindly set by Action in the FORM
    tab.

    As for submit buttons in of themselves, I'm trying to keep a themed
    look and feel with the tabbed menus, and submit buttons up there will
    look odd.

    Thanks again for the suggestion, but I'm not sure if it'll work for my
    application. Take care,

    Alex
     
    Alex, Dec 28, 2006
    #3
  4. Re: Submitting forms by clicking on text-based tabs as opposed toSUBMIT button

    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.)
     
    Harlan Messinger, Dec 28, 2006
    #4
  5. Alex wrote:
    > Jonathan N. Little wrote:
    >> Alex wrote:

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

    <snip>
    >> How about putting your submit buttons in the tabs and
    >> forego the JavaScript and the links
    >>
    >> <form action="/CaseRecord" ...
    >>
    >> <ul class="tabbedButtons">
    >> <li><input type="submit" name="page" value="Surgical"></li>

    <snip>
    > Thanks for the reply, but the only problem I see is that
    > how will the browser know what page to forward the user to?


    Why ask the browser to do the forwarding? Server side languages can do
    that, and base their decision about where to forward to upon the value,
    or name, of the submit button used.

    <snip>
    > As for submit buttons in of themselves, I'm trying to keep
    > a themed look and feel with the tabbed menus, and submit
    > buttons up there will look odd.

    <snip>

    Submit buttons can be styled with CSS (more or less) and there are some
    other options, such as <button type="submit">...</button> (though the
    name/value pairs sent with that element are inconsistent across browsers
    and so need extra work on the server to accomodate).

    Richard.
     
    Richard Cornford, Dec 28, 2006
    #5
  6. Re: Submitting forms by clicking on text-based tabs as opposed toSUBMIT button

    Alex wrote:
    > Jonathan N. Little wrote:


    >> <form action="/CaseRecord" ...
    >>
    >>
    >>
    >> <ul class="tabbedButtons">
    >> <li><input type="submit" name="page" value="Surgical"></li>
    >> <li><input type="submit" name="page" value="Surgical2"></li>
    >> <li><input type="submit" name="page" value="Surgical3"></li>
    >> <li><input type="submit" name="page" value="Surgical4"></li>
    >> <li><input type="submit" name="page" value="Surgical5"></li>
    >> ...


    >
    > Thanks for the reply, but the only problem I see is that how will the
    > browser know what page to forward the user to? If the user clicks the
    > tab for say page 3 and they're on page 1, I want it to forward the user
    > to page 3 and not whatever page is blindly set by Action in the FORM
    > tab.


    Simple in my example above whatever your receiving script is at
    /CaseRecord, normally you would call a discrete filename like:
    "/CaseRecord/getfile.php", your /CaseRecord/?... works on a default
    index.php, index.cgi, index.asp etc.

    Notice that the submit buttons are named. Naming them means when click
    the name=value part will be parsed. In this case page=Surgical#, so
    simply fork on the page value will determine which submit button was
    press and hence which page page you are on...


    >
    > As for submit buttons in of themselves, I'm trying to keep a themed
    > look and feel with the tabbed menus, and submit buttons up there will
    > look odd.


    Style them whatever way you want. The advantage of NOT coding in the
    1996-way

    >
    > Thanks again for the suggestion, but I'm not sure if it'll work for my
    > application.

    Actually it will, much better than any JavaScript method you could
    cook-up because it submits at form as it was supposed to be done, with a
    submit button!


    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Dec 28, 2006
    #6
    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. Network-Man
    Replies:
    5
    Views:
    78,524
    gaul1
    Jul 7, 2012
  2. qwweeeit
    Replies:
    2
    Views:
    652
    qwweeeit
    Dec 14, 2005
  3. Fox
    Replies:
    2
    Views:
    274
    Randy Rahbar
    Sep 10, 2003
  4. Matthew Louden
    Replies:
    3
    Views:
    279
    Ray at
    Jan 9, 2004
  5. Alex
    Replies:
    5
    Views:
    107
    Jonathan N. Little
    Dec 28, 2006
Loading...

Share This Page