'Processing' Message on Submit

When a form is submitted, there may a lengthy lag, only slight, or no lag at all before the form user knows something is happening.

1. If it takes too long, say 3 seconds or less, the form user may become impatient and tap the submit button again. And again. Each repeated tap is likely to cause the back-end software to run again.

2. If it takes even longer, the form user may wonder if anything is happening and may abandon the form altogether.

Neither of those situations are good.

There are various ways to let the form user know things are happening so they are a bit more patient. The method presented here addresses both of those situations.

When the button is tapped, a "Processing…" div is laid over the top of the button.

The button can not be tapped again while the "Processing…" div is on top of it. And, with the "Processing…" div blatantly in front of the form user, they should understand that things are happening.

If the form submission really does hang up with a server-side error, the form user can tap the "Processing…" message and the submit button will become visible again.

Here is an example:

The button and the div with the processing message both use onclick JavaScript. The JavaScript is highlighted blue in this example source code.

<p>
<input type="button" value="Submit Button" onclick="document.getElementById('button-processing-overlay').style.display='block'">
</p>
<div id="button-processing-overlay" style="display:none; position:relative; bottom:6px; height:0px;" onclick="this.style.display='none'" onclick="this.style.display='none'">
<div style="position:absolute; left:0; right:0; bottom:0; text-align:center; font-size:2em; background-color:#efefef;">
Processing&hellip;
</div>
</div>

The button-processing-overlay id value also is used in the onclick of the submit button. If the button-processing-overlay id value is changed in one, then the value also needs to be changed in the other.

The content and styles of the submit button and the processing div may be changed to accommodate your preferences. It is the onclick code and the id value that matter for this functionality.

The method described here is likely to be perceived as more user friendly than forms without an indication what is happening.

(This content first appeared in Possibilities newsletter.)

Will Bontrager