Embedding WebSpellChecker Support for multiple text boxes
Revision 7-17-2003

This document describes how you can include the spell checking service in an HTML page that contains multiple text boxes.

It often happens that one particular HTML page may contain several text boxes. Most vivid example of such page is a registration form. Users may find it very inconvenient and time-consuming when spelling is checked every time a new value is entered in the field. Our WebSpellChecker will provide you with a single time spell checking functionality, performed after all text boxes have been filled in.

To add WebSpellChecker functionality to your multiple text boxes form follow the steps below:

1.       Install WebSpellChecker engine on your web site.

WebSpellChecker is a client-server service. In order to enable users to use WebSpellChecker you should have both client- and server-side parts installed on your web site. The client-side part will be downloaded from your site and executed only in client’s browser while the server-side part will be running on your web site.

1.1.    Install client-side WebSpellChecker provider.

Client-side part will consist of two JavaScript files: spch.js and fmch.js.
The first file, spch.js, is an essential part of WebSpellChecker solution and will be used in all revisions. You will receive a registration e-mail, with this file attached in a zipped form. If for some reasons you lose this e-mail or your e-mail client blocks access to it, you can always download the file from “My Account” section on the site.
The second file, fmch.js, contains code that will enable WebSpellChecker engine to interact with your multiple text box solution. This file is available for free and can be downloaded here.

Now when you have both files, put them in a well-known common location on your web site. If you are going to use WebSpellChecker only in one application, you can put these files in the same directory where your HTML page resides. If you want to use WebSpellChecker in several HTML pages, it might be useful to put the two files into a shared web-aware folder and allow these files to be downloaded from your web-server.

Both files should be running in user’s browser (on the client side). They should never run on the server so make sure that you don’t have any server-side association for .js extension. Usually this happens if you put them in cgi-bin directory of Apache server. Following this simple instruction may save you many hours of fighting this common problem.

Check that both files are available for download by referencing them from your web-browser.

1.2.    Install server-side WebSpellChecker provider (proxy).

When user checks some text on HTML page, the engine makes requests to www.webspellchecker.net site where the spell processing application handles the request. As your domain and spellchecker.net domain are two different domains, browser does not allow accessing it from JavaScript code. To enable passing of the data onto WebSpellChecker server and getting back the corrected data, you need a proxy installed on your web site.

Detailed instruction on how to install the appropriate proxy you can find on General Installation Instruction page in the “Download the SPROXY.CGI Script File” section.

After you have installed the proxy, check if it works. In your browser navigate to proxy with “cmd” parameter equal to “ver”. The form is http://<YOUR_FULL_PROXY_PATH>?cmd=ver. For example, for ASP proxy version this will be:

http://myhost/sp/sproxy.asp?cmd=ver

If you accurately followed our instructions, this link should display a page with the version of your WebSpellChecker proxy, similar to this screenshot.

2.       Use WebSpellChecker service for multiple textbox checking.

2.1.    Add references to your WebSpellChecker engine.

Open an HTML file, where you want to add WebSpellChecker, in the text editor. In the HEAD section add reference to the WebSpellChecker engine. This means that you should include two additional strings:

<script type="text/javascript" language="javascript" src="http://<ENGINE_URL>/spch.js"></script>
<script type="text/javascript" language="javascript" src="http://<ENGINE_URL>/fmch.js"></script>

Note: You should replace <ENGINE_URL> with the actual path to the referenced files. Usually this will look like:

<script type="text/javascript" language="javascript" src="http://myhost/sp/fmch.js"></script>

If your HTML application and WebSpellChecker are located on the same web site, you can specify a relative path. In this case this will look as follows:

<script type="text/javascript" language="javascript" src="/sp/fmch.js"></script>

2.2.    Add “Spell Check” action.

In order to run WebSpellChecker you need to call the FCH_CheckFormTextControls JavaScript function in the following way:

FCH_CheckFormTextControls('INPUTCONTROLNAMESLIST','LANGUAGE_CODE', document.location.protocol + '//' + document.location.host + '<FULL_PATH_TO_SPROXY>');

INPUTCONTROLNAMESLIST is a list of coma-separated names of controls to be checked in your form. For example, if you have two text boxes “txtBusinessArea”, “txtPosition” on the first form, and on the second form you have text “txtComment”, the list will look as follows: ‘document.forms[0].txtBusinessArea, document.forms[0].txtPosition, document.forms[1].txtComment’.

LANGUAGE_CODE is the code of the language. You can find the list of supported languages and corresponding language codes in Appendix A at the end of this document.

FULL_PATH_TO_SPROXY is the path to proxy. For example, for ASP proxy version this might look like: /sp/sproxy.asp


There are two common ways users can invoke WebSpellChecker: by pressing the button and by clicking on the link. The difference is in the way of activation of the function.

Here is a sample code for invocation of WebSpellChecker through the button:

<INPUT TYPE="BUTTON" VALUE="Spell Check" onclick=" FCH_CheckFormTextControls(…);">

Sample code for link:

<A HREF="javascript: FCH_CheckFormTextControls(…);">Spell Check</a>

If you already had a button or a link assigned to some other action, you can always adjust WebSpellChecker code invocation procedure by defining your custom function and substituting custom action with the call to this function. This will enable you to invoke WebSpellChecker either before or after your custom action.

Note: WebSpellChecker call is asynchronous. This means that code flow will proceed to the next statement before the spelling-session is completed. You should always consider this fact while planning the code flow.

3.       Support for Rich text controls.

You may want to include rich text controls to the list of checked text boxes. The only difference between standard and rich text controls is in the way of notation (see INPUTCONTROLNAMESLIST description in section 2.2). For rich text controls the reference will be: <RICH_TEXT_CONTROL_NAME>.document.body. For example:

‘document.forms[0].txtComment.document.body’

4.       Support for Flash applications.

Your page may contain a Flash application with some input fields. You can add these fields to the checked controls. In this case instead of fmch.js you will need a customized Flash version. The file name is flch.js so you should rename it to fmch.js. Controls syntax and invocation procedure are also different. For more detailed information on adding Flash controls, see Flash instructions.

If you have any comments or suggestions, please contact our technical support team at tech@webspellchecker.net.

Appendix A. Languages, supported by WebSpellChecker.

Send us your evaluation for this document on a scale of 1 to 5 (where 5 represents excellent) to info@webspellchecker.net.