Mouse Enter

var helpText = this.getField("txtHelp");
helpText.value =gHelpText[0];

As the mouse enters the field, JavaScript is asked to access some text from the document JavaScript helpText function array gHelpText. With arrays, the number 0 always represents the first item in an array, like so:

0= "What's your full name?"
1= "mm/dd/yyyy"
2= "Your customer code is on the form that was emailed to you."
3= "What's your Company Name?"

And so on, if there were more items in the array.

In the case of the Date field, you can see it is the same except for the number in the array you accessed. This time the Mouse Enter setting is 1. For the Order Code field, it’s 2, and for the Customer’s Company Name field, it’s 3.

var helpText = this.getField("txtHelp");
helpText.value =gHelpText[1];

Mouse Exit

HelpExit();

In the case of the mouse exit portion, all actions will be the same for all four fields. When the mouse or cursor exits the red stroked help box, it becomes blank.

Writing global document JavaScript like this can be helpful if for some reason you need to change some code inside this function. Any field that had this function attached would now do the new action rather than you having to go manually through and change each one.

Extra Non-Custom JavaScript Check Box Example

As in the form in Chapter 4, there are the examples of the Shipping Address hide and show text fields. Review this area if you can’t remember how it works. However, this area contains no custom JavaScript, so we’ll continue to the next example. Refer to Figure 9-5.

Figure 9-5. Review of Shipping Address check box and button examples

Customer’s Full Name

This time you will only run one JavaScript per field. Do not worry about an exit function because the alert box will take care of that for you, as you shall see. In this case, use On Focus, which activates when anyone clicks into the box. Refer to Figure 9-10.

Figure 9-10. Run a JavaScript in the Actions tab

This is the code:

var t = event.target; // the target field
var cResponse = app.response({
    cQuestion: "Type your name First, Last",
    cTitle: "Name",
    cDefault: "Name not added",
    cLabel: "Type your name"});
{
    if (cResponse == null){ // if Cancel is selected
    app.alert ("You cancelled adding your name.");
    cResponse = "";                                                                                                  
    }
    else{
    app.alert("You typed your name as: ""+cResponse+"" 

 Tab out of the field to register your name",3);
    }
}
t.value = cResponse; // places the data from the dialog to the target field

In Figure 9-11, you can see that the Alert creates a description and a space for the user to type their name as requested.

Figure 9-11. The JavaScript help message

If the user hits cancel, the warning they will get is “You cancelled adding your name.” And the text field will go back to blank. Refer to Figure 9-12.

Figure 9-12. The JavaScript warning when the user hits cancel

If the user types in their name, they get “You typed your name as: [client name]”. Once the client tabs out of that field, their name is confirmed. Refer to Figure 9-13.

Figure 9-13. The JavaScript confirmation after the user clicks OK

Let’s move to the next field. Notice how again you use the if/else condition to get two possible answers.

Date

The Date field behaves in a similar fashion. However, remember to make sure this field is formatted to a date that matches the text. Refer to Figure 9-14.

Figure 9-14. The Date Options menu in the Format tab

Now go to the Actions tab and use the same setting as with the Customer’s Full Name, altering the text to suit your needs. Refer to Figures 9-15 and 9-16.

Figure 9-15. Run a JavaScript for the Date field

Figure 9-16. JavaScript help message for the Date field

The code:

var t = event.target; // the target field
var cResponse = app.response({
    cQuestion: "Type the Date mm / dd / yyyy",
    cTitle: "Date",
    cDefault: "Date not added",
    cLabel: "Type the Date"});
{
    if ( cResponse == null){ // if Cancel is selected
        app.alert ("You cancelled adding the date.");
            cResponse = "";
    }
    else{
    app.alert("You typed the date as: ""+cResponse+"" 

 Tab out of the field to register the date",3);
    }
}
t.value = cResponse; // places the data from the dialog to the target field

Customer Order Code

You will construct the customer order code in the same way as the date, only the code will be different. Refer to Figure 9-17 to see the result.

Figure 9-17. JavaScript help message for customer order code and confirmation message

The customer order code functions similarly and you could have set the format to number. However, you may want letters and numbers in your code, so leave the formatting to None.

// Customer Code or Credit Card Example
var t = event.target; // the target field
var cResponse = app.response({
    cQuestion: "Type your Customer Order Code number using numbers/letters only and without dashes",
    cTitle: "Customer Order Code",
    cLabel: "Type your 16 digit code number"});
{
    if ( cResponse == null){ // if Cancel is selected
    app.alert ("You cancelled adding your code.");
    cResponse = "";
}
    else {
    if (cResponse.length != 16){
    app.alert("Type the complete number/letters without dashes or there may be more or less than 16 digits.");
    cResponse = "";}
    else{
    app.alert("You typed your Order Code number as: ""+cResponse+"" 

 Tab out of the field to register the card number",3);}
    }
}
t.value = cResponse; // places the data from the dialog to the target field

Notice how the outer else statement does its own conditional check to make sure that there are 16 characters inside the field. If there are not, the alert might remind you to type without dashes or that there are not 16 characters typed in, if you decide to adjust the message.

Customer’s Company Name

This code is similar to the Customer’s Full Name field. Refer to Figure 9-18.

Figure 9-18. JavaScript help message for company name and the confirmation message

// Company name
var t = event.target; // the target field
var cResponse = app.response({
    cQuestion: "Type your Company’s Name",
    cTitle: "Company Name",
    cDefault: "Company Name not added",
    cLabel: "Type your Company name"});
{
    if ( cResponse == null){ // if Cancel is selected
    app.alert ("You cancelled adding your Company’s name.");
    cResponse = "";
    }
    else{
    app.alert("You typed your Company name as: ""+cResponse+"" 

 Tab out of the field to register your name",3);}
}
t.value = cResponse; // places the data from the dialog to the target field