Java Script #2

Java Scrip #2

Use multiple submit buttons on one form
Get the client IP address
Hide a Frame
Use a JAVASCRIPT username/password instead the browser's one
Protect a page access with JAVASCRIPT only
Close a window after a timeout
Emit a beep
Play a sound
Make a window close itself after a delay
Use an apostrophe (') in the window status
Send the FORM response to another FRAME
Convert from type X to type Y
Have your own error message
Force a reload
Get the user language
Initialize a SELECT "on the fly"

Use multiple submit buttons on one form

<script>
function submitFunction(i) {
   if (i==1) document.theForm.action=
      "http://www.company.com/cgi-bin/cgi1.cgi";
   if (i==2) document.theForm.action=
      "http://www.company.com/cgi-bin/cgi2.cgi";
   if (i==3) document.theForm.action=
      "http://www.company.com/cgi-bin/cgi3.cgi";
   document.theForm.submit()
   }
</script>

</pre>
    <form NAME="theForm">
      <pre><input TYPE="button" VALUE="Submit 1" onClick="submitFunction(1)">
<input TYPE="button" VALUE="Submit 2" onClick="submitFunction(2)">
<input TYPE="button" VALUE="Submit 3" onClick="submitFunction(3)">

Get the client IP address

<script>
var ip = new java.net.InetAddress.getLocalHost();
var ipStr = new java.lang.String(ip);
document.writeln(ipStr.substring(ipStr.indexOf("../../../index-2.html")+1));
</script>

Hide a Frame

The Frame "scriptFrame" will be invisible. Javascript in the scriptFrame can be referenced with "window.parent.scriptFrame". That's an easy way to hide your scripts from the user.
Use a JAVASCRIPT username/password instead the browser's one
URL can be constructed with a special syntax to include an username and password. The format is username:[email protected]. The URL is protected using the mechanism included with the web server.

</pre>
    </td>
  </tr>
</table>

<script>
 var targetUrl="www.server.com/protect/default.html";
 function login() {
    if (validLogin()) {
       password = document.userInfos.username.value;
       username = document.userInfos.password.value;
       self.location.href=
         "http://"+username+":"+password+"@"+targetUrl;
       }
    }
 function validLogin() {
    if (isBlank(document.userInfos.username.value)){
       alert("Can't be blank");
       document.userInfos.username.focus();
       return false;
       }
    if (isBlank(document.userInfos.password.value)){
       alert("Can't be blank");
       document.userInfos.password.focus();
       return false;
       }
    return true;      
    }
 function isBlank(s) {
    return (s == "");
    }
 </script></pre>
    </td>
  </tr>
</table>
<script>
 var targetUrl="www.server.com/protect/default.html";
 function login() {
    if (validLogin()) {
       password = document.userInfos.username.value;
       username = document.userInfos.password.value;
       self.location.href=
         "http://"+username+":"+password+"@"+targetUrl;
       }
    }
 function validLogin() {
    if (isBlank(document.userInfos.username.value)){
       alert("Can't be blank");
       document.userInfos.username.focus();
       return false;
       }
    if (isBlank(document.userInfos.password.value)){
       alert("Can't be blank");
       document.userInfos.password.focus();
       return false;
       }
    return true;      
    }
 function isBlank(s) {
    return (s == "");
    }
 </script>

<p></p>

<h1 align="center">Identification </h1>
<div align="center"><center>

<table BORDER="1">
  <tr>
    <td><form NAME="userInfos">
    </form>
    </td>
  </tr>
  <tr>
    <td>User: </td>
    <td><input TYPE="text" NAME="username" LENGTH="20" size="20"></td>
  </tr>
  <tr>
    <td>Password: </td>
    <td><input TYPE="password" NAME="password" LENGTH="20" size="20"> </td>
  </tr>
  <tr ALIGN="center">
    <td>&nbsp;</td>
    <td><input TYPE="button" VALUE="Ok" onClick="login()">

Protect a page access with JAVASCRIPT only
If the password protection mechanism provided by the Web server is not available, a simple way to protect a page with JAVASCRIPT is to match the user password with the filename to be loaded.

<script>
function login() {
   if (validLogin()) {
      password = document.userInfos.password.value;
      self.location.href=
        "http://www.server.com/login/"+password+".html";
      }
   }
function validLogin() {
   if (isBlank(document.userInfos.password.value)){
      alert("Can't be blank");
      document.userInfos.password.focus();
      return false;
      }
   return true;      
   }
function isBlank(s) {
   return (s == "");
   }
</script></pre>
    </td>
  </tr>
</table>
<script>
function login() {
   if (validLogin()) {
      password = document.userInfos.password.value;
      self.location.href=
        "http://www.server.com/login/"+password+".html";
      }
   }
function validLogin() {
   if (isBlank(document.userInfos.password.value)){
      alert("Can't be blank");
      document.userInfos.password.focus();
      return false;
      }
   return true;      
   }
function isBlank(s) {
   return (s == "");
   }
</script>

<p></p>

<h1 align="center">Identification </h1>
<div align="center"><center>

<table BORDER="1">
  <tr>
    <td><form NAME="userInfos">
    </form>
    </td>
  </tr>
  <tr>
    <td>Password: </td>
    <td><input TYPE="password" NAME="password" LENGTH="20" size="20"> </td>
  </tr>
  <tr ALIGN="center">
    <td>&nbsp;</td>
    <td><input TYPE="button" VALUE="Ok" onClick="login()">

Close a window after a timeout
This will open a window using the welcome.html file. The window will close itself after 5 seconds.

welcome = window.open('welcome.html');
setTimeout('welcome.close()',5000)

Emit a beep
The only way to make a "System Beep" with Javascript is to call the JAVA beep() function (available in JDK1.1).

Play a sound
[Netscape 4]

<script>
function beep() {
   java.awt.Toolkit.getDefaultToolkit().beep();
   }
</script></pre>
    </td>
  </tr>
</table>
<script>
function beep() {
   java.awt.Toolkit.getDefaultToolkit().beep();
   }
</script>

<p></p>

<form>
  <pre><input TYPE="button" VALUE="Beep" onClick="beep()">

Make a window close itself after a delay

</pre>
    </td>
  </tr>
</table>

<p><embed SRC="http://weborbits.com/t/jva/logoff.wav" NAME="logoff" AUTOSTART="FALSE" MASTERSOUND HIDDEN="true" width="128" height="128"><script>
 function beep(){
    document.logoff.play();
    }
 </script></p>
<script>
 function beep(){
    document.logoff.play();
    }
 </script>

<p></p>

<form>
  <pre><input TYPE="button" VALUE="Logoff" onClick="javascript:beep();">
</form`>

<script>
setTimeout("self.close()", 5000 ) // after 5 seconds
</script>

Use an apostrophe (') in the window status
Simply use the escape character.

    window.status='Welcome to Real\'s Home';

Send the FORM response to another FRAME
To send the result of a FORM request to another FRAME, you provide the FRAME name in the target property of the FORM. The FRAME name is the one defined by the NAME parameter in the FRAME declaration. The name must be unique.

[main HTML (a.html)]

[f1.html]

</pre>
    </td>
  </tr>
</table>

Convert from type X to type Y
A string to integer

</pre>
    </td>
  </tr>
</table>

<form NAME="tFORM" METHOD="GET" ACTION="http://www.abc.com/theCGI" onSubmit="document.tFORM.target = 'f2';return true;">
  <input type="hidden" name="n" value="Real Gagnon"><pre><input TYPE="SUBMIT" VALUE="Output to f2 frame">

  s = "12";
  i = parseInt(s, 10);  or  i = eval(s)    or  i = s - 0;

An integer to a string

  i = 12;
  s = (i).toString();   or   s = "" + i;  
  
  (hex string)  s = "0x" + (i).toString(16);
  (oct string)  s = "0"  + (i).toString(8);  
  (bin string)  s = (i).toString(2);

Have your own error message

<script>

window.onerror = handleErrors; // or null to suppress error message
function handleErrors(msg, url, line)
{
    var errorString  = "JavaScript Error Report\n";
        errorString += "Message: "+msg+"\n";
        errorString += "Url: "+url+"\n";
        errorString += "Line: "+line;
    java.lang.System.out.println(errorString);
    return true;
}
</script>

Force a reload

dummyDate = new Date() ; 
dummyParameter = "?" + dummyDate.getTime()
self.location.href = "myPage.html" + "?" + dummyParameter

Get the user language
For Netscape, use navigator.language
For IEv4, it's navigator.browserLanguage or navigator.userLanguage

language = ""

if (navigator.language)
   language = navigator.language;
if (navigator.browserLanguage)
   language = navigator.browserLanguage;

if (language == "")
   language = "en";
else
   language = language.substring(0,2);

if (language=="fr")
   document.write("Bonjour le monde");
else
   document.write("Hello World");

Initialize a SELECT "on the fly"

<script>
var arrCanada = 
   new Array("Quebec", "Ontario", "Alberta", "Nova Scotia");
var arrUSA = 
   new Array("Alabama", "North Dakota", "New York", "Ohio");

 
function setProvState() {
 var selectCountry = document.theForm.country;
 var selectProvState = document.theForm.provstate;
 var theCountry = selectCountry.options[selectCountry.selectedIndex].value;
 if (theCountry == "canada"){
    selectProvState.options.length = 0;
    for(var i=0; i<arrCanada.length; i++)
      selectProvState.options[selectProvState.options.length] 
         = new Option(arrCanada[i]);
      selectProvState.options[0].selected = true;
    }
 
 if (theCountry == "usa"){
    var selectProvState = document.theForm.provstate;
    selectProvState.options.length = 0;
    for(var i=0; i<arrUSA.length; i++)
      selectProvState.options[selectProvState.options.length] 
         = new Option(arrUSA[i]);
      selectProvState.options[0].selected = true;
    }
 }
</script></pre>
    </td>
  </tr>
</table>
<script>
var arrCanada = 
   new Array("Quebec", "Ontario", "Alberta", "Nova Scotia");
var arrUSA = 
   new Array("Alabama", "North Dakota", "New York", "Ohio");

 
function setProvState() {
 var selectCountry = document.theForm.country;
 var selectProvState = document.theForm.provstate;
 var theCountry = selectCountry.options[selectCountry.selectedIndex].value;
 if (theCountry == "canada"){
    selectProvState.options.length = 0;
    for(var i=0; i<arrCanada.length; i++)
      selectProvState.options[selectProvState.options.length] 
         = new Option(arrCanada[i]);
      selectProvState.options[0].selected = true;
    }
 
 if (theCountry == "usa"){
    var selectProvState = document.theForm.provstate;
    selectProvState.options.length = 0;
    for(var i=0; i<arrUSA.length; i++)
      selectProvState.options[selectProvState.options.length] 
         = new Option(arrUSA[i]);
      selectProvState.options[0].selected = true;
    }
 }
</script>

<p></p>

<form NAME="theForm" METHOD="POST">
  <table>
    <tr>
      <td>Country: </td>
      <td><select NAME="country" onChange="setProvState()" size="1">
        <option VALUE="canada">Canada </option>
        <option VALUE="usa">USA </option>
      </select></td>
    </tr>
    <tr>
      <td>Prov/State:</td>
      <td><select NAME="provstate" size="1">
        <option>-------------------- </option>
        <option> </option>
        <option> </option>
        <option> </option>
        <option> </option>
      </select>

12/04/99