 Form Submissions Without
Submit Buttons
By
William
Bontrager
When you want a form that can be submitted without requiring the rather prominent
submit button, this article shows you how, with several methods:
-
Submitting a form with a regular link.
-
Submitting a form when a checkbox is checked.
-
Automatically submitting a form.
This article contains step-by-step
instructions with code examples. I think you'll find it easy to follow.
The article assumes you already have a working form that is submitted to
a CGI program in the conventional manner, with a submit button. When you
see "/cgi-bin/script.cgi" in the examples, substitute the URL of your CGI
program.
If you don't already have form and CGI program, consider Master Feedback
from
http://willmaster.com/master/feedback/
to have the submitted information sent to you via email, or Master Form V3
from
http://willmaster.com/master/formV3/
for a program that can also store form information in a database on your
server.
Submitting a Form With a Regular Link
With this method, you can cause a form to be submitted when the user clicks
on a regular link, which can be a text link or an image link.
This requires two steps.
First step, the form —
Give your form a name. This is done in the FORM tag itself:
<form
name="MyForm"
method="POST"
action="/cgi-bin/script.cgi">
Second step, the JavaScript —
Create a link containing the submit command:
<a href="javascript:document.MyForm.submit();">
Click to submit the form
</a>
Optional third step —
You can remove the submit button or, to be kind to the few non-JavaScript
browsers that visit your site, put it between NOSCRIPT tags:
<noscript>
<input type="submit" name="Click here">
</noscript>
The above will display the submit
button only when non-JavaScript browsers visit the page.
Submitting a Form When a Checkbox is Checked
We'll use a checkbox to demonstrate how to cause a form to be submitted when
the user does something with a form field. When the checkbox is checked,
the form submits.
(Actually, the submission occurs when the checkbox is clicked, which would
be a check if it was previously unchecked or would be an uncheck if it was
checked.)
This requires two steps.
First step, the form —
Give your form a name and add the checkbox. The checkbox would probably have
instructive text. Example:
<form
name="MyForm"
method="POST"
action="/cgi-bin/script.cgi">
<input
type="checkbox"
name="MyCheck"
onClick="DoSubmission();">
Check when done with form
Second step, the JavaScript
—
<script type="text/javascript" language="JavaScript"><!--
function DoSubmission() {
document.MyForm.submit();
}
//--></script>
Put the JavaScript anywhere on your
page, in the HEAD or BODY area, above or below the form.
Optional third step —
As in the "Submitting a Form With a Regular Link" section, above, you can
remove the submit button or keep it between NOSCRIPT tags for non-JavaScript
browsers.
Automatically Submitting a Form
If you only want to log CGI environment variables, and/or set a cookie, a
form submission without actually sending information to the CGI program could
be appropriate. Otherwise, the form should have information to submit before
it is submitted, whether automatically or by manual click.
In other words, we'll have to figure out a way to get information into the
form before it's automatically submitted.
Information that's available to put into the form are things like the current
web page URL and the time zone information from your visitor's computer.
The latter is a way to determine which geographical time zones your visitors
are at — except those who have incorrect clocks and/or time zone information
specified for their computers.
This requires two steps.
First step —
Put a form with a name into your web page. There must be one hidden field
for each item of information you want to automatically fill with information
and submit, current URL and time zone offset are in our example:
<form
name="MyForm"
method="POST"
action="/cgi-bin/script.cgi">
<input
type="hidden"
name="ThisPageURL"
value="">
<input
type="hidden"
name="TimeZoneOffset"
value="">
</form>
You'll need to add a hidden field
to let your CGI program know the URL of the "thank you" page it should use.
Put the form anywhere in the BODY tag. It won't be visible, but it will cause
the browser to print a blank line.
Second step, the JavaScript —
Somewhere below the form, put the following JavaScript code:
<script type="text/javascript" language="JavaScript"><!--
document.MyForm.ThisPageURL.value = document.URL;
var x = new Date();
document.MyForm.TimeZoneOffset.value = x.getTimezoneOffset();
document.MyForm.submit();
//--></script>
When the page is loaded, the JavaScript
will automatically fill in the form with the web page's URL and the time
zone offset information from your visitor's computer, and then automatically
submit the form. After processing the form information, the CGI program presents
a "thank you" page.
The time zone offset is the number of minutes plus (West) or minus (East)
of Greenwich Mean Time.
Optional third step —
Because the automatic submission of the form will load a different page (don't
have the "thank you" page be the same page, re-loaded, or it will submit
the form each time the page loads, in an infinite loop), you may want to
put your automatic form submission page into an IFRAME tag. The "thank you"
page can then be an image or other content that you want to display on the
page.
To make an IFRAME tag, put this into a web page (a web page different than
the web page with the automatically submitted form):
<iframe
height="300"
width="200"
src="WebPageContainingAutomaticForm.html">
</iframe>
Adjust the URL so the web page containing
the automatically submitted form loads into the IFRAME tag. And adjust the
height and width to accommodate the "thank you" page.
The web page with the automatically submitted form will load into the IFRAME
and, after automatic submission, load the "thank you" page.
(Netscape versions 4.# and earlier don't recognize the IFRAME tag. It's ignored,
as if it wasn't there — no extra space, no content, nothing.)
Notes
If you decide to test several of the above examples on the same web page,
give the forms different names. Otherwise, the browser is likely to become
confused about which information belongs to which form.
Have fun with the examples. Once you're familiar with how they work, you
can decide whether or not they can be adapted to your unique requirements.
Will Bontrager
Copyright © Bontrager Connection, LLC
About the Author:
|
