Information From Abandoned Forms

If you have problems with people abandoning a form, and you want to know the information they already provided, it is possible to set up conditional submissions.

In other words, you can have information even from abandoned forms.

The way it works is when certain form fields change, the form is automatically submitted, silently and in the background. The purpose is to have some form information available even if the form user does not complete the form.

You decide which form fields that, when changed, trigger a silent form submission.

To implement this, you will already have a working form that submits method post. These are the steps you will take:

1. Put a short JavaScript function into the source code of the web page that contains the form.

2. Place an onchange or an onclick attribute into the tag of each field that shall trigger a silent submission.

Now, when one of the form fields with the special attribute changes, the form will be submitted in the background. It will submit to the same software it submits to when the submit button is tapped manually.

Detailed Instructions

The first thing to do is paste this JavaScript into your web page source code.

<script type="text/javascript">
function Conditional_Submit(id)
{
   var form = document.getElementById(id);
   var http = new XMLHttpRequest();
   http.onload = {}
   http.open("post",form.action);
   http.send(new FormData(form));
}
</script>

The JavaScript may be put into the web page in any location where JavaScript can run. Near the end of the page, immediately above the cancel </body> tag should work.

With the JavaScript on the page, you can now enable your choice of form fields. When an enabled field is changed or clicked, the JavaScript runs and the form is submitted in the background.

Enable only those fields you want to initiate a silent form submission when they are changed or clicked.

The form tag must have an id value. For the rest of these instructions, we'll assume id="registration-form". Here is an example form tag with an id value.

<form id="registration-form" action="register4class.php" method="post">

With all of the following examples, replace registration-form with the actual id value assigned to your form tag.

To enable a one-line text field or a multi-line textarea field, insert onchange="Conditional_Submit('registration-form');" into the field.

Here is an example of each:

<input type="text" name="phone" onchange="Conditional_Submit('registration-form');">

<textarea name="describe" onchange="Conditional_Submit('registration-form');" style="height:.75in;"></textarea>

To enable a dropdown list, insert onchange="Conditional_Submit('registration-form');" into the select field.

Example:

<select name="favorite" onchange="Conditional_Submit('registration-form');">

To enable radio buttons and checkboxes, insert onclick="Conditional_Submit('registration-form');" into the field. Note that this is an onclick attribute, not onchange like the previous fields.

Here is an example of enabled radio buttons and a checkbox:

<input type="radio" name="gender" value="male" onclick="Conditional_Submit('registration-form');">Male 
<input type="radio" name="gender" value="female" onclick="Conditional_Submit('registration-form');">Female

<input type="checkbox" name="agree" value="Paper" onclick="Conditional_Submit('registration-form');">Agree?

Change/Click Responses

The JavaScript responds at certain points when enabled form fields are changed or clicked.

• For text fields, both one-line text fields and multi-line textarea fields, the text change will be responded to when the user taps anywhere outside the relevant text field after having changed it.

• A dropdown select field change is responded to immediately after the form user makes a new dropdown selection.

• Radio button and checkbox fields are responded to when the field is clicked.

A response means the form is silently submitted in the background.

You have full control over which form field changes or clicks initiate a background submission. Insert an onchange or onclick attribute only in the fields to be enabled in that way.

(This article first appeared with an issue of the Possibilities newsletter.)

Will Bontrager