I'm using jquery to validate a form and then php to send the email with all the form content.
HTML - contact.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="scripts/jquery-1.9.0.min.js" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8" src="message_validator.js" charset="utf-8"></script>
</head>
<body>
<form id="form_contacto" charset="utf-8">
<input type="text" id="name" class="textbox" name="name" maxlength="12" />
<input type="text" id="last_name" class="textbox" name="last_name" maxlength="12" />
<input type="text" id="email" class="textbox" name="email" maxlength="40" />
<input type="text" id="title" class="textbox_2" name="title" maxlength="40" />
<textarea id="message" name="message" ></textarea>
<input type="text" id="about" class="textbox_3" name="about" maxlength="40" />
<input type="text" id="validation" class="textbox_4" name="validation" maxlength="40" />
<input type="submit" class="submit" value="Send">
</form>
</body>
</html>
JQUERY - message_validator.js
// JavaScript Document
$(document).ready(function() {
$('.submit').click(function(){
if($('.error_display').css("height")!="0"){
$('.error_display').empty();
}
var errorlist = [];
errorlist.length = 0;
var email_check = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,6}$/i;
var name = $('input#name').val();
var email = $('input#email').val();
var message = $('textarea#message').val();
var validation = $('input#validation').val();
if(name == '' && email == '' && message == ''){
errorlist.push("- ERROR ALL");
}else{
if (name == '') {
errorlist.push("-ERROR");
}else if(name.length <= 2){
errorlist.push("-ERROR");
}
if (email == ''){
errorlist.push("-ERROR");
}else if(!email_check.test(email)){
errorlist.push("-ERROR");
}
if (message == '') {
errorlist.push("-ERROR");
}else if(message.length <= 5){
errorlist.push("-ERROR");
}
if (validation == '') {
errorlist.push("-ERROR");
}else if(validation != 8){
errorlist.push("-ERROR");
}
}
if(errorlist.length >= 1){
$('.error_display').animate({'height':errorlist.length*22}, {queue:false, duration:500});
for(var i = 0; i < errorlist.length; i++) {
$('.error_display').append(errorlist[i]+"<br/>");
//errorlist[i].text.appendTo($('.error_display'));
//$('.error_display').append(errorlist[i].val());
}
}else{
$("form#form_contacto").submit();
$('.error_display').animate({'height':0}, {queue:false, duration:500});
$('.success_display').animate({'height':75}, {queue:false, duration:500});
$('#form_contacto').animate({'opacity':0.25}, {queue:false, duration:500});
$('.submit').attr("disabled", true);
}
});
});
PHP - message_handler.php
<?php
$name = $_POST['name'];
$last_name = $_POST['last_name'];
$visitor_email = $_POST['email'];
$title = $_POST['title'];
$message = $_POST['message'];
$about = $_POST['about'];
$validation = $_POST['validation'];
$email_from = 'example@example.com';
$email_subject = "New Message";
$email_body = "Received a new message from $name $last_name"."Visitor email: $visitor_email
"."Title: $title
"."Message sent:
$message
";
$to = "example@example.com";
$headers = "From: $email_from
";
$headers .= "Reply-To: $visitor_email
";
mail($to,$email_subject,$email_body,$headers);
?>
The message is sent normally if I change the button to submit and put method="post" action="message_handler.php" in the form tag. But when I use that method it goes to the page message_handler.php and display a blank page and I want it only to send if the validation comes true from the message_validator.js so thats why I'm trying to use jquery to use the post() method.
I already tried in the last else the following:
else{
$("form#form_contacto").submit();
}
and
else{
$.post("message_handler.php", {name:name, email:email, last_name:last_name, title:title, message:message}
}
