jQuery form submission problem

JavaScript
1

So when i submit the form i get “sorry an error occured” as opposed to the mail_success message even though the form data was mailed and received.

form:

<form action="contact.php" method="POST" id='contact_form'>
				<ul>						
					<li> 
						<label for="name">Name</label>
						<input type='text' name='name' id='name' />
						<div class="clear"></div>
						<p id='name_error' class='error'>Enter your name</p>
					</li> 
					<li> 
						<label for="email">Email Address</label>
						<input type='text' name='email' id='email' />
						<div class="clear"></div>
						<p id='email_error' class='error'>Enter a valid email address</p>
					</li> 
					<li> 
						<label for="message">Message</label>
						<textarea name='message' id='message' rows="30" cols="30"></textarea>
						<div class="clear"></div>
						<p id='message_error' class='error'>Enter your message</p>
					</li> 
                    <li>
                    <p id='mail_success' class='success'>Thank you for contacting me, I will get back to you as soon as possible.</p>
					<p id='mail_fail' class='error'>Sorry, an error has occured. Please try again later.</p>
					<div id="button">
					<input type='submit' id='send_message' class="button" value='Submit' />
					</div>
                    </li>
                    </ul>
            </form>

contact.php:

<?php

$EmailFrom = Trim(stripslashes($_POST['email'])); 
$EmailTo = "you@yourdomain.com";
$Subject = "Contact Form";
$name = Trim(stripslashes($_POST['name'])); 
$email = Trim(stripslashes($_POST['email'])); 
$message = Trim(stripslashes($_POST['message'])); 


$validationOK=true;
if (Trim($name)=="") $validationOK=false;
if (Trim($email)=="") $validationOK=false;
if (Trim($message)=="") $validationOK=false;
if (!$validationOK) {
  print "failed";
  exit;
}


$Body = "";
$Body .= "name: ";
$Body .= $name;
$Body .= "\
";
$Body .= "email: ";
$Body .= $email;
$Body .= "\
";
$Body .= "message: ";
$Body .= $message;
$Body .= "\
";


$success = mail($EmailTo, $Subject, $Body, "From: <$email>");

if ($success){
  print "sent";
}
else{
  print "failed";
}
?>

contact.js:

$(document).ready(function(){
			$('#send_message').click(function(e){
				
				e.preventDefault();
				
				var error = false;
				var name = $('#name').val();
				var email = $('#email').val();
				var message = $('#message').val();
				
				
				if(name.length == 0){
					var error = true;
					$('#name_error').fadeIn(500);
				}else{
					$('#name_error').fadeOut(500);
				}
				if(email.length == 0 || email.indexOf('@') == '-1'){
					var error = true;
					$('#email_error').fadeIn(500);
				}else{
					$('#email_error').fadeOut(500);
				}
				if(message.length == 0){
					var error = true;
					$('#message_error').fadeIn(500);
				}else{
					$('#message_error').fadeOut(500);
				}
				
				if(error == false){

					$('#send_message').attr({'disabled' : 'true', 'value' : 'Sending...' });
					
					$.post("contact.php", $("#contact_form").serialize(),function(result){

						if(result == 'sent'){

							 $('#button').remove();

							$('#mail_success').fadeIn(500);
						}else{

							$('#mail_fail').fadeIn(500);
			
							$('#send_message').removeAttr('disabled').attr('value', 'Submit');
						}
					});
				}
			});    
		});

any help greatly appreciated…this has been driving me insane!

2

Your a star, thanks.

3

You should trim the response before checking its value. Also, you don’t currently fadeOut the error message on success.


if($.trim(result) == 'sent'){
   $('#button').remove();
   $('#mail_fail').fadeOut(500);
   $('#mail_success').fadeIn(500);
}
4

any more help would be greatly appreciated, anyone?

5

Same thing happens:
“Sorry, an error has occured. Please try again later.”

But i did not receive the email…

6

Not sure i follow you - im relatively new to coding…any help/dumbing down is appreciated :slight_smile:

7

Change:


                        if(result == 'sent'){
                            $('#button').remove();
                            $('#mail_success').fadeIn(500);
                        }else{
                            $('#mail_fail').fadeIn(500);
                        $('#send_message').removeAttr('disabled').attr('value', 'Submit');
                        }

To:


                        if(result == 'sent'){
                            $('#button').remove();
                            $('#mail_success').fadeIn(500);
                        }else{
                            $('#mail_fail').fadeIn(500);
                        $('#send_message').removeAttr('disabled').attr('value', 'Submit');
                        }
                        alert('-' + result + '-');

What does it alert?

8

Without going through your code thoroughly, I noticed that your code is simply checking if the output is ‘sent’.

What do you get when you alert(‘-’ + result + ‘-’); ?

I put the dashes in there so you know if there’s an added space or something as well.

Maybe your PHP is spitting out a notice or something, therefore even though the script runs and outputs ‘sent’, because other text is also output then the total output wouldn’t equal ‘sent’ itself.