By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
434,917 Members | 1,335 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 434,917 IT Pros & Developers. It's quick & easy.

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

P: n/a
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();">Subm it</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

Dec 28 '06 #1
Share this Question
Share on Google+
5 Replies


P: n/a
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
Dec 28 '06 #2

P: n/a

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

Dec 28 '06 #3

P: n/a
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();">Subm it</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.)
Dec 28 '06 #4

P: n/a
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.
Dec 28 '06 #5

P: n/a
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
Dec 28 '06 #6

This discussion thread is closed

Replies have been disabled for this discussion.