Forum Moderators: open
I've been using the script below as a entrance gate to a client only area (a temporary alternative to PHP). It's OK but if a client does not enter the correct password a 404 is returned.
Script:
Javascript
<script language="JavaScript" type="text/JavaScript">
function loadpage(form){
window.location.replace(form.pswd.value + ".html");
}
</script>
HTML
<form onSubmit="loadpage(this);return false">
Enter Password
<input type="password" name="pswd" size="20">
<input name="button" type="submit" value="Proceed">
</form>
Is there an addition I can make to the JS so if the password value is incorrect a custom user error page is returned? (not our 404)
Ta, Limbo
Come to think of it, you could to use the hottest thing in Javascript world: XMLHttpRequest. It allowes you to use javascript to send requests to the server without leaving the current page. The status codes returned by the server can be read in the javascript.
<script type="text/javascript">
<!--
var req;
function loadXMLDoc(url) {
url = 'http://www.example.com/' + url + '.html';
// branch for native XMLHttpRequest object
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
req.onreadystatechange = processReqChange;
req.open("GET", url, true);
req.send(null);
// branch for IE/Windows ActiveX version
} else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
if (req) {
req.onreadystatechange = processReqChange;
req.open("GET", url, true);
req.send();
}
// branch for less advanced browsers
} else {
window.location.replace(forms[0].pswd.value + ".html");
}
}
function processReqChange() {
// only if req shows "loaded"
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200) {
alert('OK, found the page!');
// ...processing statements go here...
} else {
// alert("There was a problem retrieving the XML data:\n" + req.statusText);
alert('Please enter the correct password.');
}
}
}
// -->
</script>
<form onSubmit="loadXMLDoc(this.pswd.value);return false">
Enter Password
<input type="password" name="pswd" size="20">
<input name="button" type="submit" value="Proceed">
</form>
most of the code comes from Apple's page on XMLHttpRequest [developer.apple.com]
Thanks for the Script. As you say using a customised 404 for that directory would be a good solution, but the host we use for this site does not allow .htaccess (we are moving!)
I tried the XMLHttpRequest Javascript you suggested but had problems getting the page to load. I received your 'OK, found the page...' message but clicking OK did load the page? So kind of defeated the purpose. I have looked as hard as I can for a solution but can't get my head round it. Any suggestions?
Ta, Limbo.
1. user enters incorrect password
==> an alert box saying "wrong; enter the correct password, you fool". No new page needs te be loaded.
2. user enters correct password
==> redirect to the protected page. No alert box needed; I put it in the script just for testing purposes. Remove the line if you don't want it.
Replace this:
// only if "OK"
if (req.status == 200) {
alert('OK, found the page!');
// ...processing statements go here...
} else {
// alert("There was a problem retrieving the XML data:\n" + req.statusText);
alert('Please enter the correct password.');
}
with this:
if (req.status!= 200) {
alert('Please enter the correct password.');
}
After your coaching, this is what I have (page stripped):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>Member password</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
var req;
function loadXMLDoc(url) {
url = 'http://www.limbos-site.tld/' + url + '.html';
// branch for native XMLHttpRequest object
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
req.onreadystatechange = processReqChange;
req.open("GET", url, true);
req.send(null);
// branch for IE/Windows ActiveX version
} else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
if (req) {
req.onreadystatechange = processReqChange;
req.open("GET", url, true);
req.send();
}
// branch for less advanced browsers
} else {
window.location.replace(forms[0].pswd.value + ".html");
}
}
function processReqChange() {
// only if req shows "loaded"
if (req.readyState == 4) {
if (req.status!= 200) {
alert('Please enter the correct password.');
}
}
}
}
</script>
</head>
<body><form onSubmit="loadXMLDoc(this.pswd.value);return false">
Enter Password
<input type="password" name="pswd" size="20">
<input name="button" type="submit" value="Proceed">
</form></body></html>
Have I missed something obvious? Is it my doctype? When I removed the lines you describe nothing functions? I must be missing the blatant...
function processReqChange() {
// only if req shows "loaded"
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200) {
window.location.replace(document.forms[0].pswd.value + ".html");
} else {
alert('Please enter the correct password.');
}
}
}
Note that the script will only work within your domain, i.e. it can't detect whether example.com/example.html exists.
Many thanks for sticking with me on this one. The script now works perfectly. Moy Bien :)
Ta, Limbo
