I'm using the Jquerys $.ajax() function to process the contact form on 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 css class of the submit button (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 doing that I have run into 2 problems, a minor and a major one.
Minor problem is - ".fadeOut" does not seem to work, neither does ".hide("slow")". Only thing that works is ".hide()".
Major problem is -
No email is sent. I have tested the php without the AJAX and it worked, so the problem must be in the Jquery coding.
The XHTML of the form looks like this:
HTML Code:
<body>
<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>
</span>
<br />
<!--The button-->
<input name="submit" type="submit" id="Submit" tabindex="40" value="Send!" />
</form>
</div>
The JQuery:
Code:
$(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
$('.section').hide();
//to change the look of the submit button
$(':submit').addClass("working");
//to send the ajax request
$.ajax({
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.
button.hide();
$('.loader').append(data); }
});
return false;
});
});
And the PHP:
PHP Code:
<?php
$name=addslashes($_POST['name']);
$email=addslashes($_POST['email']);
$comment=addslashes($_POST['message']);
//I have a real email set in the actual php, don't worry :)
$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"
."Comments:<br>\n"
.$comment;
?>
<!--Display a thankyou message in the callback -->
<h1><span>Thank you <h10><?php echo $name ?></h10></span></h1>
<p>
<span>Your message will be answered as soon as possible.</span>
</p>
I also use Dreamweavers Spry framework for form validation before submit, but I don't 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.
