Work
SubscribejQuery AJAX'ed forms
Inspired by Dustin Diaz’s AJAX screencast, I thought it was time I made a little more use of iShowU and show how easy, and quick it can be to pile on some AJAX calories to pretty much any form.
The screencast is sans-sound, really just to try to keep my out-going bandwidth down, but I’ve commented along the way so you can understand (…hopefully…) what I’m doing, and why I’m doing it.
Download the QuickTime screencast, 9MB, a little over 10 minutes
If you can’t view the screencast, try DivX Web Player for Windows or the Mac.
You can also have a look the code used in the screencast to have a play or to upgrade.
As always, let me know if you have any questions or suggestions.
Watch out for this gotcha that I just stumbled in to: if your form has an input element with the name 'action', the line url: this.action is going to grab that element, rather than the form's action. Instead, use this.getAttribute('action')
You should follow me on Twitter here I'll tweet about JavaScript, HTML 5 and other such gems (amongst usual tweet-splurges)
%7Cutmcsr%3D(direct)%7Cutmcmd%3D(none)%3B%2B__utmv%3D20674747.-%3B)
Yeah, I've into exactly the same troubple with submitting a form on IE. FF works fine. Any ideas?
Thanks in advance!
@wtc & @narko - I'm pretty certain you've got an error in the JavaScript - which is causing the form to submit.
Reason being is that if you
return false;to thesubmitevent, it won't submit the form.However, if there's an error in the JS, it will submit the form.
First things first, change the following line in the code from:
to:
This should help debug the problem in IE.
i can't get it work
Error in jquery.js line 4695
xml.send(s.data);
i used exactly the code that u show
[...] Ajax+Forms mit 'jQuery' .. schöner Screencast: jQuery AJAX'ed forms Gruss, tecM0 __________________ "A good programmer is someone who looks both ways before [...]
[...] fazer seu primeiro formulário Ajax e ver como o jQuery poupa tempo do desenvolvedor. Vale a pena! Referência. Guardar em: « Leitor de RSS para o Evolution | [...]
Just a point on this I kept getting an error saying "setting a property that has only a getter". After investigation I found it was because i had an input called action. This error is caused when you try to edit a read only dom element so i can only assume that this is interferes with the action attribute of the form
Hi Remy, thanks for putting this up, it's given me a better understanding of how this all works!
There were two things I wanted to check if I was misunderstanding:
There doesn't seem to be much error checking, am I wrong? It still submits without any content when you have Javascript turned off.
When it does submit, you get a popup that says "your message has been sent", but it doesn't redirect to a new page or anything.
Here is my version, it has literally been copied from your example:
http://www.method.com.au/contactTest.php
@Paul - the demo was created to show how easy and quickly you can add a dash of Ajax to a form using a screencast.
I wouldn't recommend you add that exact code for your own contact page for a few reasons: 1) it's unstyled, 2) it doesn't go through to a proper thank you page, 3) the server-side check it limited (think about email injection), 4) the Ajax response could be a lot nicer.
For a much more complete example of Ajax in a form, have a look at my populating select boxes post. It starts with the non-JS version, then graduates to a fully Ajax'ed solution.
great screencast - but i can't seem to get the script working. im a noob to php/jquery so im not quite sure where im going wrong. i'm suspecting it might be the $header value - what should i be putting as the mail address if i pay for an account with powweb?
also when you say that we shouldn't use this exact code for the contact form, do you know of any good link to scripts which we could implement.
thanks!
i just got the script working so dont worry about answering me first question.
i'd still love to know if anyone has any advise on a good secure php mail script to use
Thanks for your reply Remmy. I've found a different script to use for the actual form bits.
Hi Nooby, if you are interested, here is the script I am using:
http://www.digital-web.com/articles/bulletproof_contact_form_with_php/
It doesn't have error checking added though, so I'm trying to find that now!
Sorry, that link didn't come in properly, so try this:
http://tinyurl.com/2f8z33
Hi, thanks for your tutorial, its great!.
But i found one problem with IE6:
If I send example "alert("some problem");" with Firefox OK, with Opera OK, but with IE6 no send alert to Screen... why??
If need more informations, added all code I'm used for this script
Instead of having to specify the method in the jquery code I added in
type: this.method,
so both action and method are taken directly from the form.
Thanks for the nice screencast!
Great screencast remy. Cant wait to try it out!
Thanx for your screencast!
I wondered for some months, if I should use some AJAX functionalities in my CMS - and use JavaScript. I heavily remember the browser-wars and JavaScript-incompatibilities of the 90es and avoid JavaScript at all. My server does the code, clean and straight, not the browser - I still don't trust them.
But the Web is a user thing, user have to feel comfortable. For user-guidance and rich user interfaces I need AJAX. On the new devices like iPhone or iPod touch Web-applications are indistinguishable to "normal" applications and will be used like these.
I know. But JavaScript? :-(.....
Thanx, your blog inspired me to implement the first script on the same afternoon.
Marcus
Great screencast. Just wondering how I would go about changing the successful Alertbox to something more useful. Say I have a DIV set to visibility: hidden that contains some text. How would I be able to change that DIV to now be set to visible while adding some transitioning effects like a fade or slide?
Hey, thanks for the tutorial, you did a great job of explaining things. Been meaning to add ajax to forms using jQuery for a while and this really helped me out.
James
hi remy,
this tut has helped me a ton. I'm having a really hard time figuring out how to get the response into something other than an alert though. I want to populate it into something in the DOM.
I wrote it this way, which didn't work:
success: function(r) {
$('#content').html(r);
}
Can you give me a clue?
@Todd - that code looks okay. Assuming the r object is string of HTML.
Best thing to do is test it with Firebug and put a break point on the $('#content') line. You can then inspect the 'r' variable.
Also, if it's not getting in to that block of code, it might be worth adding an error handle or even the complete handler - have a look at the options on http://docs.jquery.com/Ajax/jQuery.ajax