Jump to content
Larry Ullman's Book Forums
rafaec

Chapter 11 Ajax Page 456 Not Working?

Recommended Posts

Hi everyone, me again...

 

I have broken my head over this one...no idea why it doesn't work.

 

HTTP:

 

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<form action="login.php" method="post" id="loginForm" novalidate>
<fieldset>
<legend> Login </legend>
<div><label for="email"> Email adress </label>
<input type="email" name="email" id="email" required /></div>
<div><label for="password"> Password </label>
<input type="password" name="password" id="password" required /> </div>
<div><label for="submit"> Submit </label>
<input type="submit" name="Login →" id="submit"></div>
</fieldset>
</form>
<script src="resources/login.js">
</script>
<script src="ajax.js">
</script>
</body>
</html>

 

LOGIN.JS

// Script 11.x - login.js #2
// Function called when the form is submitted.
// Function validates the form data and returns a Boolean value.
function validateForm() {
   'use strict';

   // Get references to the form elements:
   var email = document.getElementById('email');
   var password = document.getElementById('password');
   // Validate!
if ( (email.value.length > 0) && (password.value.length > 0) ) {
// Perform an Ajax request:
var ajax = getXMLHttpRequestObject();
ajax.onreadystatechange = function() {
console.log (ajax.readyState);
if (ajax.readyState == 4) {
// Check the status code:
if ( (ajax.status >= 200 && ajax.status < 300)
|| (ajax.status == 304) ) {
console.log(ajax.status);
console.log(ajax.responseText);
if (ajax.responseText == 'VALID') {
console.log('works');
alert('You are now logged in!');
} else if (ajax.responseText == 'INVALID') {
console.log('failed');
alert('The submitted values do not match those on file!');
}
else {
alert ('Unknown problem')
}

} else {
document.getElementById('theForm').submit();
}
}
};
ajax.open('POST', 'resources/login.php', true);
ajax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
var data = 'email=' + encodeURIComponent(email.value) + '&password=' + encodeURIComponent(password.value);
ajax.send(data);

    return false;
   } else {
    alert('Please complete the form!');
    return false;
   }

} // End of validateForm() function.
// Function called when the window has been loaded.
// Function needs to add an event listener to the form.
function init() {
   'use strict';

   // Confirm that document.getElementById() can be used:
   if (document && document.getElementById) {
    var loginForm = document.getElementById('loginForm');
    loginForm.onsubmit = validateForm;
   }
} // End of init() function.
// Assign an event listener to the window's load event:
window.onload = init;

 

PHP is the same as the book.

 

 

The weird thing is that when I put the valid email adresses for some reason Ajax.responseText returns 'VALID", however, it still shows the alert 'Unknown problem'. I made a console.log so I am sure it returns 'VALID' and also to for ajax status.

 

Everything seems to be ok, however, I can't make it to display 'You are now logged in".

 

Anyone can see where the error is?

 

Thanks!

Share this post


Link to post
Share on other sites

New info:

 

When establishing a break point after

alert('You are now logged in!');

ajax.responseText shows value of "VALID\r\n\r\n ". I really have no idea where is it getting the /r/n values from.

 

PHP is basically

 

if (...$_POST[...) // validate and set email and password to me@example.com and testpass

{

echo 'VALID';

}

else

{

echo 'INVALID';

}

 

no new lines no enters...

 

???

Share this post


Link to post
Share on other sites

That is unusual. Probably not the problem, but the following line seems to be problematic:

 

document.getElementById('theForm').submit();

 

There is no element with the ID "theForm" on your page.

Is "works" output to the console log?

Share this post


Link to post
Share on other sites

Hi HartleySan,

 

Thanks for your reply. I changed that before with no success. I actually tried using the login.js from Larry's website directly to rule out any typos...

 

The console does not output "works" or "failed". Browser just alerts "Unknown problem".

 

??

Share this post


Link to post
Share on other sites

Do you get a line number with the "Unknown problem"?

It sounds like there is something going on that's not related to the script.

 

Are you running the PHP script from a (virtual) server?

Trying commenting out a big chunk of your code, and then slowly uncomment it, one line at a time, until you find the exact line causing the problem.

After you do that, please report back.

Thanks.

Share this post


Link to post
Share on other sites

Hi,

 

The "unknown problem" alert is set by me to know there was a problem with responseText:

 

if (ajax.responseText == 'VALID') {
console.log('works');
alert('You are now logged in!');
} else if (ajax.responseText == 'INVALID') {
console.log('failed');
alert('The submitted values do not match those on file!');
}
else {
alert ('Unknown problem')
}

 

I did comment each chunk of code, verified all the commands, even copy pasted from Larry's. I am now absolutely positive the problem is in this validation. For some reason, PHP returns 'VALID' but the var is set to 'VALID\r\n\r\n '.

But weird enough, the NET tab in Firebug, shows on HTTP recieved the value VALID (no spaces or breaks). So I am sure, that the script is reading the right information.

 

I am using XAMPP. Testing everything on localhost. Could that be the problem?

Share this post


Link to post
Share on other sites

I've never experienced such a thing, and I use XAMPP all the time for Ajax, etc.

I really don't know what to tell you, but it seems like your environment (or perhaps your text editor) is padding the string you return from the PHP script for one reason or another.

 

Honestly, I can't say anything beyond that, as I've never experienced such a problem.

Perhaps try using a different text editor as well as switch up any other non-XAMPP software you're using to see if that resolves the problem.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...