Ajax Forms with jQuery

Instead of tying your function to the onclick event of the submit button wouldn’t it be better to attach it to the onsubmit event of the form?

I was excited to see such a good example of jQuery’s ajax functions online. Well done.

The only reason I can see having the function fire onsubmit is in the case of the user hitting enter to submit the form.

Is there any chance we can see the PHP script as well? I’m having a hard time wrapping myself around how this is listening for a successful execution by PHP. To make sure everything on the server executed as planned.  Or is this only client-side validation?

I can’t download the php files at the bottom. I’ve tried both on a PC and Mac with Firefox. Could you please fix this?

I have to tell you that this bit of code and explanation has caused a paradigm shift in my AJAX knowledge. I really appreciate you putting this post up and sharing your code. I have downloaded, edited and installed this to my current AJAX site project and it works really well. (I’ve already been praised for my ingenuity too, sorry, I didn’t pass the credit on!... :-P)

a big thumbs up!

I’m not an expert at Ajax and jQuery, but I’ve dabbled in them enough to think that I know what I’m doing.

However, I can’t seem to even be able to replicate this. I can copy all the files and even the pages you use on the internet and still not get this to work.

So what am I forgetting to do that isn’t shown on the website? are the form pages php or html? am I supposed to leave the s on phps? It started to work a little better when I kept the s on.

I’m just a wee bit confused, followed the instructions and made some custom fields in the beginning, but that didn’t work out, so i did a dumber down version, still didn’t work. Now that I can’t even get your version to work I know I’m doing something wrong :P

Thanks,
Jon

Thank you, Trevor, this has been very useful indeed. I am trying out a simplified form of this on http://new.taize.fr/en

I have one question, and one lingering concern:

In submitting the post request why use:  “function(data){” instead of just “function(){”—which in my case anyway, seems to work just as well (or does it?)?

Would it not be better to get an error message if, for some reason, the mailing fails (for example the php file is not found)? As far as I can understand from the jQuery doc this involves using $.ajax instead of $.post. And that looks complicated ...

Trevor, This all works.  jQuery is good, isn’t it? Clearly worth trying to learn properly! Thanks so much for the encouragement to do this.

Paolo-
So you are saying the PHP file doesn’t exist on your server? I mean the simple and obvious answer is to move it into the correct location. I may not be understanding what you are saying is the problem. Do you have a link that we can see?

Paolo-
Hmm, I see what you are saying now. You could just use the $.ajax function and check the error that is returned (if there is one). It is more complex, and thus I’m not sure if it’s worth the hassle. Just don’t delete the files that you need to successfully complete the request!

This is what I’m looking for! thanks trevor :)

Johan-
I actually did upload the final PHP code. If you look at the end of the post, you can download them there.

@Fabián-
The javascript does handle the client side. But, if a user does not have javascript enabled, then the PHP script will handle the validation.

@John-
Glad that the example helped you. Yes, I have used the jQuery form plugin before. I would say the one advantage to using it is that there are a lot of functions already built into that plugin. If you don’t want to get your hands dirty writing your own stuff, sure, I would recommend using it.

@Martin-
Do you mean that there is a conflict between jQuery and Prototype? The jQuery documentation has an item about Using jQuery with Other Libraries. Hope that helps!

I could not find “jqueryAjaxForm”

This is an excellent intro to jQuery. Kudos!

-K

@Darrious-
What do you mean you are having trouble getting them working? Do you mean on the JavaScript side? Are you assigning values to the radio buttons?

@Darrious-
I think that there are surely a bunch of different ways to achieve what you are trying to do. I made an example page showing this.

When you hit submit, it will tell you which radio button is selected.  Basically, I am just checking if the checked attribute is true for each radio button.

Again, there are a bunch of different ways to achieve this.

Hi,

I just came across your Ajax contact form tutorial. I’m having a little trouble. What is the “‘../../includes/analytics.php’? Where is this particular file? Every time I try to send a message I get on the index page this “Warning: main(../../includes/analytics.php): failed to open stream: No such file or directory in /home/content/k/h/a/khariwilliams/html/beego/indexer.php on line 28

Warning: main(../../includes/analytics.php): failed to open stream: No such file or directory in /home/content/k/h/a/khariwilliams/html/beego/indexer.php on line 28

Warning: main(): Failed opening ‘../../includes/analytics.php’ for inclusion (include_path=’.:/usr/local/lib/php’) in /home/content/k/h/a/khariwilliams/html/beego/indexer.php on line 28”

Can u please help me! Or send e-mail the exact codes the way created your mail form.

Trevor,

Can you help me out a bit. I am looking for a way to use a for loop in a similar situation you demo’d
here:

But with the addition of more sets of radio buttons. I want to be able to have a function loop through the radio button sets and with a counting var keep track of how many are “checked”. Once the loop has gone through the length of the array of li’s or ? Another function then does something based on the counting var.

I can’t seem to get the for loop to work and I am not sure how to get around identifying each radio as an id?

Does this make sense?

If not email me and I will send you my code block.

Thanks for any help in advance if you have time I’d appreciate the learning exp:)

@Benjamin-

You would do it the same way you would any other input field.

Hey there. Thanks so much for supplying this code for everyone to use. I am somewhat of a newbie to forms and suck, and was wondering if you could help me out. I have this code on my contact page here:
http://dev.creativehinge.com/contact.php

I also have the four files you supplied here:
http://dev.creativehinge.com/form

How do i get this started? I hit submit and it looks for the “/play/jqueryAjaxForm/” directory. What do I place in this form action acrea? I want to achive the following:

1.Remove the option of entering an email address. All emails should go to to .(JavaScript must be enabled to view this email address)

Thanks for any help you can provide.

Hey, thanks so much for that line of code. I’ve made the two changes, but i’m still unsure of a couple of things. I’m embedding the form in my contact page here:
http://dev.creativehinge.com/contact.php

So technically i wouldn’t even need the index.php page in the forms/ directory. Can i remove this file from the folder?

Then, on my contact page, Change the form action to point to itself. So change it from /play/jqueryAjaxForm/ to /form/?

Also, is the “/” necessary before the folder “form”?

Thanks SOO much…

Hey there,

It doesn’t seem to be sending the emails when i click submit, nor does it pull in the thanks.php info. I know it’s something really silly i’m not doing on my part….could you take a look? I hate to be a pain.

Here’s the link again:
http://dev.creativehinge.com/contact.php
the other files are in this directory:
http://dev.creativehinge.com/form/

Again, Thanks so much.

Chris

no i never removed code from verify, just the frontward facing entry box. should i delete that whole first chunk:

Thanks

I’ve never gotten forum/blog advice before, so i appreciate all the quick replies! Just tried to place a chunk of code in there, and it seemed to eat it up. Whats the trick you use to get code up here?

Also, what can i send you to help you get a better idea?

thanks

I think my main issue is with my verify code:

(this is wrapped in a php tag)

Chris-
Yep, that should still work. I would remove this line since you removed the emailTo field:

Chris-
I’m not sure what to suggest at this point. Since you get all the way to the thank you message, there is no error in the code. Does your server have a mail server specified? Is it going to your spam folder in gmail? Are you sure you have your email address correct?

I’ve had some poking out on this thing aswell so maybe i can help a bunch of you guys out by sharing my packed version of the form.

It’s has got the “Email To” field removed, because all mail in my contact form should go to me.

The only setup it needs is to replace the dummy adres with your own in “sendemail.php” at the bottom.

And optionaly: if you change the directory name (by default “contactForm” you should change the form action parameter located in index.php accordingly.

Thkx Trevor for making this form, saved me a lot of time!

The file: www.kerwin-groot.nl/upload/contactForm.zip

@ Kerwin Groot

Hi Kerwin,

Using your ziped example emails don’t seem to get sent when JavaScript is disabled, can you confirm that you are defiantly receiving emails from none JavaScript clients?

Thanks,

Dave

@Federico-
Sure, you could make the contact form more secure, but if you are just using it to send an email and not interacting with a database, it may be a lot of extra effort for not much benefit.

Regarding the code snippet you included, you just need to have an element with the id of message, and the text will be changed depending upon the condition. Does that answer your question?

@Federico-
In the PHP file you are calling via the POST request, you can just echo something out. Whatever you echo out, will be available in the data variable:

Hi Trevor,

Thanks for this great tutorial. A question: I would like to add a “Your name” field, si I would have “Your name”+“Your email address”+“Subject” and the message.

I tried to do this, no problems to add this additionnal field, to verify it etc… but in the mail I don’t receive the name of the sender…
Is it possible ? Please could you help me ?
(Sorry for the bad english)

How can you use this to work with wordpress? I have the contact working it sends the email. I have contact.php embedded into a div on my main page. The problem is it reloads the whole page and the posts do not show.

Any suggestions??

Thank you Trevor ! Another question: I’m french and unfortunately we have some accents in our alphabet…
When I receive a mail including accented letters, I have some strange characters like “é” instead of “é” for example.
Is there a coding solution to avoid this problem ?

I’ve found a solution Trevor. Thank you.
In sendemail.php I’ve changed:

It’s not very “artistic”, but it works ! ;-)

Never mind my previous post, I attached jquery.js and your submitform.js files and it works like a charm.

From what I understand your script only does form validation, but not form submission using Ajax, am I correct?

Thanks Trevor I noticed it does work, for some reason when I can get your script to work on a sandbox site but on the one I actually want it to work, when the sendemail.php script is called by $.post I get a 403 forbidden error, but the server validation does work, and it does send the email, do you know how I can get past this?

Hi Trevor, yes the URL is correct and it does work without Javascript, I am using a CMS could that be the problem? but I load my form via an include and it loads it fine and as I said it gets sent without JS.

@Eduardo-
Nice, I was going to suggest something was up with the config. Glad you got it working.

Beware of email injection with php’s mail() function, google it.

Hi Trevor,

Thanks for putting this together, it’s helped me out loads. I love JQuery, but had never used it in conjunction with AJAX.

I made a small tweak to the PHP, to help with validation:

This passes it back to the JS as the ‘data’ variable, then I could give a bit more feedback:

@Eduardo-
Actually, this is a similar problem that Darrious had.

Check out the sample page or see my response to Darrious.

Thanks for posting this, it’s a great starting point for a jQuery newbie. I’m a bit confused what purpose the thanks.php file has though because the “Success. Your email was sent” text appears to be set from the javascript rather than the contents of this file.

Trevor,
Thanks for the article, this solved a problem that had been bugging me for weeks.  Now that I’m using your method, I had a weird thing happen.

I entered an incomplete email address and submitted.  This caused the form to submit as though js wasn’t enabled.  Now the form won’t submit via ajax.  I don’t know enough about either to have any idea where my problem might be.

Any help or guidance you could give would be greatly appreciated!

Asking for help is always the silver bullet for me.  All is working now.

Thanks for being willing to help me out!

Trevor, I love the web as much as you do. See, I was looking for a way to use jquery and php to send mail and I’ve found your post. Thanks!

I am wondering if you (or anyone) would have the:
else if (!eregi -in order to validate a US Phone Number. Great scripts. Thanks,

@trevor
Thanks for your help. I am not a programmer, so my search was for phone validation, and non of them really seemed to fit the format. The website you recommended was great! Thank you,

@Marc Falk-
What kind of problems are you having? Do you have a link you can show us?

@Marc Falk-
Hmm, nothing immediately sticks out to me. It looks like your html that you are inserting could use a little cleaning up. It looks like you have some extra tags in there.

Try taking the code that you are inserting via JavaScript, and just putting it on the page where it was being inserted. Then see if it displays in IE.

I don’t think it is a JavaScript problem.

Thanks a million for the script. 

Was wondering how you would pass checkbox values through submitform.js to sendemail.php. 

For example I am using a form array.

Hi Trevor,

Thanks for this code, much appreciated.

Just a quick question - I’ve got everything working on the PHP side, just trying to get the last part of the puzzle to work - Javascript.

All the error checking is working ok, so it’s the post path that I think is the issue (I’ve always had issues with paths, never quite got the concept as the way it works seems to differ between PHP, and Javascript).

Could you take a look at this code and let me know if there’s something wrong with it?

http://senduit.com/70e8e9

Thanks for any pointers

Thanks, your post was very useful!

Oh, and when I click submit, everything works - including the JQuery slide up and success message, but no email is sent. When disabling JavaScript, the form validates and sends as it should, so I must be making a mistake with the end $post step I think.

Cheers

@osu-
Do you have FireBug? Do you get a JavaScript error? Can you see that the POST request completed?

Is this really where the files exist?
/subfolder/nominate/02-nominate-send.php

@JK-
True, but the form works even when you click enter as well. Which I why I was wondering what the difference is. I guess jQuery is smart enough to add in that functionality as well.

This is a nice example, but you’re running a php script that sends emails that is openly accessible this way right?  If you don’t protect the sendemail.php script on your server and some spammer locates it, your server is going to become a spam-mailing slave. 

The best way is to implement something that verifies the user to be a person (like those annoying “type what you see in the box to continue” prompts).  Also you’re not calling verify.php from the sendemail.php script, any particular reason?  If the client isn’t verifying the content submitted then neither is the server (this would happen if the javascript was changed on the client, a possible circumstance).  This shouldn’t be a problem if you just pointed your javascript code to use index.php instead, it would work the same as if javascript wasn’t working.

When I used prototype before, I would just use the $(form).request(...) which made a regular form submit as an ajax request (this could just be hooked to the form.submit() event.  There’s probably a jQuery equivalent, but I haven’t needed to look it up yet.

Just my 2 cents.

Hi Trevor,

I’m almost 100% certain that the path is my issue. How should I be putting in the path in the $post part? i.e. should I put:

or maybe

The response I get from Firebug in the console with the latter option is this:

...to be honest, I have no idea what that means! Uncle Google didn’t help either…does it mean anything to you?

How would I replace the entire form with the ajax loader image instead of replacing just the submit button?

Thanks very much.  is it possible for the ajax loader to only display while the form is sending then display the Success message?

Thanks

How would I remove the image?  Just hide ‘fast’ id again?

Hey Trevor, great script.

I’ve been working on integrating it into a JQuery-powered drawer I got elsewhere, but having a problem.

Take a look (click the “Contact” tab to see where your form is):
enews.org/v6/portfolio/web/chow-trevordavis.php

The problem: When I put the form anywhere else on the page, it works fine (JS error checking works, form sends email), but when I put it into the drawer, it stops working.

I think there’s a conflict with the JS for the drawer action (“drw-scripts.js”), but I’m pretty lame at JS, so I’m at a loss.

Note that I’ve modified your files here and there.

Help would be magnificent.

Sorry, I’m just not very good at JavaScript.

So you’re saying the drawer script is copying everything in div #contact and moving it into div #drw. I see that, but why does that break the form?

Can you recommend a way I can still do what I’m trying to accomplish?

can’t you just use $(form).serialize() ?

@Andrew-
What are you struggling with? What is happening? I already gave some instruction;  I’m not sure what I else I can do.

Without seeing exactly what you are trying to do, me just suggesting things doesn’t seem to be helping.

Impressive !! Just what I was searching for.

@Skoua-
This has been discussed in previous comments.

@Paco-
Excellent, glad you have found it useful.

Haha well, I don’t drink coffee, but you can feel free to donate to me if you really want to.

@TG-
Yes, you need PHP to execute the PHP files. The form could easily be customized to use another programming language though. Any text editor should be fine for editing the PHP files. I don’t require any license to use the code.

What kind of questions are you having with editing the files? Feel free to ask or read previous comments to see if they answer your questions.

@TG-
The CSS file that I am referencing is this one. You could easily switch it out for your own though.

You have to have a server to execute PHP files. My guess is that Webuilder is just previewing the files locally so the PHP code is not actually being executed.

You want to change sendEmail.php so that the email gets to you.

I would recommend reading the comments above as they may answer some questions about changing the form so that the emails go to you.

I am looking to add a contact form in a wordpress template I am designing and do not want to use a plugin.  Do you have any direction on how to use your form in a wordpress page?

Hi Trevor

First of all thanks for the tut and the php files.

This is just the one script I was trying to create, but with no sucess (newbie girl) but you just made my life a lot easy.

Just one thing, but something really important to me: How can I redirect a user to a custom thank you page (I need to track conversions) instead of showing a thank you message like the one you have (‘SuccessYour email was sent.’)?

This is quite important to me, because if I can´t implement this redirect, I will not be able to use your superb code! :-( As I said Convension issues you know…

Kind Regards

Maria

Sorry for double/triple posting, my bad.

I forgot to mention that my question has to do with the client side validation of course and the need to redirect a user after the form is properly validated by javascript.

Sorry if my question is ridiculous, but I had to ask it anyway, I am a brave woman (or just dumb) !

Any help at all is appreciated ;-)

Kind regards

Maria

Thanks Trevor I see what you mean and unfortunately It makes sense. Removing ajax would make the form loose half of it’s glamour ;)

Let me try to make some changes and I’ll get back to you. I will be glad to keep you updated about this, afterall i’ll be working YOUR code.

Thanks again Trevor

Kind Regards

Maria

@Shahar-
Do you have a link to the page?

@Shahar-
The problem is probably because you have an ID included on on a page multiple times.

The submit button of both of your forms has an ID of submit. I would change it to a class and then change it in the JS as well.

@Maria Mingosmo
Maria, I had a similar request resently and used google analytics to solve the problem. I have three different forms on the site and wanted to track not only the pages, but also the when the form was sent. You will need a google analytics account and then set up custom triggers, then in the submitform.js add:

// trigger Google Analytics goal for this submission
  pageTracker._trackPageview(”/thankyou_contact”);
  }

right before the “return false” at the end of the script.  the “thankyou_contact” can be anything you want, but basically you are telling google that you want to know when the form has been submitted. Works great. Hope this helps

@Shahar
Trevor gave me a great website before for Reg Expressions:
http://regexlib.com/DisplayPatterns.aspx?cattabindex=1&categoryId=2

It should be able to help you out.

@Shahar-
emailTo: emailToVal

That means that the POST variable that the server side script is looking for is named emailTo, and emailToVal is the value. You can actually just use the jQuery serialize function to get all elements of the form, and then pass them to the server side script.

You can see this function in action on my most recent article: [url=“http://trevordavis.net/blog/tutorial/wordpress-jquery-contact-form-without-a-plugin/” rel=“nofollow”]
WordPress & jQuery Contact Form without a Plugin[/url].

@Willabee

I appreciate your candidness, would you mind posting an example of your proposition?

What makes Trevors example so valuable is the thorough description of whats taking place along with actual code which ultimately leads to a functional example that we can put in our pocket and take home to further experiment with.

If I’m learning bad practices it would be great to see where I could improve and how.

Cheers.

@Paco - This reason I made my comment is that I feared, as your comment has confirmed, that folk will take this tutorial, as is, and put it into practise, without being aware of the consequences.

Trevor was a brave man to post his server-side scripts, which revealed flaws in the application that his students should be aware of.

I cannot respond with a tutorial and examples but let’s analyse what was wrong with the app’ and how we should approach writing web 2.0 app’s.

Step One - is to create a fully functional app’, where the user can post data to the server. The server will carry out sanitation and validation to make sure the data is good before continuing with its process.

Trever’s app passed this test.

Step Two - is to give the client some nice presentation by adding CSS (from an external file so that it will cache and be re-usable). Switch off CSS and the app still works.

Trever’s app passed this test.

Step Three - is to take over from the default user agent action and do some nice enhancements, such as dynamic DOM manipulation and client-side validation, to make the app’ more usable and avoid having to keep posting data to the server, the server checking the data is bad and having to return the form with all its content and any error messages (Every mistake followed by a submit was costing a round-trip to the server). Client-side validation at least ensures the data sent is good and less likely to be rejected). Switch off JavaScript and the default action (step one) still works.

This is where Trever’s app broke down, although most of what he has shown us is good.

To fix the app, remember, the default action when you submit a form (or press enter whilst focused on the form) is to post the form.

Trevor, quite correctly, takes over from the default action by adding an onsubmit event handler to the form. Now, instead of posting, control jumps to the event handler. As long as the event handler returns false, the for will not submit.

Trevor’s event handler always returns false.

He validates all the form fields, which is good, but then decides to post the form data by passing it to sendmail.php via an XHR object. This is the unnecessary code and bad practise I was talking about.

All that is needed after each field had passed its validation check is to return true from the onsubmit event handler. Now the form will carry out its default action, post the data, server checks (again because someone might have tampered with your data) the data is still good, processes and sends your email.

Luckily, Trevor did have some protection in sendmail.php but there was no validation. He could have duplicated this effort but that’s bad.

His protection was using $_POST[‘fieldname’]; in sendmail.php. Imagine if one of his students decided to use $_GET[‘fieldname’]; or even worse, $_REQUEST[‘fieldname’];, this would make it very easy to write a spammer that would loop through a database of target emails and call http://yourdomain/sendmail.php?field1=’$email[$i]&.....

You have just become a relay for spam mail. Because of $_POST[‘fieldname’];, the spammer would have to do a little more work but no problems.

By sending true to the onsubmit handler, we would at least validate the data (without any duplication of effort). Now we can add extra security, such as holding a session variable that we can use to see if the same user is continuously submittng emails so we can put a block on their email and IP address. The focus for security is in one place.

To my mind, we should not be trying to create an email client without careful consideration of all the threats and functionality that would be required.

It would be much more practical (and real world common requirement) to hard code the recipients email addresses at the server. Thus Trevor could have demonstrated all the nice jQuery client-side validation to post sales information and email it to your sales team.

I hope that is enough information to fix the application.

Trevor’s Application is good and passes all the tests except returning true after client-side validation success.

@Willabee-
Maybe I’m missing your point here, but basically you are removing the AJAX portion of the form. Right?

If you take a look at the date of the post, it’s about a year and a half old, so yes, I have learned some things over time and would have done some things a little differently.

@Willabee-
Oh the AJAX functionality is definitely not required for this form to work, but the whole point of the tutorial was to show how to use jQuery to create an AJAX form.

I have since created a similar article: WordPress & jQuery Contact Form without a Plugin

Thanks for the post Willabee. I’ll be checking out that link you posted.

Thanks again Trevor. Have you turned to the darkside and started drinking coffee yet? Muhaha

@vince-
Someone could be directly browsing to the php file that sends the email.

The easiest solution would be to check to make sure the required values are filled in before sending the email. So, change this:

To this:

Obviously you will need to replace etc, etc with the rest of your required fields.

@Trevor,

I made the changes you suggested but I still periodically receive empty emails. I receive emails with the appropriate subject line letting me know which form was submitted but the meassage fields are empty. It seems to be happening more often (I’m thinking because we are getting a little more traffic).

You mentioned in your comments that someon could be browsing to the php file directly…I was wondering how that happens.

Anyway, I’m at a loss. If someone is using an older browser or one that doesn’t handle php file well, could that cause any issues?

@Trevor,
I’m finding your tutorial very useful! thanks a lot!. The only trouble I’m having is a very simple one: How would you code and validate a simple radio set, checkbox set and select combo box. The issue is I can’t figure out how to adquiere the superglobal GET for those items since i can’t create a temporary “value”. the value is already set.

Perhaps it is too of a newbie question, but I’m interested in coding and validating only with PHP a very accesible form like yours but with these additional entities.

Hope anyone can help!

That was very helpful!! If only you could point me in the right direction about validating select boxes with PHP, cause neither of the example forms have any of this kind!

Thanks for every answer!

Hi Trevor, brilliant tutorial and comments. Taking this one or two steps further, I have a webpage with multiple form caluclus and submits, on every submit the other form resets, which I don’t want. Upon searching the net I found that AJAX will do this for me but don’t know how…

There are 4 other divs with similar codes (different calculations). No error validation is needed.
Been trying to find the answer for 5 days now and I’m pulling my hair out!!!

Thanks for getting back…Yes I want to submit separately and NO refresh to keep the users input and results on each form…
Here’s the page where it all is… 
www.dorsetwebdesigns.co.uk/bg/test.php

Many Many Thanks

Thanks a lot for this explanation. I don’t know what newbies webdevelopers like me would do without willing teachers like you.

@Chris-
Try this:

For some reason, the contact form won’t send the message to the specified email in sendemail.php
It does everything ie. the required fields, the success message.
It just won’t sent the message to the email

@Trevor-
Ah nevermind I forgot to add the javascript. But I was also wondering is there a way for the ‘Name’ field to show up in the email so that I know who it is from?
I know that there is a field there in the form, but it doesn’t actually send the name along with the email

@Wendy-
Basically, you will need to add a new field to the form. So let’s say telephone

Then, add in the validation:

Next, pass in the new telephone value, or serialize the form fields:

Then, you will want to add in the validation in the verify.php as well, and in sendMail.php is where you would adjust the email text:

I have also written a couple of other tutorials about forms/ajax/jQuery that may be helpful:

<ul>
<li>WordPress & jQuery Contact Form without a Plugin</li>
<li>Flexible and Semantic Forms with a Little jQuery</li>
</ul>

@webguy262-
Did you figure out what was going on? It seems to work for me. When I make selections in all of the select elements, then click on Get my part number, it populates the Your Part Number is input field.

@webguy262-
Right off the bat, it looks like there is an error in your JS:

Error: $ is not defined
Source File: http://www.eastexhaust.com/inventory_1.php
Line: 195

@webguy262-
I saw the error in Firebug

Sorry, the error you saw was because I inadvertantly left in a jquery call but did not have have the library referenced.

Try http://www.eastexhaust.com/inventory_1.php again in FF and you’ll see how the form should work. 

Trying to get it to work that way in IE

hi, trevor,

i’m amazed at how you respond to everybody’s comments.  quickly, too.  that’s awesome of you.  it’s also great to see how many people have tackled your tutorial and commented on it.

some difficulties i ran into while working my way through this tutorial are as follows (note: i’m new to ajax, and a novice with both js and php):

- the sendEmail.php linked to at the bottom of the article is referred to as “sendemail.php” in your code.  capitalization caused conflicts.

- it took me some time to find the loading gif, too

- i had to realize that the form action ‘post’ referred to “itself” (index.php, in my case)

lastly, logging in and/or registering was tough.  it seemed for a moment that i could log in using my facebook account.  or my Wordpress.com account. but those didn’t work.

only mentioning these things because i figured you’d appreciate hearing them.

best,

sergi

@Trevor-
i realize what the confusion was re: login.  i clicked on the link in the “speak your mind” section that says “log in”.  whereas i should have click on “register”.  on the “log in” page, it looked like i could log in with my google, fb, etc.  but now i realize that one cannot log in via those methods unless they first register with trevor davis.com.  i was rushed.  it may be a ui thing; maybe not though.

i agree with your love of wordpress.  it’s the bomb.

@Matt-
Sure, just use the remove() function.

thanks it’s very useful for me thank you

@Fred-
Can you provide us a link to your form?

@Fred-
I actually don’t see anything in FF. I see a completely blank page. It looks like your script tag is not closed.

@Fred-

A couple of things:
<ol>
<li>It looks like jQuery is not referenced correctly; I don’t see the jQuery library when I go here.</li>
<li>The form action should be the page itself: index.php</li>
</ol>

That should get you going. Good luck.

@Fred-
Yes

Has anyone made this work with ColdFusion? I have everything working except the ability to include the message within my tag. If I remove the message variable, the e-mail is sent.

Doesn’t work:
#EMAILCOMMENTS#

Works:
<code></code>

@Brett-
Nice!

Got a link to share your work?

@Brett-
Nice job, looks great!

Love the script. Took a bit of thought to get it working in my particular setup, but once I’d figured it out it was perfect.

For what it’s worth here’s where I’m using it:

Ashville Inc - http://tinyurl.com/pmh9fo

Go to the contact page and click on the ‘Request more information page’ link :)

Hello Trevor
Error: hasError is not defined
Source File: http://localhost/sanam/email/ajax.js
Line: 44

Could not solve this error. Help Me Please

Hi Trevor,

I’ve just tried testing your scripts. It all seems to work fine and gives the response ‘Your email was sent’ but I don’t ever receive the email that was sent.

I’ve changed the form action to index.php, the page itself.

Any ideas?

Cheers.

Aghhhhh! Sorry, I was being a total twit.

I wont even embarrass myself at explaining what I did.

Cheers very much for the script and sorry to waste your time there.

@Carlo-

I understood: it’s because is the final part of the “if” function. Thanks 4 all!!

Firstly, thanks for a super script!

I do however have a slight problem with adding additional fields to the form and actually having the data appearing in the body of the mail.  Could anybody give me a hint as to what I’m getting wrong here?
<code></code>

Ta

@hakim-
You want to pass in the $body variable instead of the $message variable into the mail function.

@Trevor-

Please disregard my last post, apparently I’d made a syntax error in line $body = ‘name: ’ . $name . “n” ‘company: ’ . $company . “n”  ‘Message: ’ . $message;

added a . after the “n” and that fixed the problem.

Thanks again for you help ;-)

Very nice script ;)

Man thats a great tutorial thanks a lot. I am trying to figure out how one could simplify the process of validating via JQuery and PHP.

I think it would be much easier if PHP checked for errors, and returned it to JQuery thus keeping the code at a minimal on the front-end.

Awesome tutorial, I added some extra fields and adding it to a wordpress theme that I’m currently developing. Thanks alot!

Sorry for the code in the previous comment - I think the HTML code didn’t appear.
Hi Trevor,

Firstly, thank you for this awesome tutorial.

I am a novice designer and new to forms. Could you please help me with it?

I have added the form on http://harshitdave.com and it works fine, however it does not send the email. I am trying to send the email to .(JavaScript must be enabled to view this email address). I get the message saying mail sent successfully however, I do not receive the email.

I am pretty sure I am using a incorrect path reference or something. Could you please help??

@Trevor-

Hi Trevor,

Thank you for the reply. Yes, there are no errors. However, I do not receive an email when I fill the form and submit. I want the email to be sent to .(JavaScript must be enabled to view this email address).

Where should i set the emailToVal to .(JavaScript must be enabled to view this email address). Sorry if this sounds stupid - I am not that good with php and javascript

Please help!

Thank you.

@Trevor-

Thank you again Trevor.

I was reading the comments above and I think I should be able to change it.

Just one question though, does the action in form have to point to the sendEmail.php file?

This is what I have at the moment -
form action=”/” method=“post” id=“sendEmail”

@Harshit-
Just modify the JavaScript so that the form no longer slides up. This is the code to edit:

@Colin-
I’m glad you are finding the script useful.

In order to send html using PHP mail, you will need to send the appropriate header. If you review the documentation on the PHP mail function, you will find more examples. Good luck.

@manuel-
Can you provide a link to the page?

@manuel-
Ok, so basically what is happening is, you load the regular page, then you click the lightbox link, and it pulls in the lightbox. This is where you need to bind the form validation function to the submit button. Or, you could just open the lightbox in an iframe, either will work.

@Nick Iredale-
Not sure what it could be. It’s still using PHP to send the emails, regardless of whether JS is enabled or not.

Hi ... can u give us an example how to do update div like prototype in jQuery ... so when we make a comment, then the entry will show in comment list .

regards

I have been using some messy code which served the same purpose but this can do it much more smoothly and its lighter;  very valuable code, thanks for posting ;)

Back again…

Trevor, I was wondering if there is a way to reload the form without reloading the page. So, basically, you fill out the form, submit, it loads the success message and then below that there is a link to reload the form. On first thought, it would seem possible to have some sort of onclick function added to the link to tell it to remove the success message and reload the form, but I have no clue as to how to make this possible (js noob).

Thanks for any insight.

on second thought… is there a way to have the success message clear itself after a few seconds and automatically reload the form?

That seems like an ideal scenario. Could you give a code example that might work that I could toy around with?

@Colin-
Sure, you could use setTimeout to set a specific amount of time before you remove the success message.

@Florian-
1) Did you try just using stripslashes without the uft8_decode? You can also try passing additional headers in the mail function.

2) You would have to change all the IDs. You could easily modify it so you wouldn’t have to do that, like I did in this article.

Trevor, I know everyone else has said the same thing, but thanks for this tutorial.  It’s exactly what I’ve been looking for.  Once I get my client’s site up and running, I’ll post a link for you. 

I’ve been using your examples to make my own code and I have a question.  What if I have form data that I didn’t validate, therefore didn’t assign a JS variable to(such as a list box)... how would I pass that info in the $.post function to my php script?  Do I have to go ahead and assign a JS variable to that form data first? 

Thanks for the help!

Jason

@Trevor -
Oh man, I missed that… that’s perfect, thanks!

@Francesco-
The simplest method is to change this in the script:

And use serialize to get all the form fields:

Then, you have all of the data from the form, so you can replace the first line I mentioned with the new data:

Great code, but…

I’ve got a suggestion; rather than using several if statements to validate the fields - I’d replace it by a a single function taking fieldID and errorMessageFieldID as parameters.

try following:

@Paul-
Absolutely there are different ways to implement this kind of thing. If you take a look at the date on this article, you will see that it is over 2 years old.

If you take a look at some of my more recent articles:
[url=“http://trevordavis.net/blog/tutorial/wordpress-jquery-contact-form-without-a-plugin/” rel=“nofollow”]
WordPress & jQuery Contact Form without a Plugin[/url] and Flexible and Semantic Forms with a Little jQuery, you will find different approaches to validation.

As far as just adding a class to the form field, I don’t think that is enough from a user experience point of view. What if you have someone that is color blind? It’s so much clearer to put the text there identifying the problems.

Great form.

Really looking at adding radio button validation.  How can I make that happen???

Please help!!!

Thanks for this script and the tutorial, I have the script on two sites and there are no errors.

hmmm, weird, it left off the last part:

Hi Trevor, I was wondering if there was a way to tweak the form to send out more than one email with one submit click, like send to a friend and 2 other friends at the same time.

thanks

@Trevor-
Thanks but the design calls for 4 input boxes for email addresses and not just one textbox.
other thoughts?

Whats the difference from the Jquery form plugin?

Thanks for this nice tutorial but I have the following problem:

Amavis (server antivirus system) adds this in the header:

X-Amavis-Alert: BAD HEADER Non-encoded 8-bit data (char E4 hex) in message header ‘Subject’: Subject: Blog-Kontaktanfrage: 344366374337 test as welln”

when I use umlauts in the subject like “äöüß test as well”.

Another problem is that the name (here “äöüßtest”) of the sender is not displayed correctly when there are umlauts in it and the message is not displayed in a new line:

Von: äöüßtest
Nachricht: rnäöäüpß00

contact_send.inc.php:

<code></code>

Thanks for help

Sorry, last try:

It works now with the JavaScript solution but not without JavaScript. With JavaScript enabled I only have the warning message from Amavis. With JavaScript disabled I have all the problems from above because the headers are not added etc.

As I said: It works already with JavaScript but only with those errors above when I use the PHP version. So the problem is not the encoding but that the headers are not sent like in the JavaScript version and I would like to know why.

Thanks anyway.Is it working with jquery 1.2.3?
I got downloaded this PHP-AJAX and I found out it is using Jquery 1.3.2
http://www.phpstring.co.cc/phpclasses/modules/ajax-registration-module/register/

It is very nice but my apps is using lower version of Jquery

Very nice and useful tutorials to web designers,
Thanks for posting.

@Macedonia-
Not sure, it should. Give it a try.

Great script, super simple and functions quite nicely. Thanks for sharing!

I have only one question. How would you slide the form back in after the info is submitted after say 5000ms? I’m very new to jQuery and javascript and have, but am learning as I implement, so please excuse me.

Here’s what I’m working with:  http://matthewnolting.com/portfolio.html#7

Alrighty, in testing I was able to get setTimeOut() to work, but not with the fadeIn() function. Any ideas?

Thanks again

I was testing setTimeOut(). I DO want to use use the fadeIn() function, but not sure what to pass in or the syntax. Again, baby steps; my apologies.

I got it to function as I wanted, although I must admit it’s a bit sloppy. Thanks for your help!

@Vix-
You can download the files at the bottom of the post.

@Vix-
/play/jqueryAjaxForm/ is the url to demo form.

analytics.php was just tracking code that I wanted to add to the page. You can ignore it.

<code></code>
sorry this seemed to fall of the last time.

@francois-
Do you have a link to the form?

@francois-
Looks like you have an error in your JavaScript. Also, when you submit the form without putting in anything, you get a PHP error.

It works great for my needs! thanks.

@Karl-
Do you mean an alert?

alright i must be doing something wrong but anyway… a better way to implement what I have above @ the link is very welcomed. It seems to run smooth and have no issues on a one tabbed browser but like I said above the timings get jacked up if your netspeed is low.

@Colin-
Sure, you can do that. Check out the jQuery API to see everything that you can do.

Hi Trevor, I found the solution to my previous post. I have another request though. I don’t speak english very well so I hope you’ll understand me.

I would like the visitor of my page to indicate three different names into three different boxes. How can I do to get the content of the three boxes into the message of my email? Would this complicate the script too much?

Yeah but i am a little bit lost. I am very new to this. I tried to do what you say and the email couldn’t be sent. Is it what you would do for the JS?

Let me be more clear:

Index file
Second box name

Verify file

Submitform.js file

Sendemail.php file

I understand. Let me just ask you a last question.

Would the sendemail file look like that? I have added two times “messagesecond” below but I am really not sure.

Thank you for your time, Trevor. I don’t know how to concatenate both of them but i will try to find on google. Thanks again!

I had a look at a BUNCH of other options, but yours won out based on ease of use, lightness of the code and accessibility. Thanks for posting it!!

My version is in coldfusion, and equally accessible as the one you’ve made. If anyone ever needs the cfm code, let me know, I’m happy to share.

@Jason-
Instead of inserting the spans, just add a class to the form field.

@Kreshnik-
You already emailed me and did not give any details about what is not working. It’s challenging for anyone to help if you don’t provide any information about what isn’t working.

@Kreshnik Pacara-
You can’t have PHP code on an HTML page.

@Trevor-
placement of the message and subject resolved but the only one thing is comes to JUNK FOLDER.
thank you so much

hello, could anyone tell me which are the steps if i would like to add another box called “Name” at this contact form:

http://klaudiaconstruction-al.com/contact.php
thanks
nik

Hi Trevor,

Question - your form works properly on my server with javascript enables in my browser. However, if I disable javascript, the form stops working, ie no validation, no success message and no email on the recipient end.

I’ve noticed that the form action of your Ajaxed demo points to the non-Ajax version of the form. My question is whether I will need to run two copies of the form - one ajax, one non-ajax - in order to accommodate my non-javascript users, or is the Ajax version form supposed to degrade?

Thanks.

Hey Trevor,

The thing that’s throwing me is that in your non-ajax demo, the form action just refers back to itself.

http://trevordavis.net/play/jqueryAjaxForm/

There’s no apparent link to either a form processor or validation script/verify.php in your non-ajax example, bringing me to the questions:

1 - where/how is the form procesing being done?

2 - where/how is form validation being carried out?

There’s obviously something very basic I’m missing here….

Thanks,
-Bob S

You know, the light bulb started to go on shortly after my last post to you….I did start out with those files, and won’t go into the series of absolutely boneheaded mistakes that lead me here for help this afternoon, but suffice it to say it all started with forgetting to turn off “display_errors” in my php.ini this morning after troubleshooting another script. My money says that you can probably piece it together from there…

Anyway, all sorted out now. Your form works great, and your help has been greatly appreciated.

Thanks,
-B

how to get the anser immediately while typing the question itself but without pressing the submit button or enter button,using javascript?

Jquery Form Applications; A great compilation…
http://www.ueuh.com/internet/jquery-form-applications/

Hello,
Excellent to be here.Fine effort buddy.

Hey mate.
Just wanted to say thank you for posting this, whilst the inital post was many years old as I got further down the comments I realised how much more recent it is and the updates / issues resolves within the comments so it’s great to see that it’s still up and running.

I’ve not attempted an implementation with it yet, how ever I will be doing so shortly. Hopefully all goes well and I can draw on any problems from the comments before contacting you. So it should be fine.

Thanks again for a concisive approach to such a topic.

Sean.

The code snippet I attempted didn’t seem to publish. Where I said “I’m calling the scripts:”

It was just code showing me calling the submitform.js and jquery.

Cheers.

@Nauman Akhtar-
Here is the demo.

@Doctor Fox-
The link to the full script is in the post.

Hey Trevor,

I’ve been attempting to get this form implemented and working in a section of my site; however, I am having some issues.

It seems that everything goes as planned, the form shows up, and once filled out/submitted, the thank you message displays, though it appears that the email never actually gets sent.

I’m new to PHP, but after looking at these files for as long as I have, the logic behind everything makes enough sense for me to understand what does what.

I have a test page up that I’ve been using while trying to get this running (please excuse the lack of images/styling)

http://205.186.140.46/products/product.php

All of the JS and PHP files are living in the /products/ directory

I have the form action pointing to the page itself - product.php

I edited the PHP files as I didn’t need any of the “Email To” functionality - all emails will be going to one specific inbox.  For testing purposes, i have been using my personal email.

I also edited the code in sendemail.php to reflect that change:

<code></code>

If there is any reason you can think of that might explain why the emails aren’t getting pushed, or just any tips/things to consider for that matter, i would greatly appreciate it.

Thanks in advance.

Hi Trevor,
I am a new graduate from graphic/web design, and they never taught us anything about PHP.
I am attempting to better myself and learn more on my own time.
I want to use this contact box on my website, and, as you can see, it goes on fine, but doesn’t work.
I have no idea what to do with the PHP, and where to put the PHP.
Any advice?

Well, Trevor.
I want to teach myself things, because my school didn’t.
Thanks, though, for the link.

@jaming-
Yes, I should have removed it from the file; it was just used for including my Google Analytics code.

Great script!

I have 2 quick questions.

1) How do I get my form to disappear when the form has been submitted and processed successfully?

2) Can I still do PHP processing in case they have Javascript disabled? Is that what the verify.php file is for?

Thanks for your time in reading this comment.

@Michael-

Michael,

As a rule of thumb you should always do php (or other server language) validation.  Forms are easily bypassed therefore all of the JavaScript validation is easily bypassed.

@seb-
Neat

Great explanation, would also be good as Noah is YOUR jquery functions available in a separate file, and added Turn This word also learn to die, net, as is done for the other Displayed above.