Software, your way.
How To Get Good Custom Software
(Download)
(PDF)
burger menu icon
WillMaster

WillMasterBlog > JavaScript

FREE! Coding tips, tricks, and treasures.

Possibilities weekly ezine

Get the weekly email website developers read:

 

Your email address

name@example.com
YES! Send Possibilities every week!

'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

Was this blog post helpful to you?
(anonymous form)

Support This Website

Some of our support is from people like you who see the value of all that's offered for FREE at this website.

"Yes, let me contribute."

Amount (USD):

Tap to Choose
Contribution
Method


All information in WillMaster Blog articles is presented AS-IS.

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.

Recent Articles in the Library

Fixed-position Table Header

During a vertical scroll, the table header scrolls out of view -- unless the header is fixed in position.

Simple Floating Menu

When not needed, the menu on the left side of a web page retracts to be out of the way. Tap it and it expands.

CSS Drop Shadows for Images

Images can be given drop shadows using pure CSS.

Ajax File Upload

Learn how to upload a file as soon as a file upload form field is given a file to upload.

Another Form Spam Prevention Technique

This technique should stop much or most of the form spam you are experiencing, perhaps even all of it.

Star Rating in a Form

A 5-star rating system for forms.

Ways to Use QR Codes

For personal use, QR codes can be read by modern mobile phones and other multimedia devices.

How Can We Help You? balloons
How Can We Help You?
bullet Custom Programming
bullet Ready-Made Software
bullet Technical Support
bullet Possibilities Newsletter
bullet Website "How-To" Info
bullet Useful Information List

© 1998-2001 William and Mari Bontrager
© 2001-2011 Bontrager Connection, LLC
© 2011-2024 Will Bontrager Software LLC