Frequently sought solutions

Our esteemed columnist tackles your most common JavaScript questions

1 2 Page 2
Page 2 of 2

To use, fill out the text box and click the Submit button. (Because there's only one text box in this form, pressing Enter while the insertion point is flashing in the box also acts to submit the form.)

Because the form uses the post method for sending the form, Netscape's mail message window does not appear (if you want that window to appear, use method get instead). The contents of the form are sent to the address after the mailto: protocol.

Currently only Netscape supports the mailto: protocol in the ACTION attribute; it is disabled in the current shipping version of Internet Explorer 3.0. Keep this mind if you're designing a page for a wide audience.

Remember that in Navigator 3.0, a warning dialog normally appears when sending an e-mailed form via method post. This dialog tells the user that an e-mail form is about to be sent; the user has the option of allowing the post, or canceling it. While Netscape makes it an option to turn this warning dialog off (choose Options, Network Preferences/Protocols), few users are likely to do so.

7. Submit a form using a link

If you're tired of boring buttons for submitting forms, you might try a link instead. With the proper formatting of the JavaScript code, you can use a link -- as text or as an image -- to submit the form.

Here's the basic approach: set up a function (I called mine submitForm) to handle the actual form submission. Use the JavaScript: protocol for the HREF of the form, and call the submitForm function.

<SCRIPT> function submitForm() { document.forms[0].submit(); }

</SCRIPT> <A HREF="javascript:submitForm()">Click to submit</A>

<FORM> <INPUT TYPE="text" NAME="text1"> <INPUT TYPE="text" NAME="text1"> </FORM>

Remember that you can always use an image instead of text for the link. Just replace the "click text" with the <IMG> tag specifying the image you want to use. For best results remember to include HEIGHT and WIDTH attributes for the image.

<A HREF="JavaScript:submitForm()"><IMG SRC="image.gif" 
HEIGHT=40 WIDTH=20>submit</A>

The example form submits to itself, which isn't too helpful. You'll probably want to submit the form to some CGI program somewhere, in which case you define the URL for the CGI program in the ACTION= attribute for the <FORM> tag. For instance, to submit the form to a CGI program called former.cgi at domain.com, use:

<FORM ACTION="http://domain.com/former.cgi">

Before you get all excited about being able to use a link to submit a form, keep this in mind: In some platforms of Netscape Navigator 2.0x (especially the Mac and Unix platforms of Navigator 2.01 and 2.02), Netscape may display a "Reentrant call to window" error message when using the javascript: protocol as the HREF in an <A> tag. One solution that usually works is to "wrap" the javascript: protocol function in a setTimeout function, thereby providing some delay for Netscape to properly process the link. Use a value of 0 for the delay in the setTimeout. Here's an example:

<A HREF="setTimeout ('JavaScript:submitForm(); 0)">Click to submit</A>

8. Determine the Netscape platform

Netscape is currently available in release versions for the Windows 3.1, Windows 95/NT, Macintosh, various Unix X Window platforms, with OS/2 on the way. There are some differences in the implementation of JavaScript between these platforms in certain versions. For example, the eval function is badly broken in the initial release of Navigator 2.0 for the Macintosh. Most scripts that use the eval function will crash when run on the Macintosh version of Netscape.

Because of these cross-platform incompatibilities, it is often helpful to determine which version a user has, before processing the rest of the script. If your script contains code that is known to be disruptive on one version, you can either warn the user about it ahead of time, stop the remainder of the script, or change to a completely different script that doesn't exhibit the problem.

Use the appVersion property of the navigator object to determine the Netscape platform. This property actually contains a number of useful pieces of information, including the version number of Netscape Navigator, and whether it is the international or domestic version (this domestic version offers better encryption security; however, as the X Window platform does not currently return a value specifying international or domestic, you should not use this information for any mission-critical work).

The string contained in the appVersion property looks like this:

3.0 (Win95; I)

where 3.0 is the version, Win95 is the platform, and I denotes International. Here are some variations you might encounter:

  • 3.01 indicates a maintenance release
  • 3.0NOV indicates an OEM version of Netscape (in this case to Novell)
  • Win3.1 indicates Windows 3.1 platform
  • Macintosh indicates Mac platform
  • X11 indicates an X Window platform

Since the length of the string and its contents may change depending on versions and platforms, you should use the indexOf string method to look for the unique text of the platform you are interested in. To test for the Windows 95 version, for example, write the if test as follows:

TempString = navigator.appVersion;
if (TempString.indexOf ("Win95") >= 0)
    alert ("Win95 version");
else
    alert ("Some other version version");

If you want to test for any of the four possible platforms, you can use the series of if tests, as shown in this complete, working example of version testing:

<HTML>
<HEAD>
<TITLE>What Version Am I? </TITLE>
<SCRIPT LANGUAGE="JavaScript">
function viewAppVersion (form) {
    TempString = navigator.appVersion;
    if (TempString.indexOf ("Win9") >= 0) {
        alert ("Windows 95/NT version")
    } else if (TempString.indexOf ("Win16") >= 0) {
        alert ("Windows 3.1 version")
    } else if (TempString.indexOf ("Macintosh") >= 0) {
        alert ("Macintosh version")
    } else if (TempString.indexOf ("(X") >= 0) {
        alert ("X Window version")
    } else
        alert ("Some other version version")
}
</SCRIPT>
<BODY>
<FORM NAME="myform">
<INPUT TYPE="button" NAME="button" VALUE="Check Version" 
    onClick="viewAppVersion(this.form)" >
</FORM>
</BODY>
</HTML>

9. Dynamically set the HREF of a hypertext link

In normal HTML you set the HREF (hyperlink reference) of a link using the <A> tag, where document.html is the name of the document you want to link to:

<A HREF="document.html">Click here</A>

Whenever you click on the link, you are transported to document.html. You can also "programmatically" set or change the HREF of a hypertext link using JavaScript. In this way you can change the destination of the link depending on some variable, such as the user's version of Netscape or the day of the week. For example, suppose you want to determine if someone is using the Macintosh version of Netscape. If so, you want the anchor to link to a special Macintosh page. If the Mac version of Netscape is not being used, the user is sent to a normal page.

<HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript">

function loadme () { var Platform = navigator.appVersion; if (Platform.indexOf ("Macintosh") != -1) document.links[0].href = "macpage.html"; }

</SCRIPT> </HEAD> <BODY onLoad = "loadme()"> This link changes depending on the day of the week. <P> <A HREF="regpage.html">Click here</A> </FORM> </BODY> </HTML>

Here's how it works. The anchor is initially set with an HREF of regpage.html. When the document finishes loading, JavaScript calls the loadme function. In this function, JavaScript compares the platform of Navigator, using the appVersion property of the navigator object. If the appVersion property contains the text "Macintosh," the script changes the HREF of the anchor to macpage.html).

If you don't have a Macintosh but want to try the script, change the text comparison to the version of browser you are using. For example, if you are using the Windows 95 version, change the if expression to read:

if (Platform.indexOf("Win95") != -1)

10. Round off those incredibly long numbers

On most platforms of Netscape Navigator 2,0x, JavaScript loses accuracy in its calculation of floating-point values. This is because of the different approaches to floating-point arithmetic on different kinds of computers. So, you often get a number like 17.5399999999999999 for a formula such as

18.73 - 1.19

Almost any .98 calculator will tell you that the answer is 17.54. You can fix the number JavaScript provides so that it is accurate on any Netscape platform with this short routine (this one is just an example -- you can make it more elaborate if you wish). Pass the floating-point value, as well as the number of digits you want to the right of the decimal point (0 to 15 will yield valid results). The number is rounded off to the nearest decimal value. For example, the call:

Formula = 18.73 - 1.19;
Ret = floatFix (Formula, 2);

results in 17.54, as it should. Do note that the rounding error bug has been generally fixed in version 3.0 of Navigator. However, a lot of people are still using Navigator 2.0x, so if your JavaScript code deals with floating-point values, "fixing" the decimal places is a good practice. The work-around code below doesn't interfere with the proper functioning of JavaScript Netscape 3.0.

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function runTest(form) {
    alert ("Value initially calculated by JavaScript is: " + eval(form.num.value));
    alert ("Value corrected with floatFix is: " + floatFix (eval(form.num.value), 2));
}
function floatFix (Val, Places) {
    var Res = "" + Math.round(Val * Math.pow(10, Places));
    var Dec = Res.length - Places;
    if (Places != 0)
    OutString = Res.substring(0, Dec) + "." + Res.substring(Dec, Res.length);
else
OutString = Res;
    return (OutString);
}
</SCRIPT>
<BODY>
Enter a value to calculate: <P>
<FORM>
<INPUT TYPE="text" NAME="num" VALUE=""><BR>
<INPUT TYPE="button" NAME="button" VALUE="OK" onClick="runTest(this.form)">
</FORM>
</BODY>
</HTML>

Conclusion

As JavaScript matures, its possible uses multiply. That means people will continue to find new ways of using JavaScript to solve their problems. Still, as with most computer languages, the bulk of programmers' problems tend to be the little things. Bolster your mastery of those little things and JavaScript becomes a far easier, and far richer, language to work with.

Gordon McComb is an author, consultant, and lecturer. He has written 50 books and over a thousand magazine articles during his 20 years as a professional writer. More than a million copies of his books are in print. Gordon also writes a weekly syndicated newspaper column on computers, reaching several million readers worldwide. Gordon's latest book is The JavaScript Sourcebook, available from Wiley Computer Publishing.

Learn more about this topic

This story, "Frequently sought solutions" was originally published by JavaWorld.

Copyright © 1996 IDG Communications, Inc.

1 2 Page 2
Page 2 of 2