Jump to content
Larry Ullman's Book Forums
Sign in to follow this  
Magnus

Ajax Contact Form

Recommended Posts

Hi,

 

 

This book explains everything well and the examples are working fine, as does all Larrys books :-)

 

But now I have come to a full stop… I am not able to make the Ajax contact form work (page 456-460). Do I have to complete the php script or does the example (normally) work out of the box?

 

I have downloaded the latest update of the code from Larrys website. I have Wampserver on Windows, and have tested in Chrome and FireFox.

 

I have also tested Larrys debugging techniques, like eating some fruit and go for a walk, but nothing helps ;-)

 

Can anyone help me in the right direction?

 

Thanks!

 

Magnus

Share this post


Link to post
Share on other sites

The relevant code seems to start on page 451 as well as be reliant on a login form in chapter 2.

With that said, Larry mentions on page 451 that the full code can be downloaded from LarryUllman.com.

 

I just looked at the scripts you can download from this site, and it seems like you need to use login.html as well as ajax.js and login.js in the js folder. Also, for styles, you need the styles.css file in the css folder.

Does that help?

 

Larry, I have a question for you: Why is the following line of code the only one you use for creating an Ajax object for older versions of IE? Is this considered the standard, best way to make an Ajax object for all browsers that don't support the XMLHttpRequest object?

ajax = new ActiveXObject('MSXML2.XMLHTTP.3.0');

Share this post


Link to post
Share on other sites

Hi HartleySan!

 

I downloaded all the code from Larrys site when I started to read the book. When I ran into this problem I noticed that there was a new update as of 13th of June. I downloaded the new code and tried again, but it does not work.

 

/ Magnus

Share this post


Link to post
Share on other sites

Unfortunately, I'm at work (where time is limited and I have to use IE6 (so I can't easily debug issues)), but I tried to run the downloaded script, and I got an error as well. I'll look into it more thoroughly sometime soon at home and try to help out (if someone else doesn't answer your question in the meantime).

Share this post


Link to post
Share on other sites

Magnus, I just took another look at the files, and on my first scan, I missed the fact that you also need the login.php script in the resources folder. I copied the entire ch11 folder over to my XAMPP localhost folder and ran login.html, and it worked perfectly fine for me, without editing any files.

 

When you say that the files don't work, what exactly do you mean? Could you please explain the error?

Thanks.

Share this post


Link to post
Share on other sites

HartleySan,

 

It is the example with contact.html that I have problem with, all other examples works fine.

 

What I expect is that after entering name, email, some text in the comment field, and click on the submit button, the form should be replaced by the text "The message has been sent." from the script contact.php in the folder "resources". But the only thing that happens is that the form is reset.

 

/ Magnus

Share this post


Link to post
Share on other sites

Oh, I misunderstood. I thought the login form was the problem.

I'll look into the issue with the contact form tonight.

It sounds like either JavaScript is disabled or your PHP server isn't working properly, which is weird, since the other scripts work fine.

Hmmm... I'll look into it.

Share this post


Link to post
Share on other sites

I have found one error:

contact.html, line 51, id="Comments" should not have capital C => id="comments"

 

But when I corrected that then I get 2 new errors that I have not been able to sort out:

 

 

# Error 2

Syntax Error

file:///C:/wamp/www/larry/jsdd/ch11/resources/contact.php

Line: 4, column: 3

Source code:

?>The message has been sent.

 

# Error 3

document.getElementById("theForm").submit is not a function

file:///C:/wamp/www/larry/jsdd/ch11/js/contact.js

Line: 25

Share this post


Link to post
Share on other sites

I found the origin of Error 3: It is a conflict between the name id="submit" in the form, and the function submit() on line 25 in the script contact.js. If I rename the id in the form to id="btnSubmit" that error dissapears. I also have to change in the sylesheets; but I dont know if the renaming can have other consecueses.

 

But main error # Error 2 above is still very live and active ;-)

Share this post


Link to post
Share on other sites

Hehe! I just looked at the contact.php file under the path modern_javascript_scripts/ch11/resources, and it's pretty much empty. The script looks like the following:

 

 

<?php # Script 13.3 - login.php


?>The message has been sent.

 

And that's it. According to step 11 on page 460, you need to write the script yourself.

I imagine the reason Larry didn't write the contact.php script is because 1) it's basically performing the same validation as login.php, etc., and 2) you need to use the PHP mail function, which is very dependent on a number of things, and will not work by default in XAMPP, etc.

 

Anyway, that hopefully answers your question and solves the mystery.

Share this post


Link to post
Share on other sites
Larry, I have a question for you: Why is the following line of code the only one you use for creating an Ajax object for older versions of IE? Is this considered the standard, best way to make an Ajax object for all browsers that don't support the XMLHttpRequest object?

ajax = new ActiveXObject('MSXML2.XMLHTTP.3.0');

 

Well, you could change that however you wanted, but you'd want it to allow for the oldest possible browser you might support. You could also use a try...catch to work your way done, if you want to make it more complicated.

 

# Error 2

Syntax Error

file:///C:/wamp/www/larry/jsdd/ch11/resources/contact.php

Line: 4, column: 3

Source code:

?>The message has been sent.

 

Are you running the HTML page through a URL? There is no error in that PHP script and it's problematic that your message starts with "file://". Also, where (i.e., in what application) are you seeing that message?

 

I found the origin of Error 3: It is a conflict between the name id="submit" in the form, and the function submit() on line 25 in the script contact.js. If I rename the id in the form to id="btnSubmit" that error dissapears. I also have to change in the sylesheets; but I dont know if the renaming can have other consecueses.

 

What browser are you using? That doesn't sound plausible to me that the id value in the HTML would conflict with a submit() function. Also, in that line of code, it needs to be onsubmit, not submit.

Share this post


Link to post
Share on other sites

Hi Larry,

 

Thanks for your answer. I don´t know what happened, but now it is working. I have run the HTML page with the help of Wampserver, like all the other exercises. Yesterday and this morning it didn´t work, but now it is... I am normally using FireFox, and the error messages comes from the little red X to the right in Web Developer Toolbar. But I am also using Chrome, and sometimes Safari...

 

But the conflict with id="submit" remains. I changed the status code check in contact.js to force an error, and then I get this error message:

 

"document.getElementById("theForm").submit is not a function"

 

but if I change the id name in the form to id="btnSubmit" it works fine.

 

/ Magnus

Share this post


Link to post
Share on other sites

You're quite welcome. Glad it's working now. I suspect you weren't running the HTML form through a URL. That's quite a common mistake.

 

As for "document.getElementById("theForm").submit is not a function", you have the wrong code. It should be

document.getElementById('theForm').onsubmit... as I wrote previously.

 

Has nothing to do with the id of the submit button, I expect.

Share this post


Link to post
Share on other sites

Hi Larry,

 

Of course you are right, I was so faithful to your original code that I didn’t make the change to “onsubmit”. Now it is all working :-)

 

Then I have two contributions to your collection of errata for chapter 11.

1. content.html line 18 id="Comments" should be id="comments" (without capital C) otherwise line 48 in script contact.js does not work.

2. As you pointed out; line 25 in contact.js should be: document.getElementById('theForm').onsubmit();

 

Thanks!

 

Magnus

 

(This is the 4th of your books that I am reading, and I am eager to get my hands on your next: “PHP Advanced and Object-Oriented Programming”!!!)

Share this post


Link to post
Share on other sites

Hello Magnus,

 

Thanks for the nice words and for the interest in my books. It is appreciated. I misspoke earlier and was incorrect (looking at the wrong line number). Line 25 should be document.getElementById('theForm').submit() because that code formally submits the form if the Ajax request fails. The submit button can forgo the id value if that's causing problems. Sorry about the confusion!

Share this post


Link to post
Share on other sites

From Larry: I suspect you weren't running the HTML form through a URL. That's quite a common mistake.

 

I suggest more emphasis of this in the next printing of the text.

 

Sample file presentation in the text suggest that wherever the files were placed and working for preceding chapters will work in Chapter 11.

 

In other words, it should be noted that up until Chapter 11 the "file://" construct works, but after installing WAMP, LAMP, etc., the AJAX files must be moved to the Apache working directory and the "file://" looking open() arguments in the example files modified to the appropriate URL for the new Apache working directory.

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.
Note: Your post will require moderator approval before it will be visible.

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...
Sign in to follow this  

×
×
  • Create New...