Every once in a while a request comes in to perform an action on a spec form. Most times the action to perform must to be driven by the actual specs or the submission of the form. Today we’ll cover a method Four51 includes on Spec Forms that opens the door to the possibility of using the events of your Specs.

Every element, including Specs, has numerous events that can be used to trigger JavaScript functions. The available events include: onMouseOver, onClick, onFocus, onSubmit and many others. The normal HTML for an element that uses an event would look like this:Whenever a user’s mouse travels over the image the SwapImage function would be triggered.

At this point you may be saying to yourself, “But we cannot simply add information to the html tag of Specs in the Spec Form.” On the surface this assumption seems accurate, but we have provided you a method with which to do just that. That method is actually a call to a JavaScript function named InitializeSpecForm. If you load the web page that contains the Spec Form and search for this in the HTML source you will find it.

Notice that the method call exists in another JavaScript function named Startup. The Startup function is critical to the generation of every web page on the Four51 website. Within this function is the call to the InitializeSpecForm function using reflection:

if (typeof InitializeSpecForm == 'function') InitializeSpecForm();

You can add this function to your Spec Form and it will be triggered during the page’s initial load.

Example (you can add this to any spec form to see it in action):


function InitializeSpecForm() {
alert("InitializeSpecForm has been triggered!");
}

The InitializeSpecForm function is the gateway to assigning events to the Specs. The primary purpose of this function is to create variables that provide pointers to the variable specs on your forms. The result is the ability to reference specs like so:

spec[‘specname’]

In coming posts we will cover specific examples of how to make events work within the Spec Form.

If you want to learn more about Javascript I suggest reading the following:

JavaScript Events definition
List of all JavaScript Event
A Re-Introduction to JavaScript

Popularity: 2%