Web Crossing Server-side JavaScript

WCJS Form Processing

Introduction
Creating a Form Processing Command
Creating a Test Form
Testing the Form Processor Directly with a URL
Troubleshooting
Resources
Next Section

Introduction

In the previous section, we created our first JavaScript function, a factorial function. To call the function we used the WCTL expression

%% "factorial(4)".jsEval %%

inside a test folder header. While this worked, and is a good way to quickly test your JavaScript functions, it doesn't make the factorial function we created very useful.

We would like to be able to have users enter an integer in a form (as in figure 1) and then have the form call a form processing command which invokes our factorial function and return a page with the result.

Figure 1 - a form that calls a JavaScript function to calculate factorials

The concepts discussed here are very similar to those discussed in the the WCTL section on form processing. You might want to review that section as well.

Creating a Form Processing Command

First, let's modify the factorial.tpl file we created in the previous section. The new contents should contain the following two JavaScript functions:

%% command factorialProcess () {
var n = form.n;
+ '<HTML><BODY BGCOLOR="#FFFFFF">';
+ 'The factorial of ' + n + ' is ' + factorial(n) + '<BR>';
} %%


%% function factorial (n) {
if (n == 0)
return (1)
else
return n * factorial(n-1)
}%%

The factorialProcess JavaScript function processes the form and is defined with the command keyword, rather than with the usual function keyword. This is special syntax unique to Web Crossing. WCJS commands may be called via URLs (such as the action of a form). This is done to provide extra security for your JavaScript functions. JavaScript functions defined with the function keyword are hidden from the outside and cannot be called directly from a browser using the URL syntax.

In the second line of factorialProcess we see the JavaScript statement

var n = form.n;

Here we create a local variable with the name n and store in it the value of the form field, which we also named n.

The next two lines:

+ '<HTML><BODY BGCOLOR="#FFFFFF">';
+ 'The factorial of ' + n + ' is ' + factorial(n) + '<BR>';

define character strings which are appended to the response web page. WCJS provides the special "+" syntax to make it easy to send output to the response page without calling an awkward function such as document.write(msg) each time, like you do in client-side JavaScript. In the second line our factorial function is called using the local variable n as a parameter. The value of n is also used in the output string.

Note: For those of you familiar with WCTL, you are used to just entering any plain text inside a WCTL macro and having that text sent to the response web page. JavaScript is much cleaner and easier-to-read because it is not embedded with all those double-percent marks (%%). However, since JavaScript plain text is considered part of the JavaScript function - expressions to be evaluated - the actual text you want to send to a response page must be delimited somehow. This is done by enclosing the text in single or double quote marks.

The factorial function is explained in the previous section.

Move the factorial.tpl file over to your webxTemplates directory, make sure that

<!--#Include File="factorial.tpl"-->

is included in your webx.tpl file and reset the file cache, as described in the previous section.

Creating a Test Form

You can place the following HTML directly in a test folder header to display and use the form shown in figure 1:

<FORM ACTION="http://webx.webxharbor.com/cgi-bin/webx?factorialProcess@@" METHOD=POST>
<P>Enter a positive integer <INPUT TYPE=text NAME=n VALUE="" SIZE=5>
and then press <INPUT TYPE=submit NAME=calculate VALUE="calculate factorial">
</FORM>
 

Be sure to replace the webx.webxharbor.com/cgi-bin/webx part in red with your own domain and script name.

Now you can enter the test folder, see the form, enter a positive integer and press the calculate factorial button. A response page will report the result, as shown in figure 2.

Figure 2 - the result page returned by factorialProcess

Naturally you can use the full arsenal of JavaScript methods to validate the user data (to prevent the entering of negative numbers for example) and make your output more aesthetically pleasing.

Testing the Form Processor Directly with a URL

You can also directly call the factorialProcess command with a special URL. For example, here at Web Crossing Harbor (where all our functions are above average), we could use the following URL to directly call the factorialProcess command and pass it the value n=6 to calculate:

http://webx.webxharbor.com/cgi-bin/webx?factorialProcess@@!n=6

You should replace the part of the URL in red with your own domain and script name.

The special syntax ?factorialProcess@@!n=6 means "pretend you are a form and you want to pass the field n with the value 6 to the form processor factorialProcess.

You will find yourself using this technique over and over again to quickly test form processors.

Next Section

The next section introduces you to more of the special features of Web Crossing JavaScript.

Troubleshooting

I tried the example above, but when I look at the header all I see is the code itself, with all the double-percent marks. What am I doing wrong?

Resources

Sysop docs:

Recommended book:

Developer Center