Date:  07/20/2006 07:56:29 AM Msg ID:  003065
From:  Jeff Grippe Thread:  002998
Subject:  Re: Validate using Javascript and Database
Here are two files which demonstrate AJAX with FoxWeb
 
The first file, PWEnter.FWX is a page which has a text field that requests a password. The password is checked when you exit the text field using onblur=.
 
The second file is CheckThePW.FWX which checks the password and returns either YES or NO to PWEnter.FWX. The password is checked using VFP code. Clearly the code can be as complex as you need it to be.
 
I have this working well in my site so please contact me if you have additional questions.
 
BTW part of the code that I copied involved building a url with a parameter sid which is set equal to a random number. According to the website that I took the code from, it forces the page to be reloaded because it is different everytime. I has nothing to do with my code or AJAX but I left it in.
 
PWEnter.FWX
<html>
 <head>
  <script language="JavaScript">
  <!--
  //
  // this FoxWeb AJAX example could not have been developed without having seen the tutorial
  // available at http://www.w3schools.com/ajax/default.asp
  //
  // this is that tutorial re-written for FoxPro / FoxWeb
  //
  var xmlHttp
  function CheckPW()
  {
  // build a variable called url which will call checkthepw.fwx with three query strings
  // the first one is a random value which will always cause the url to reload in the browser
  // the second two are the CLIENT and PASSWORD variables from the from. Only PASSWORD is validated
  var url="checkthepw.fwx?sid=" + Math.random() + "&CLIENT=" + document.PWForm.client.value + "&PASSWORD=" + document.PWForm.password.value
  
  // Setup the xmlHttp object and assign the stateChanged function as the callback function
  xmlHttp=GetXmlHttpObject(stateChanged)
  
  // Call the url defined above
  xmlHttp.open("GET", url , true)
  xmlHttp.send(null)
  }
  // this function will take the result from the url and put it into the form element
  function stateChanged()
  {
  if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
   {
   document.getElementById("result").innerHTML=xmlHttp.responseText
   }
  }
  // this function creates and xmlHttp object and assigns the callback function
  function GetXmlHttpObject(handler)
  {
  var objXmlHttp=null
  if (navigator.userAgent.indexOf("Opera")>=0)
   {
   alert("This example doesn't work in Opera")
   return
   }
  if (navigator.userAgent.indexOf("MSIE")>=0)
   {
   var strName="Msxml2.XMLHTTP"
   if (navigator.appVersion.indexOf("MSIE 5.5")>=0)
    {
    strName="Microsoft.XMLHTTP"
    }
   try
    {
    objXmlHttp=new ActiveXObject(strName)
    objXmlHttp.onreadystatechange=handler
    return objXmlHttp
    }
   catch(e)
    {
    alert("Error. Scripting for ActiveX might be disabled")
    return
    }
   }
  if (navigator.userAgent.indexOf("Mozilla")>=0)
   {
   objXmlHttp=new XMLHttpRequest()
   objXmlHttp.onload=handler
   objXmlHttp.onerror=handler
   return objXmlHttp
   }
  }
  // -->
  </script>
 </head>
 
 <body>
  The correct password will result in YES being displayed in the result.<br><br>
  Any other response will show NO for the result.<br><br>
  The correct password is the word correct.<br><br>
  Be sure to hit tab or use the mouse to lose focus from the password text box.<br><br>
  <form name="PWForm" id="PWForm">
   Client:
   <input type="text" name="client" id="client">
   <br>
   Password:
   <input type="text" name="password" id="password" onblur="CheckPW()">
   <br>
  </form>
  <p>Result:<span id="result"></span></p>
 </body>
</html>
 
CheckThePW.FWX
<%
* this is a sample script that is part of an AJAX demonstration
* it gets two query strings from the url and validates the password against the word "CORRECT"
*
* this could have been any Fox code, however.
*
* the important thing is that the values that are returned are returned using response.write.
* this is the information that gets picked up by pwenter.fwx and is use to update the form
*
* get the parameters
lcCli_Code = request.querystring("CLIENT")  && get the client
lcPassWord = request.querystring("PASSWORD") && get the password
* check the password and return the result to pwenter.fwx
IF ALLTRIM(UPPER(lcPassWord)) = "CORRECT"
 response.write("YES")
ELSE
 response.write("NO")
ENDIF
%>
 
Sent by Jim on 07/20/2006 05:36:24 AM:
Please post the code!!  I would name children after you...

-Jim


"The true measure of a career is to be able to be content, even proud that you succeeded through your own endeavors without leaving a trail of casualties in your wake."  - Allen Greenspan

Sent by Jeff Grippe on 06/29/2006 12:23:52 PM:
You are right. I did not have to wait.
 
I have developed a sample FoxWeb/AJAX script and I have documented it.
 
You are welcome to it or if there is some place for user developed scripts I'd be happy to post it there.
 
For me the missing link in understanding this was realizing that the server-side app was an FWX script which used response.write to send back its result to the client script.
 
I now know how to code my password validation routine using AJAX which has the password validation done on the server.
 
I am grateful for your help and happy to share this code. It is short, simple, and documented!
 
Jeff
Sent by FoxWeb Support on 06/29/2006 11:06:30 AM:
We don't currently have any examples, but will try to put something together in the future.  However, you don't have to wait for this.  There's no difference between implementing AJAX with FoxWeb, ASP, JSP, or any other server-side application environment.  AJAX technology is implemented on the browser via JavaScript.  As far as the server is concerned, the application is receiving regular HTTP, or HTTPS requests and it needs to respond with data -- typically in XML format.

FoxWeb Support Team
support@foxweb.com email

Sent by Jeff Grippe on 06/29/2006 02:51:57 AM:
Do you have an AJAX / FoxWeb example?
 
I read the article that you pointed me to and while I understood the concept and the sample that they provided, I have no idea how this would work with FoxWeb.
 
Have you considered putting an AJAX / FoxWeb sample on the website?
 
Thanks Again,
Jeff
Sent by FoxWeb Support on 06/28/2006 08:34:17 PM:
You should use AJAX to make an SSL request to the server with the password that the user provided.  If the server returns a positive reply, then you should submit the form with JavaScript.

FoxWeb Support Team
support@foxweb.com email

Sent by Jeff Grippe on 06/28/2006 12:00:09 PM:
I understand and agree but then I'm faced with the problem of how to do it.
 
The form is a form that requests from 2 - 4 files for uploading. At the bottom of the form is a text box for password entry and a submit button.
 
I need to check the password before the user clicks the submit button and uploads the files. If I check the PW on the server then I must upload the files first. This is a long time for my users to have to wait just to find out if they typed the PW correctly.
 
I offered to design the system so that they validated the PW and then got access to the upload screen but my lawyers are insisting that it all has to be done on one screen.
 
The only way I know to validate at submit is to use JavaScript. When I use JavaScript the code returned from the server contains the PW in the script.
 
I'm open to any suggestions.
 
Thanks
Sent by FoxWeb Support on 06/28/2006 10:05:17 AM:
Authentication must be done on the server in order for it to be secure.  Under no circumstances should you send the password to the client -- even in encrypted format.  If the JavaScript code that will run on the client knows how to decrypt the password (which it needs to in order to validate), then it's not a secure system.

FoxWeb Support Team
support@foxweb.com email

Sent by Jeff Grippe on 06/28/2006 08:20:45 AM:
Thank you for your reply. I was actually able to achieve the result using the technique that you originally recommended for accessing FoxWeb variables inside of JavaScript.
 
My next problem is that the page that is served contains the password in the JavaScript code that is generated. This is a problem because a sophisticated user could view the source and acquire the password.
 
I can not re-organize the page to collect the password somewhere else other than at the time the form is submitted. This is something that my legal department has insisted on.
 
Is there any way to either encrypt the PW in the JavaScript code or to serve a page whose source can't be viewed?
 
Thanks again.
Sent by FoxWeb Support on 06/27/2006 08:31:45 PM:
In your original message you asked:
Is there some way to load a value (such as the password that I need to check) into a variable that javascript can access so that I can write code in my validate function to check it against the value in a text input field?
My question referred to the password value.  I assume that the user enters a userid in the same form that contains the field that asks for the file to be uploaded.  Is this correct?  If yes, then why not split the forms in two pages.  The first page will ask for the userid and password.  Once the user clicks the submit button, a script on the server should validate the password and return a subsequent form that asks for the file to be uploaded.
 
If you don't want to split the forms, then you will need to use AJAX to make a request to the server, without actually submitting the form.  I can't teach you how to employ AJAX technology in this forum, but you can look it up on the Web.  A quick search will turn up lots of helpful information on this subject.  This article is particularly useful: http://developer.mozilla.org/en/docs/AJAX:Getting_Started.  In fact, the article contains everything you need to know in order to use AJAX in your FoxWeb scripts.

FoxWeb Support Team
support@foxweb.com email

Sent by Jeff Grippe on 06/27/2006 01:58:07 AM:
I am not sure about the answer to "Do you know the value you are validating against?"
 
My typical FWX file has the following structure:
 
<%
* SETUP CODE, GET Session Variables, Open Files, Run Queries, Etc.
%>
 
// Javascript Validation Code
 
<HTML>
   HTML Stuff
</HTML>
 
I could lookup the password in the setup code but I think that may be too late, or is it? When is the '<%=pswd%>' from your example resolved? Does my setup code run first allowing me to retreive the value from a database
or session variable?
 
Thanks!
Sent by FoxWeb Support on 06/26/2006 09:47:40 PM:
Do you know the value you are validating against at the time that the form is served by FoxWeb?  If yes, you can dynamically create some JavaScript code that sets the variable value dynamically:
 

<script language="JavaScript">

var password='<%=pswd%>';

</script>

<form ... (your form)

 
You could even populate an array with a bunch of values.
 
If, on the other hand, you are validating against a large set of values (such as your password example), then there are two options:
  1. Split data entry into two pages.  First ask for the values that need to be validated and in the following request return a form that asks for the file upload.
  2. Use AJAX to retrieve the values that you want to validate against.  There are lots of resources on the web that provide information on this subject.

FoxWeb Support Team
support@foxweb.com email

Sent by Jeff Grippe on 06/26/2006 01:28:51 PM:
I need to validate a form value before the user clicks submit in order to prevent a long file upload when a required password is incorrect.
 
For validating dates and amount ranges I use a javascript function called validate in some of my forms.
 
The form line contains onsubmit="return validate()"
 
Is there some way to load a value (such as the password that I need to check) into a variable that javascript can access so that I can write code in my validate function to check it against the value in a text input field?
 
Thank you very much.
 
Jeff