Form Field Prefill With a Tap

First, the basic "how it works."

You have a form field.

You have a link (or image, button, div, …)

When the link is tapped, the form field is filled in.

That's the essence of how it works.

I used this for new bookkeeping software. It needed to email someone after I updated records. Well, I wanted to view the email first to verify all the data the email should have actually was present.

But I got tired of typing in my email address and then typing in their email address. Every day.

I made two buttons. One for "Them" and one for "Me." When I tap a button, the correct email address is filled into the address field. Yummy.

Other ways the idea might be used:

• Prefill a subject field depending on whether "I have a sick bird" or "I have a sick fish" was tapped.
• Fill in a field according to tapped preference. Color, shape, location, … .
• Prefill an email content box depending on whether the email is a love letter or a breakup letter.
• …

To use the feature:

1. The form field to be prefilled must have an id value.
2. The link (or image, button, div, …) needs an onclick attribute. The value of the onclick attribute uses the form field's id value to prefill it.

Here is code for an example form field.

<input id="the-email-address" name="send_to" type="email">

The the-email-address id value will be used in the value of onclick attributes.

Here are code examples of two divs to tap for filling in the email address.

<div 
  onclick="document.getElementById('the-email-address').value='them@example.com'" 
  style="display:inline-block; line-height:100%; cursor:pointer; border:1px solid #888; border-radius:1em; padding:3px 9px 0px 9px; background-color:#efefef;">
Them</div>

<div 
  onclick="document.getElementById('the-email-address').value='me@example.com'" 
  style="display:inline-block; line-height:100%; cursor:pointer; border:1px solid #888; border-radius:1em; padding:3px 9px 0px 9px; background-color:#efefef;">
Me</div>

You'll see the the-email-address id value used in both onclick attributes. The values to prefill the form field with are colored red.

Here is a working example using the above code.

Let's reiterate.

The form field to prefill has an id value.

The onclick attribute specifies the id value and the value to prefill the form field with.

(This content first appeared in Possibilities newsletter.)

Will Bontrager