Recycled JavaScript Software

Back in 2012, 12 years ago, I set up an autoresponder to deliver one JavaScript title per week for 52 weeks.

It was fun. Most recipients were glad to get it.

The autoresponder was on a mailing system a friend was developing. Then he decided to abandon the project and the autoresponder went poof.

It's time to recycle some of those and publish them in Possibilities — the good ones. Some are outdated with deprecated commands.

For this week, two have been choose from the 52:

• Auto-Filling Additional Fields With a Click — useful to populate billing fields on a payment form when the same information was already entered in personal or shipping information fields.

• Automatically Adjust Form Field Size — for when you want a text field to get wider to accommodate information being typed in.

The JavaScript (newly verified) and writeup are close to what was in the original 9-year-old email. An exception is the original ad in the email has been removed before publishing in this article.

 
Auto-Filling Additional Fields With a Click

This will show you how to make the shipping address fields in a form be copied to the billing address fields when a checkbox is checked.

The example code is for a simple form consisting of name and city. A live form asking for shipping and billing would have more fields. The two example fields are sufficient as an example.

Here is the form with the copy-fields checkbox:

Here is the source code for the form and for the JavaScript.

<form>
<table>
<tr>
<td>Name:</td>
<td><input type="text" name="shippingname"></td>
</tr>
<tr>
<td>City:</td><td><input type="text" name="shippingcity"></td>
</tr>
<tr>
<td colspan="2" style="text-align:center;"><label>
<input type="checkbox" name="billingtoo" onclick="FillBilling(this.form)">Copy to billing fields.
</label></td>
</tr>
<tr>
<td>Billing Name:</td><td><input type="text" name="billingname">
</tr>
<tr>
<td>Billing City:</td><td><input type="text" name="billingcity">
</tr>
<tr>
<td colspan="2"><input type="submit" style="width:100%;"></td>
</tr>
</table>
</form>

<script type="text/javascript">
function FillBilling(f) {
if(f.billingtoo.checked == true) {
    f.billingname.value = f.shippingname.value;
    f.billingcity.value = f.shippingcity.value;
    }
}
</script>

The checkbox has an onclick="FillBilling(this.form)" attribute. When the checkbox is clicked, the JavaScript is launched.

The JavaScript can be put above or below the form, or even in the head area of the web page source code.

Notice the two lines that fill the billing fields with the shipping field values. Those lines will need to be changed according to your own form field names. Undoubtedly, additional lines will need to be added for additional form fields.

When the JavaScript is launched, it first determines whether or not the checkbox is checked. Only if the checkbox is checked does it copy the form fields.

 
Automatically Adjust Form Field Size

This article shows how to make a text field that grows larger as characters are typed into it. It shrinks as characters are deleted.

The form field has an ID. It also has an onkeyup attribute. Whenever a character is typed into the field, a JavaScript function is called with the field's internal identity and ID value.

The JavaScript adjusts the size="..." attribute of the field to be one character larger than the number of characters already in the field. The size stays within a maximum and a minimum.

This form and JavaScript has a field minimum size of 5 and maximum size of 30.

And here is the source code.

<form>
Type something: 
<input 
   id="myid" 
   style="font-family:monospace; font-size:14px;" 
   name="bignumber" 
   size="5" 
   onkeyup="ResizeField(this,'myid')">
</form>

<script type="text/javascript">
function ResizeField(f,id) {
var minimum = 5;
var maximum = 30;
var size = 1 + f.value.length;
if(size > maximum) { size = maximum; }
else if(size < minimum) { size = minimum; }
document.getElementById(id).size = size;
}
</script>

Note the JavaScript call in the form field's onkeyup attribute. The function ResizeField() is called with two attributes: this and "myid"

The this attribute is not within quotes. The word is a variable containing the field's internal identity.

The "myid" attribute is quoted. It is the ID value assigned to the field.

ResizeField() uses those two attributes to determine the number of characters already in the field and to adjust the field's size="..." attribute.

In the JavaScript, you'll see

var minimum = 5;
var maximum = 30;

Adjust the numbers to represent the minimum size and the maximum size of the field on your web page.

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

Will Bontrager