Code for info.php
Validation works if inputs are empty. Returns successful if all boxes are filled but I don't get the generated email. Here's the code for process.php:
Thanks for any help.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<title>Create a Ajax based form submission with jQuery</title>
<script type="text/javascript" src="[URL unfurl="true"]http://code.jquery.com/jquery-latest.js"></script>[/URL]
<script type="text/javascript">
$(document).ready(function() {
//if submit button is clicked
$('#submit').click(function () {
//Get the data from all the fields
var name = $('input[name=name]');
var phone = $('input[name=phone]');
var email = $('input[name=email]');
var age = $('input[name=age]');
var gender = $('input[name=gender]');
var state = $('input[name=state]');
var comment = $('textarea[name=comment]');
//Simple validation to make sure user entered something
//If error found, add hightlight class to the text field
if (name.val()=='') {
name.addClass('hightlight');
return false;
} else name.removeClass('hightlight');
if (phone.val()=='') {
phone.addClass('hightlight');
return false;
} else phone.removeClass('hightlight');
if (email.val()=='') {
email.addClass('hightlight');
return false;
} else email.removeClass('hightlight');
if (age.val()=='') {
age.addClass('hightlight');
return false;
} else age.removeClass('hightlight');
if (gender.val()=='') {
gender.addClass('hightlight');
return false;
} else gender.removeClass('hightlight');
if (state.val()=='') {
state.addClass('hightlight');
return false;
} else state.removeClass('hightlight');
if (comment.val()=='') {
comment.addClass('hightlight');
return false;
} else comment.removeClass('hightlight');
//organize the data properly
var data = 'name=' + name.val() + '&phone=' + phone.val() + '&email=' + email.val() + '&age=' +
age.val() + '&gender=' + gender.val() +'&state=' + state.val() + '&comment=' + encodeURIComponent(comment.val());
//disabled all the text fields
$('.text').attr('disabled','true');
//show the loading sign
$('.loading').show();
//start the ajax
$.ajax({
//this is the php file that processes the data and send mail
url: "process.php",
//GET method is used
type: "GET",
//pass the data
data: data,
//Do not cache the page
cache: false,
//success
success: function (html) {
//if process.php returned 1/true (send mail success)
if (html==1) {
//hide the form
$('.form').fadeOut('slow');
//show the success message
$('.done').fadeIn('slow');
//if process.php returned 0/false (send mail failed)
} else alert('Sorry, unexpected error. Please try again later.');
}
});
//cancel the submit button default behaviours
return false;
});
});
</script>
<style>
body{text-align:center;}
.clear {
clear:both
}
.block {
width:400px;
margin:0 auto;
text-align:left;
}
.element * {
padding:5px;
margin:2px;
font-family:arial;
font-size:12px;
}
.element label {
float:left;
width:75px;
font-weight:700
}
.element input.text {
float:left;
width:270px;
padding-left:20px;
}
.element .textarea {
height:120px;
width:270px;
padding-left:20px;
}
.element .hightlight {
border:2px solid #9F1319;
background:url(images/iconCaution.gif) no-repeat 2px
}
.element #submit {
float:right;
margin-right:10px;
}
.loading {
float:right;
background:url(images/ajax-loader.gif) no-repeat 1px;
height:28px;
width:28px;
display:none;
}
.done {
background:url(images/iconIdea.gif) no-repeat 2px;
padding-left:20px;
font-family:arial;
font-size:12px;
width:70%;
margin:20px auto;
display:none
}
</style>
<body>
<div class="block">
<div class="done">
<b>Thank you !</b> We have received your message.
</div>
<div class="form">
<form method="post" action="process.php">
<div class="element">
<label>Name</label>
<input type="text" name="name" class="text" />
</div>
<div class="element">
<label>Phone</label>
<input type="text" name="phone" class="text" />
</div>
<div class="element">
<label>Email</label>
<input type="text" name="email" class="text" />
</div>
<div class="element">
<label>Age</label>
<input type="text" name="age" class="text" />
</div>
<div class="element">
<label>Gender</label>
<input type="text" name="gender" class="text" />
</div>
<div class="element">
<label>State of Residence</label>
<input type="text" name="state" class="text" />
</div>
<div class="element">
<label>Comment</label>
<textarea name="comment" class="text textarea" /></textarea>
</div>
<div class="element">
<input type="submit" id="submit"/>
<div class="loading"></div>
</div>
</form>
</div>
</div>
<div class="clear"></div>
</body>
</html>
Code:
<?php
//Retrieve form data.
//GET - user submitted data using AJAX
//POST - in case user does not support javascript, we'll use POST instead
$name = ($_GET['name']) ?$_GET['name'] : $_POST['name'];
$phone = ($_GET['phone']) ?$_GET['phone'] : $_POST['phone'];
$email = ($_GET['email']) ?$_GET['email'] : $_POST['email'];
$age = ($_GET['age']) ?$_GET['age'] : $_POST['age'];
$gender = ($_GET['gender']) ?$_GET['gender'] : $_POST['gender'];
$state = ($_GET['state']) ?$_GET['state'] : $_POST['state'];
$comment = ($_GET['comment']) ?$_GET['comment'] : $_POST['comment'];
//flag to indicate which method it uses. If POST set it to 1
if ($_POST) $post=1;
//Simple server side validation for POST data
if (!$name) $errors[count($errors)] = 'Please enter your name.';
if (!$phone) $errors[count($errors)] = 'Please enter your contact phone.';
if (!$email) $errors[count($errors)] = 'Please enter your contact email.';
if (!$age) $errors[count($errors)] = 'Please enter your age.';
if (!$gender) $errors[count($errors)] = 'Please enter your gender.';
if (!$state) $errors[count($errors)] = 'Please enter your state of residence.';
if (!$comment) $errors[count($errors)] = 'Please enter your comment or request.';
//if the errors array is empty, send the mail
if (!$errors) {
//recipient
$to = 'Evil8 <evil8@mymail.com>';
//sender
$from = $name . ' <' . $email . '>';
//subject and the html message
$subject = 'Comment from ' . $name;
$message = '
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head></head>
<body>
<table>
<tr><td>Name</td><td>' . $name . '</td></tr>
<tr><td>Phone</td><td>' . $phone . '</td></tr>
<tr><td>Email</td><td>' . $email . '</td></tr>
<tr><td>Age</td><td>' . $age . '</td></tr>
<tr><td>Gender</td><td>' . $gender . '</td></tr>
<tr><td>State</td><td>' . $state . '</td></tr>
<tr><td>Comment</td><td>' . nl2br($comment) . '</td></tr>
</table>
</body>
</html>';
//send the mail
$result = sendmail($to, $subject, $message, $from);
//if POST was used, display the message straight away
if ($_POST) {
if ($result) echo 'Thank you! We have received your message.';
else echo 'Sorry, unexpected error. Please try again later';
//else if GET was used, return the boolean value so that
//ajax script can react accordingly
//1 means success, 0 means failed
} else {
echo $result;
}
//if the errors array has values
} else {
//display the errors message
for ($i=0; $i<count($errors); $i++) echo $errors[$i] . '<br/>';
echo '<a href="info.php">Back</a>';
exit;
}
//Simple mail function with HTML header
function sendmail($to, $subject, $message, $from) {
$headers = "MIME-Version: 1.0" . "\r\n";
$headers .= "Content-type:text/html;charset=iso-8859-1" . "\r\n";
$headers .= 'From: ' . $from . "\r\n";
$result = mail($to,$subject,$message,$headers);
if ($result) return 1;
else return 0;
}
?>Thanks for any help.
