I created a simple php mail script that emails and does what it is supposed to do, but my problem is that I am not recieving the JSON info from my ajax call.
HTML form.
<form>
<h3>Contact Form</h3>
<img src="img/grey_logo.png" alt="grey logo" />
<ul>
<li>
<input type="text" name="Fname" placeholder="First Name">
</li>
<li>
<input type="text" name="Lname" placeholder="Last Name">
</li>
</ul>
<ul>
<li>
<input type="text" name="email" placeholder="Your Email">
</li>
<li>
<input type="text" name="Pnum" placeholder="Phone Number">
</li>
</ul>
<h3>Do you have Insurance?</h3>
<ul class="last">
<li>
<label>Yes</label>
<input type="checkbox" name="ins_yes">
</li>
<li>
<label>No</label>
<input type="checkbox" name="ins_no">
</li>
</ul>
<h3>Your private Information is Important to us, we will never ask for sensitive information </h3>
<input type="text" name="insur" placeholder="Your Insurance Name">
<input type="submit" name="submit">
</form>
AJAX by jquery
function mail() {
var first = $('input[name="Fname"]').val();
var last = $('input[name="Lname"]').val();
var email = $('input[name="email"]').val();
var yes = $('input[name="ins_yes"]').val();
var no = $('input[name="ins_no"]').val();
var phone = $('input[name="Pnum"]').val();
$.ajax({
url: "mail.php",
type: "POST",
data: {
'first': first,
'last': last,
'email': email,
'yes': yes,
'no': no,
'phone': phone
},
success: alert("Success")
});
return false;
}
$('#envelope form').submit(mail);
PHP simplified:
$first = $_POST['first'];
$last = $_POST['last'];
$email = $_POST['email'];
$yes = $_POST['yes'];
$no = $_POST['no'];
$phone = $_POST['phone'];
$to = 'test@test.com';
$subject = 'Contact Info';
$message = 'Contact persons First Name :'.$first;
$headers = 'From: contact-omt<webmaster@example.com>' . "
" .
'Reply-To: webmaster@example.com' . "
" .
mail($to, $subject, $message, $headers);
echo "success";
I have also tried decoding the json as well.
EDIT I am getting emails, but my problem is more towards not seeing $first
value after Contact Persons First Name:
Typically I wouldn't send the data by creating a variable for each input I would create a function that would take all the form elements and create a JSON object and pass that with Ajax. Like I said in my comment you were using var last
and var no
which are predefined JS variables so you'll need to rename, but this is typically how I would submit a form with Ajax,
HTML
<form class="form" action="somehandler.php" method="POST">
<input type="text" name="first">
<input type="text" name="last">
<input type="submit" value="Submit">
</form>
JS
/*
Awesome JS function we can add to create a serialize object and pass that,
it takes the forms element name and value and makes and object.
*/
$.fn.serializeObject = function() {
var object = {};
$.each(this.serializeArray(), function() {
if (object[this.name] !== undefined) {
if (!object[this.name].push) {
object[this.name] = [object[this.name]];
}
object[this.name].push(this.value || '');
}
else {
object[this.name] = this.value || '';
}
});
return object;
};
$('.form').submit(function(e)) {
e.preventDefault();
var data = $(this).serializeObject();
$.ajax({
type: "POST",
url : $(this).attr('action'),
dataType: "json",
data: data
}).done(function(result) {
console.log(result);
});
}
First of all you have to include dataType : 'json' in your $.ajax method. and in your PHP file
if(mail($to, $subject, $message, $headers)) {
$return['message'] = 'yes, I did it';
echo json_encode($return);
}
else{
$return['message'] = 'Oooops, Shame';
echo json_encode($return);
}
And in your $.ajax Success Call back you can alert like this
success: function(r){
alert(r.message);
}
You may use PHPMailer Class for sending mails, so you dont want to worry about anything missing and all, 100% you can relay on it.