The Online Biz Guy: June 2008

Wednesday, June 11, 2008

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:

William Bontrager Programmer/Publisher, "WillMaster Possibilities" ezine mailto:possibilities@willmaster.com

Are you looking for top quality scripts? Visit Willmaster and check out his highly acclaimed Master Series scripts. Some free, some for a fee.

Sponsor Message:

Visit the Web Design Mastery site to
download your free chapters (77 pages)!

Content Provided By: