AJAX/PHP form not sending information
Question
Hey guys i have a form that's supposed to send a message without reloading the page. I've used this tutorial here: http://www.elated.com/articles/slick-ajax-contact-form-jquery-php/ and adapted it to suit my needs. here is the php:
<?php
session_start();
// Define some constants
define( "RECIPIENT_NAME", "John Smith" );
define( "RECIPIENT_EMAIL", "myemail@email.com" );
define( "EMAIL_SUBJECT", "Visitor Message" );
// Read the form values and define variables
$success = false;
$senderName = isset( $_POST['name'] ) ? preg_replace( "/[^\.\-\' a-zA-Z0-9]/", "", $_POST['name'] ) : "";
$senderEmail = isset( $_POST['email'] ) ? preg_replace( "/[^\.\-\_\@a-zA-Z0-9]/", "", $_POST['email'] ) : "";
$message = isset( $_POST['message'] ) ? preg_replace( "/(From:|To:|BCC:|CC:|Subject:|Content-Type:)/", "", $_POST['message'] ) : "";
$honeypot = $_POST['url'];
$code = $_POST['code'];
//if the honeypot is filled out, dont send the form
if (!empty($honeypot)){
$success = false;
}
// If all values exist and the code matches, send the email
else if ( $senderName && $senderEmail && $message && $code == $_SESSION['random_code'] ) {
$recipient = RECIPIENT_NAME . " <" . RECIPIENT_EMAIL . ">";
$headers = "From: " . $senderName . " <" . $senderEmail . ">";
$success = mail( $recipient, EMAIL_SUBJECT, $message, $headers );
}
// Return an appropriate response to the browser
if ( isset($_POST["ajax"]) ) {
echo $success ? "success" : "error";
} else {
?>
<html>
<head>
<title>Thanks!</title>
</head>
<body>
<?php if ( $success ) echo "<p>Thanks for sending your message! We'll get back to you shortly.</p>" ?>
<?php if ( !$success ) echo "<p>There was a problem sending your message. Please try again.</p>" ?>
<p>Click your browser's Back button to return to the page.</p>
</body>
</html>
<?php
}
?>
and here is the javascript:
function submitForm() {
var contactForm = $(this);
//submit the form to the PHP script via Ajax
$('#sendingMessage').fadeIn();
$.ajax( {
url: contactForm.attr( 'action' ) + "?ajax=true",
type: contactForm.attr( 'method' ),
data: contactForm.serialize(),
success: submitFinished
} );
// Prevent the default form submission occurring
return false;
}
function submitFinished( response ) {
response = $.trim( response );
$('#sendingMessage').fadeOut();
if ( response == "success" ) {
// Form submitted successfully:
// 1. Display the success message
// 2. Clear the form fields
$('#successMessage').fadeIn().delay(5000).fadeOut();
$('#name').val( "" );
$('#email').val( "" );
$('#message').val( "" );
} else {
// Form submission failed: Display the failure message,
$('#failureMessage').fadeIn().delay(5000).fadeOut();
}
}
that function is run when the user clicks the send button and after it's checked that all the fields have been filled out. I think it's tripping up down the end of the php where it says if(isset($_POST['ajax'])) because i keep getting redirected to the html fallback back, as if I dont have javascript enabled (which i do by the way). you can see a working example here: mattsandersdesign.com/test/contact2.html thanks in advance!
2 answers
solution1
0 2011-10-06 23:16:00
You have to return false even if all the validation checks pass. Otherwise the form will just submit.
Also are you even calling submitForm() ever?
solution2
0 ACCPTED 2011-10-09 21:06:25
ok i finally figured it out. firstly I was calling return false at the wrong time. I needed to run it outside the submitForm function. and secondly i had a couple of variables in the wrong places
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.