View Full Version : Problem with AJAX contact form

12-03-2010, 04:21 PM
I'm using the Jquerys $.ajax() function to process the contact form on a page I am building.
I am also using Jquery for the following effects to happen when the form is submitted - 1st to fadeout the contact form details, 2nd to change the class of the submit button to working(I am using a custom image for this, it changes the button text from "send it!" to "working"), 3rd to show the results from the php echo in place of the forms, 4th to fadeout the submit button itself.

But the problem is that for some reason I cannot do a ".fadeOut" and neither does ".hide("slow")" seem to work. Only thing that I can do and that works is ".hide()".

The XHTML of the form looks like this:

<div id="main_wrapper">

<form action="formmail.php" method="post" name="contact_form" id="contact_form">

<!-- The ".loader" div class is used later in the JQuery. This is where the ajax "success" text will show up-->
<div class="loader"></div>

<!-- I use the ".section" span to mark the parts of the form that need to disappear upon submit -->
<span class="section">

<!-- the input forms themselves. I have a "name", "email" and "message" form -->

<label for="name" class="label">Your full name:*</label>
<input type="text" name="name" id="name" tabindex="10" class="form" />
<br />
<label for="email" class="label" >Your e-mail:*</label>
<input type="text" name="email" id="email" tabindex="20" class="form" />
<br />
<label for="message" class="label" >Your message:</label>
<textarea name="message" id="message" cols="45" rows="5" tabindex="30" class="form"></textarea>
<br />

<!--The button-->
<input name="submit" type="submit" id="Submit" tabindex="40" value="Send!" />


The JQuery:

$(function() {
//to trigger ajax on submit
$('#contact_form').submit( function(){

//to hide the form elements, I would like this to be with a delay, or a ".fadeOut" but from some reason it does not work that way


//to change the look of the submit button

//to send the ajax request

type: 'post',
url: 'formmail.php',
data: 'name=' + $('#name').val() + '&email=' + $('#email').val() + '$comment=' + $('#message').val(),
success: function(data){
//to hide the button, again neither hide delay nor ".fadeOut" work.
$('.loader').append(data); }
return false;

And the PHP:


// you can specify which email you want your contact form to be emailed to here

$toemail = "myemail@mysite.com";
$subject = "some subject";

$headers = "MIME-Version: 1.0\n"
."From: \"".$name."\" <".$email.">\n"
."Content-type: text/html; charset=iso-8859-1\n";

$body = "Name: ".$name."<br>\n"
."Email: ".$email."<br>\n"

mail($toemail, $subject, $body, $headers);
<!--Display a thankyou message in the callback -->
<h1><span>Thank you <h10><?php echo $name ?></h10></span></h1>
<span>Your message will be answered as soon as possible.</span>

I also use Dreamweavers Spry framework for form validation before submit, but I dont think there is a need to post those scripts here, since they are not connected to the AJAX.

I have hosted the form on a free host for practice HERE (http://vezba.webege.com/).

12-06-2010, 07:01 PM