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

A

Alex

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
 
J

Jonathan N. Little

Alex said:
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.

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

Alex

Jonathan said:
<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>
...

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
 
H

Harlan Messinger

Alex said:
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.)
 
R

Richard Cornford

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.

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

Jonathan N. Little

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

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top