Automatic Totals in Form

When making shopping cart pages, an order form, or a shopping list, having totals automatically calculated does two things:

1. Shows respect for your shopper with a friendly gesture.

2. Prevents your shopper from making mistakes when totalling their order.

Here's an example order form that totals automatically.

JavaScript is used to update the Order Total field. The update is done whenever

• a text field is typed into or
• a checkbox or radio button is clicked.

In essence, what the JavaScript does is multiply numbers in the text boxes by their related price, and totals the results. It then adds the related price of each checked checkbox and checked radio button. The total is then inserted into the Order Total field.

The Source Code

Here's source code for the example order form and the JavaScript. Notes follow.

<form id="shopping-list" style="display:table; border:3px solid #ccc; border-radius:.75em; padding:1em;">
<div>Specify how many:</div>
<div><input type="number" min="0" onkeyup="UpdateFormTotal()" onclick="UpdateFormTotal()" id="coloring-book_4.95" name="coloring_book" style="width:50px;"> Coloring book (4.95 ea.)</div>
<div><input type="number" min="0" onkeyup="UpdateFormTotal()" onclick="UpdateFormTotal()" id="color-chart_2.95" name="color_chart" style="width:50px;"> Color chart (2.95 ea.)</div>
<div><input type="number" min="0" onkeyup="UpdateFormTotal()" onclick="UpdateFormTotal()" id="crayons_0.95" name="crayons" style="width:50px;"> Crayons (0.95/box)</div>
<div><input type="checkbox" onclick="UpdateFormTotal()" id="price-list_0" name="price_list" value="price list">Price list (free)</div>
<div><input type="checkbox" onclick="UpdateFormTotal()" id="photo_0" name="contest_application" value="contest application">Contest application (free)</div>
<div><input type="checkbox" onclick="UpdateFormTotal()" id="photo_3.95" name="group_photo" value="group photo">Group photo (3.95)</div>
<div><input type="checkbox" onclick="UpdateFormTotal()" id="marketing_1" name="marketing_materials" value="marketing materials">Marketing materials (1.00)</div>
<div><input type="radio" onclick="UpdateFormTotal()" id="shipping_0" name="shipping" value="free_shipping" checked>Free 3-day shipping</div>
<div><input type="radio" onclick="UpdateFormTotal()" id="shipping_6.95" name="shipping" value="paid_shipping">Overnight delivery (6.95)</div>
<div>Order Total: <input type="text" id="total-field" name="total" style="width:100px;"></div>
</form>

<script>
var FormID = "shopping-list";
var AA = document.getElementById("AA");
function UpdateFormTotal()
{
   var total = parseFloat(0.00);
   for( var i=0; i<document.getElementById(FormID).elements.length; i++ )
   {
      var f = document.getElementById(FormID);
      var id = f.elements[i].id;
      if( id.length < 1 ) { continue; }
      var amount = id.replace(/^.*?(\d[\d\.]*).*$/,"$1");
      if( ! (amount.length && amount.match(/\d/)) ) { continue; }
      amount = parseFloat(amount);
      if( amount == "NaN" || amount == NaN || amount == 0 ) { continue; }
      if( f.elements[i].type == "checkbox" || f.elements[i].type == "radio" )
      {
         if( f.elements[i].checked ) { total += amount; }
         continue;
      }
      var howmany = f.elements[i].value.replace(/[^\-\d]/g,"");
      if( !howmany.length ) { continue; }
      if( howmany < 1 )
      {
         f.elements[i].value = 0;
         continue;
      }
      howmany = parseFloat(howmany);
      total += parseFloat(parseFloat(howmany) * amount);
   }
   document.getElementById("total-field").value = total.toFixed(2);
}
UpdateFormTotal();
</script>

The source code has two items, the example form and the JavaScript.

The example form is a placeholder for your form. It uses colored text for the items you need to be aware of (more below).

Implementing the Order Form

The JavaScript (colored brown) will be used on every page where you have a self-totalling form. It has only one place to customize, where you specify the id value of the form tag.

The id value of the form tag is colored blue in the first line of the above code. Scroll down to the JavaScript and you'll see the same colored blue id value. The id value in the form tag and the id value specified in the JavaScript must be identical.

There are several things your order forms need to function correctly.

1. The triggers and the data for auto-totalling:

   1. The trigger is a form field attribute that launches the JavaScript when a text field is typed into or a checkbox or radio button is clicked.

      Text fields have both the onkeyup="UpdateFormTotal()" attribute and the onclick="UpdateFormTotal()" attribute. The onkeyup attribute causes re-totalling whenever a character has been entered. The onclick attribute accommodates browsers that allow the number to be incremented or decremented with clicks or taps.

      Checkbox and radio button fields only have the onclick="UpdateFormTotal()" attribute. When the checkbox or radio button is clicked, totalling occurs immediately afterward.

      Those attributes cause the order total field to be updated by launching the JavaScript function that does the work.

   2. The data is the price embedded within id values for text fields, checkboxes, and radio buttons. JavaScript extracts relevant prices from the id values.

      To illustrate with the order form source code above, prices embedded in id values are colored green with the rest of the id values colored black.

      Here's an example id value with a 4.95 price:

      id="coloring-book_4.95"
      

      Field id values need to start with a letter.

      The first digit in the id value is the start of the price. The price ends at the end of the id value or immediately before the first character that is not a digit and not a period/dot. This id value also correctly embeds the 4.95 price.

      id="coloring-4.95-book"
      

      Review the id values in the example order form code for a better understanding of how the price is embedded within the id value.

      As a point of interest, the order form field names can be anything that works for you. It's the id values that are important for the JavaScript.

2. The order total field.

   The order total text field has the id="total-field" attribute. The JavaScript expects the id value to be exactly that.

   The example form doesn't illustrate this, but the total field could be made read-only so the shopper can't change the price. (The JavaScript can still update the field.) To enable that functionality with HTML5, put the word readonly as an attribute into the form field tag. For other HTML versions insert readonly="readonly" as the attribute.

When you have the example form working on your test page, the form may be modified for your own use.

Immediate and automatic order totalling respects the shopper and reduces mistakes.

(This article first appeared in Possibilities ezine.)

Will Bontrager