Skip to main content

Hyperevents and DOM Example

The following example uses Hyperevents and DOM to create a hyperevent SignIn page. JavaScript event-handler code invokes the ObjectScript event-handler. It uses the HTML DOM to retrieve the log-in information entered by the user from the form. It also uses the HTML DOM to direct the user's browser to the correct CSP page.

Complete the following steps to create and test a hyperevent SignIn page.

  1. Using Studio, create two new CSP pages: HyperSignIn.CSP and Welcome.CSP, in csp/user.

  2. Add a welcome message in between the <body></body> tags of Welcome.CSP:

    
    <body>
    <h1>Welcome!</h1>
    </body>
    
    
  3. Add the following script to HyperSignIn.CSP. It defines an ObjectScript validation function. If the user enters “CSP” in the form's password field, the function directs the user's browser to load Welcome.CSP. If the user enters anything other than “CSP”, the function directs the user's browser to load Error.CSP.

    
    <script language="cache" method="Validate" 
      arguments="Pwd:%String" returntype="%Boolean">
     if (Pwd = "CSP"){
      &js<self.document.location='Welcome.CSP'>
     }
     else{
      &js<self.document.location='Error.CSP'>
     }
     quit 1
    </script>
    
  4. Add the following form. Note that the value of the button's onClick attribute is a JavaScript event-handler that uses hyperevents to invoke the Validate method.

    
    <form name="form1" method="post" action="">
     User: <input type="text" name="txtUsr" size="5">
     Password: <input type="password" name="txtPwd" size="5">
     <input type="button" value="Sign In" 
     onClick="#server(..Validate(self.document.form1.txtPwd.value))#">
    </form>
    
  5. Open HyperSignIn.CSP in a Web browser. Enter “CSP” into the password field.

    generated description: hyperlogin20142

  6. Click Sign In.

    generated description: hyperlogin220142

FeedbackOpens in a new tab