home / articles / frontpage

Scripting With FrontPage and the Script Wizard

Scripting is something which everyone eventually uses in a website; well, almost everybody. It is used for so many different purposes that I couldn't begin to enumerate them. Probably the most common use of scripting is form validation. For those of you in Rio Linda, that means "making sure that the user typed in what he/she was supposed to, before the form gets submitted and it's too late to do anything about it." Let's say that you want a user to input some data into a database. As you know, database fields are different data types: text, numeric, currency, and date, to name just a few. You have a form where a person is supposed to input an amount of money. Person A types in "$35.00." Person B types in "35.00." Person C types in "Thirty-five dollars." Well, Person B is the only one who typed in the correct format. A currency field doesn't accept dollar signs or text. It accepts numbers only. So, how do you keep the "dummies" (you know, the ones they wrote all those books for?) from putting "dumb" stuff into your form fields? Script validation, of course.

FrontPage has some nice utilities for doing script validation. When you are creating a form, you can right-click on any form field and bring up the Validation Dialog Box:

When you fill out this box, believe it or not, a Javascript function is written for you, that is triggered by the "onsubmit" event of the form (when the user pushes the "submit" button, usually). If the user hasn't done something right, the form won't submit, and they will be alerted of what they did wrong.

Now, when you open the page in HTML view, you won't see the script. Why? Because it's a secret, silly! Actually, it's because it is a WebBot-generated script, and like a lot of other things FrontPage does, it is considered "sacrosanct," untouchable.

But, you may ask, what if I want to add my own custom stuff to the script? Well, now you have a problem. You can get around this by a little series of tricks:

1. Close the page in FrontPage Editor.

2. Open it in a test editor

3. Copy the script onto your clipboard

4. Close the page in the text editor.

5. Open it in FrontPage Explorer again.

6. Remove all the form validation through the validation dialog box.

7. Select Insert|Script from the menu.

8. Paste in your copy of the script.

9. Add whatever code you may wish.

Now comes the tricky part. You need to call the function from the "onsubmit" event of the form. You do this with the Script Wizard (Oh, I was wondering when he'd get around to the Script Wizard). You'll see a button in the Script dialog box which reads "Script Wizard." Press it! You will see the following dialog box:

The elements in each pane will vary, depending on the elements on your page. The left-hand pane is the "Event" pane; it contains events (d-uh!). The right-hand pane is the "Action" pane. It contains "event handlers," various kinds of "actions" which can take place when the events in the Event Pane occur. The illustration below shows the expanded elements on both panes:

What I've done in this case is to highlight the "onSubmit" event of the form (called "Unnamed FORM Element" because I didn't give it a name, of course). Then I looked under "Procedures" in the right-hand Action pane, and selected "Validator," the name of the validation function which I created by copying the FrontPage-generated script. Note in the code window at the bottom, that I added some additional instructions: "return Validator(this)." If you just double-click "Validator" you get "Validator()" in the code window. The reason for the "return" is that if the function returns a "(false)" value, the form won't submit, but if it returns a "(true)" value, the form will submit. The "(this)" passes the form to the function, so that you can reference it in the function. The function in this particular case follows:

function Validator(theForm)
{

if (theForm.username.value == "")
{
alert("Please enter a value for the \"Name\" field.");
theForm.username.focus();
return (false);
}

if (theForm.username.value.length < 1)
{
alert("Please enter at least 1 characters in the \"Name\" field.");
theForm.username.focus();
return (false);
}

if (theForm.username.value.length > 35)
{
alert("Please enter at most 35 characters in the \"Name\" field.");
theForm.username.focus();
return (false);
}

var checkOK = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyzƒŠŒšœŸÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖØÙÚÛÜÝÞßàáâãäåæçèéêëìíîïðñòóôõöøùúûüýþ0123456789-',.() \t\r\n\f";
var checkStr = theForm.username.value;
var allValid = true;
for (i = 0; i < checkStr.length; i++)
{
ch = checkStr.charAt(i);
for (j = 0; j < checkOK.length; j++)
if (ch == checkOK.charAt(j))
break;
if (j == checkOK.length)
{
allValid = false;
break;
}
}
if (!allValid)
{
alert("Please enter only letter, digit, whitespace and \"',.()\" characters in the \"Name\" field.");
theForm.username.focus();
return (false);
}

if (theForm.email.value == "")
{
alert("Please enter a value for the \"email\" field.");
theForm.email.focus();
return (false);
}

if (theForm.email.value.length < 1)
{
alert("Please enter at least 1 characters in the \"email\" field.");
theForm.email.focus();
return (false);
}

if (theForm.email.value.length > 30)
{
alert("Please enter at most 30 characters in the \"email\" field.");
theForm.email.focus();
return (false);
}

var checkOK = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyzƒŠŒšœŸÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖØÙÚÛÜÝÞßàáâãäåæçèéêëìíîïðñòóôõöøùúûüýþ0123456789-.@/";
var checkStr = theForm.email.value;
var allValid = true;
for (i = 0; i < checkStr.length; i++)
{
ch = checkStr.charAt(i);
for (j = 0; j < checkOK.length; j++)
if (ch == checkOK.charAt(j))
break;
if (j == checkOK.length)
{
allValid = false;
break;
}
}
if (!allValid)
{
alert("Please enter only letter, digit and \".@/\" characters in the \"email\" field.");
theForm.email.focus();
return (false);
}

if (theForm.subject.value == "")
{
alert("Please enter a value for the \"subject\" field.");
theForm.subject.focus();
return (false);
}

if (theForm.subject.value.length > 35)
{
alert("Please enter at most 35 characters in the \"subject\" field.");
theForm.subject.focus();
return (false);
}

var str = "";
for(j = 0; j < theForm.subject.value.length; j++) {
if(theForm.subject.value.charAt(j) == "\"") str += "'";
else str += theForm.subject.value.charAt(j);
}
theForm.subject.value = str;

if (theForm.message.value == "")
{
alert("Please enter a value for the \"Message\" field.");
theForm.message.focus();
return (false);
}
str = "";
for(j = 0; j < theForm.message.value.length; j++) {
if(theForm.message.value.charAt(j) == "\"") str += "'";
else str += theForm.message.value.charAt(j);
}
theForm.message.value = str;
return (true);
}

The part of the code which I added is bold. the rest of it was "borrowed" from the WebBot-generated script. For those of you who are curious, this validation script is for a discussion group on my website. It inserts messages into a database. what I wanted to do was convert " characters to ' characters in the messages, because in an HTX page, " characters can be string terminators. Oh, yes! I see now.

Note that the Script Wizard is not a wizard for writing scripts. I tis more of a "facilitator," for attaching certain actions to certain events. There is no substitute for hand-coding. at least yet. There are some nice utilities for writing scripts, such as a few of the FrontPage utilities, and J-Bots, by Webs Unlimited (http://www.websunlimited.com). but even these are limited in their functionality, and usually need to be supplemented with your own hand-coding.

A couple of other notes: There are difference between the object models of MS Internet Explorer and Netscape Navigator. One of the most difficult aspects of writing scripts is making sure that they work equally well in both browsers. J-Bots comes with a nice utility for identifying which elements are supported by which browser.

You may also note that I've used Javascript for all of my examples. This was not by accident. VBScript is not supported by Netscape, and may never be. Since the scripting here is "client-side" (it is in the page, and executed by the Java Virtual machine of the browser), it is best to stick to Javascript for this kind of scripting. I only use VBScript when writing "server-side" scripting, such as you would include in an ASP (Active Server Pages) file.

Well, campers, I guess I've given you about as much on this subject as I should for today. Don't want your brains to explode from "information overload!" ;-) See you next week.

Author: Kevin Spencer
Date: 10/24/97

More articles about Microsoft FrontPage
More articles by Kevin Spencer
Author Biography