Self-Submitting Forms

Forms usually require user action to submit the form. A tap on a button is a common method. Sometimes an image is used instead of a button, or linked text.

There may be times, however, when you want a form to submit itself without the user's deliberate prompt.

Here are a few examples when a self-submitting form is required to implement the idea.

The form is self-submitted when the user makes a choice by tapping a link.
On page load, a form is automatically self-submitted to another page with affiliate link, referrer URL, or other information.
A timed scholastic or aptitude test automatically submits the form when the time is up.

Information and code for each of the above examples is included in this article.

For testing these examples (and other forms), this data dump script can come in handy. Submit the form to that script and the script will list the information it received.

Use form method POST so the information doesn't get passed to the destination with a URL parameter (ie, not as http://example.com/script.php?choice=desert). With POST, the information is invisible to the user as it is provided to the destination upon the browser's arrival.

1. Form Self-Submits When User Taps a Choice

Images or text can be provided for clicking on.

Illustration

Here is an illustration of what it can look like.

Which do you prefer?

Forest • Desert • Ocean

The above illustration does not submit the form like a real implementation would. We don't want to send you to another page. Instead, the illustration spawns a popup with the information that would have been submitted.

How It Works

The form has no visible fields. But it has a hidden field to hold the value of whatever will be tapped.

When one of the links is tapped, it calls a JavaScript function that fills in the hidden field and then submits the form. When the form is submitted, it submits the form information to the URL in the form tag's action attribute and the page at the new URL is loaded into the browser.

The Source Code

Here is source code to implement functionality for submitting a form when the user taps a choice. Notes follow.

<form id="exampleform" method="post" action="http://example.com/script.php">
<input id="choice" name="choice" type="hidden" value="">
</form>

<script type="text/javascript">
function SubmitForm(val)
{
   document.getElementById("choice").value = val;
   document.getElementById("exampleform").submit();
}
</script>

<p>
Which do you prefer?
</p>
<p>
<a href="javascript:SubmitForm('forest')">Forest</a> 
&bull; 
<a href="javascript:SubmitForm('desert')">Desert</a> 
&bull; 
<a href="javascript:SubmitForm('ocean')">Ocean</a>
</p>

The code has three sections: The form. The JavaScript. The links.

The form.

The id of the form tag is exampleform. The id is used to submit the form by the JavaScript function SubmitForm.

The id of the choice field is used by the JavaScript function SubmitForm for inserting the value sent to it when one of the links that is clicked.

The JavaScript.

When one of the links is tapped, the function SubmitForm is called with a value.

That value is inserted into the choice hidden field and then the exampleform form is submitted.

The links.

Each of the links, when tapped, calls the JavaScript function SubmitForm with a value. The value indicates which of the links was tapped.

2. Immediate Self-Submission on Page Load

When a page loads, any URL parameters and other information can be inserted into form fields and the form submitted.

When the form submits, the browser and the information are taken to the destination of the form. The destination is the URL in the form tag's action attribute.

Because there is nothing visible, there is no illustration.

Here is the source code. Notes follow.

<form id="exampleform" method="post" action="http://example.com/script.php">
<input id="selfurl" name="selfurl" type="hidden" value="">
<input id="referrer" name="referrer" type="hidden" value="">
<input id="parameters" name="parameters" type="hidden" value="">
</form>

<script type="text/javascript">
document.getElementById("selfurl").value = document.URL;
document.getElementById("referrer").value = document.referrer;
if(location.search.length) { document.getElementById("parameters").value = location.search.substring(1); }
document.getElementById("exampleform").submit();
</script>

The code has two sections: The form. The JavaScript.

The form.

The id of the form tag is exampleform. The id is used to submit the form with the JavaScript below the form.

The id of the referrer field is filled in by the JavaScript with any referring URL.

The parameters field is filled in with any parameter information attached to the URL when the page was loaded.

The JavaScript.

Immediately after the form is loaded, the JavaScript runs. It fills in the hidden fields as indicated above, the parameters field filled in only if parameter information is available. (As you'll see in the code, the JavaScript location.search value is where any URL parameters are stored.)

The exampleform form is then submitted.

3. Timed Test Form Automatically Self-Submits

A form can self-submit a certain amount of time after the form loads in the browser window. Here is what one can look like. (Tap here to start the two-minute countdown for this illustration.)(Timer is running.)

You have 2 minutes to tell us why you like the color blue so much. This form will submit automatically. Good luck.

The above illustration does not submit the form like a real implementation would — so you don't end up at another page. Instead, the illustration spawns a popup with the information that would have been submitted.

How It Works

As the form and JavaScript are loaded, a timer is set. When the timer has counted down to zero, the form is submitted to the URL in the form tag's action attribute and the browser ends up at that URL — like it would should the form be manually submitted.

The Source Code

Here is the source code to implement functionality. Notes follow.

<form id="exampleform" method="post" action="http://example.com/script.php">
<textarea id="freeform" name="freeform" style="width:100%; height:72pt;"></textarea>
</form>

<script type="text/javascript">
setTimeout(SubmitForm,120000);
function SubmitForm() { document.getElementById("exampleform").submit(); }
</script>

The code has two sections: The form. The JavaScript.

The form.

The id of the form tag is exampleform. The id is used to submit the form when the JavaScript function SubmitForm is launched.

The textarea field is a field the user types into during the time allowed.

The JavaScript.

The JavaScript sets a time for the allowed time. The timer expects the function name (which, in this case, is SubmitForm) and the number of milliseconds for the timer to run (which, in this case, is 120000). 120000 is 2 minutes of 60 seconds each multiplied by 1000.

When the timer has counted down from 120000 to 0 milliseconds, SubmitForm is launched. SubmitForm submits the exampleform form.

The Three Examples

Modify the three examples according to your requirements.

There are other ways, of course, to cause forms to self-submit. There may be as many ways as there are different requirements. Should a requirement not have a way, one can be invented.

If you need a method not addressed by the examples, use the contact form and give me a shout.

(This article first appeared in Possibilities newsletter.)

Will Bontrager

We only suggest and recommend what we believe is of value. As remuneration for the time and research involved to provide quality links, we generally use affiliate links when we can. Whenever we link to something not our own, you should assume they are affiliate links or that we benefit in some way.