Reputation: 780
I have created a simple email form on a website - Processing it through AJAX using the jQuery library.
I know that the form is working because I am receiving the test email, but I will need for the user to know that their email has sent. Currently, there is no event happening upon success. It should be replacing the form (in div #contactform) with a success message. What am I missing here?
NOTE: I looked at the activity in Safari after submitting the form and it shows my process.php script, but it says "cancelled". Why is it doing this, and could it have something to do with why it is not showing a success message?
Here's my script:
HTML
<div id="contactform">
<form id="churchcontact" action="" method="POST">
<ul>
<li>
<label for="name">Name</label>
<span class="error error_name">Please enter your name</span>
<input id="name" type="text" name="name" />
</li>
<li>
<label for="email">Email</label>
<span class="error error_email">Please enter your email address</span>
<input id="email" type="text" name="email" />
</li>
<li>
<label for="message">Message</label>
<span class="error error_message">Please write a message</span>
<textarea id="message" name="message"></textarea>
</li>
<li>
<input class="formsubmit" type="submit" value="Send" />
<li>
</ul>
</form>
</div>
jQUERY
$(document).ready(function() {
////////////////////////////////////
//// form submit ////
////////////////////////////////////
$('#churchcontact').submit(function() {
////////////////////////////////////
//// validation ////
////////////////////////////////////
$('.error').hide();
//message
var message = $('textarea#message').val();
if(message == '') {
$('.error_message').show();
$('textarea#message').focus();
var errors = 'true';
}
//email
var email = $('input#email').val();
var atpos = email.indexOf("@");
var dotpos = email.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=email.length || email == '') {
$('.error_email').show();
$('input#email').focus();
var errors = 'true';
}
//name
var name = $('input#name').val();
if(name == '') {
$('.error_name').show();
$('input#name').focus();
var errors = 'true';
}
if(errors) {
return false;
} else {
////////////////////////////////////
//// process ////
////////////////////////////////////
var dataString = 'name='+ name + '&email=' + email + '&message=' + message;
//alert (dataString);return false;
$.ajax({
type: "POST",
url: "sites/all/modules/custom/churchcontact/process.php",
data: dataString,
success: function() {
$('#contactform').html("success!");
}
});
}
return false;
});
});
PHP (process.php)
$name = $_POST['name'];
$email = $_POST['email'];
$msg = $_POST['message'];
$recipient = '[my email]';
$subject = 'Website Test';
$message = '
Name: ' . $name
. ', Email: ' . $email
. ', Message: ' . $msg;
mail($recipient, $subject, $message, $headers);
Upvotes: 0
Views: 2457
Reputation: 15338
in process.php add an echo
of mail()
:
$res = mail($recipient, $subject, $message, $headers);
echo $res; //if $res returns 1 that means mail was sent
ajax success
:
...
success: function(data) {
if(data == 1){
message = "success!";
}
else{
message = "Error";
}
$('#contactform').empty().html(message);
}
Upvotes: 3