php script for emailing variables with ajax - php

Question

I have already posted on the ajax section on this very board and was advised to ask some php gurus for help.
The main problem I have is that I cannot manage the variables which are set in a contact form are successfully emailed to me. So there must be an error in the php file itself, although it is just a very simple testfile.
The important part of my JS looks like this:
$("#submitQuote").live('click',function(){
var shirt_style = "shirt_style="+$(".dropdown[title=shirt_style] .dropdownValue").text();
var shirt_type = "&shirt_type="+$(".dropdown[title=shirt_type] .dropdownValue").text();
var cuffs = "&cuffs="+$(".dropdown[title=cuffs] .dropdownValue").text();
var chestpoket = "&chestpoket="+$(".dropdown[title=chestpoket] .dropdownValue").text();
var collar = "&collar="+$(".dropdown[title=collar] .dropdownValue").text();
var collar_buttons = "&collar_buttons="+$(".dropdown[title=collar_buttons] .dropdownValue").text();
var fastening = "&fastening="+$(".dropdown[title=fastening] .dropdownValue").text();
var cut = "&cut="+escape($(".dropdown[title=cut] .dropdownValue").text());
var Name = "&Name="+escape($("input[name=Name]").val());
var Email = "&Email="+escape($("input[name=Email]").val());
var Phonenumber = "&Phonenumber="+escape($("input[name=Phonenumber]").val());
var Address = "&Address="+escape($("input[name=Address]").val());
var Zipcode = "&Zipcode="+escape($("input[name=Zipcode]").val());
var City_country = "&City_country="+escape($("input[name=City_country]").val());
var Copy = "&Copy="+$(".checkbox[title=Copy]").hasClass("checkboxChecked");
var form_values1 = shirt_style+shirt_type+cuffs+chestpoket+collar+collar_buttons+fastening+cut;
var form_values2 = form_values1+Name+Email+Phonenumber+Address+Zipcode+City_country+Copy;
$.ajax({
type: "POST",
url: "http://www. .com/ajax/quote.php",
data: form_values2,
success: function() {
$('html,body').animate({scrollTop:290},1000);
$("#quoteStepContainer").html('');
$("#quoteStepContainer").html('<img src="http://www. ...com/img/sent.jpg" width="625" height="160" alt="Thanks" id="thanksImage" />');
$("#thanksImage").fadeIn(1000);
$("#quoteStepContainer").delay(1000).animate({"height": "190px"},1500);
}
});
return false;
});
the importnatn part of the html looks like this:
<form name="quoteForm" method="post" action="#">
<div id="quoteStep1" class="quoteStep">
<label>Shirt style</label>
<div class="dropdown" title="shirt_style"></div>
<label>Shirt type</label>
<div class="dropdown" title="shirt_type"></div>
<label>Collar</label>
<div class="dropdown" title="collar"></div>
<label>Collar Buttons</label>
<div class="dropdown" title="collar_buttons"></div>
<label>Cuffs</label>
<div class="dropdown" title="cuffs"></div>
<label>Chestpoket</label>
<div class="dropdown" title="chestpoket"></div>
<label>Fastening</label>
<div class="dropdown" title="fastening"></div>
<label>Cut</label>
<div class="dropdown" title="cut"></div>
</div>
<div id="quoteStep2" class="quoteStep">
<p class="stepText">Phew, the last step!</p>
<label>Your name</label>
<input type="text" name="Name" class="required" />
<label>E-mail</label>
<input type="text" name="Email" />
<label>Phone number</label>
<input type="text" name="Phonenumber" />
<label>Address</label>
<input type="text" name="Address" />
<label>Zip-code</label>
<input type="text" name="Zipcode" />
<label>City & Country</label>
<input type="text" name="City_country" />
<label>Want a copy of the form?</label>
<div class="checkbox" title="Copy"></div>
</div>
</form>
the input controls are defined over another js:
jQuery.fn.dropmenu = function (options,width) {
var title = jQuery(this).attr('title');
jQuery(this).css('width',width);
jQuery(this).append('<div class="dropdownValue" title="'+title+'">'+options[0]+'</div>');
jQuery(this).append('<ul class="dropdownList" title="'+title+'">');
for(i=0; i<options.length; i++) {
jQuery(this).parent().find('.dropdownList[title='+title+']').append('<li>'+options[i]+'</li>');
}
jQuery(this).parent().find('.dropdownList').hide();
jQuery(this).parent().find('.dropdownList').css('width',width);
jQuery(this).find('.dropdownList li:first').addClass('first');
jQuery(this).find('.dropdownList li:last').addClass('last');
jQuery('.dropdownValue').toggle(function(){
jQuery(this).parent().find('.dropdownList[title='+title+']').animate({"height": "toggle", "opacity": "toggle"}, 200);
jQuery(this).addClass("dropdownValueClicked");
jQuery('.dropdownList').not('.dropdownList[title='+title+']').hide();
}, function() {
jQuery(this).parent().find('.dropdownList[title='+title+']').animate({"height": "toggle", "opacity": "toggle"}, 200);
jQuery(this).removeClass("dropdownValueClicked");
jQuery('.dropdownList').not('.dropdownList[title='+title+']').hide();
});
jQuery('.dropdownList li').live('mouseenter',function() {
jQuery(this).stop().addClass("hover");
}).live('mouseleave', function() {
jQuery(this).stop().removeClass("hover");
});
jQuery('.dropdownList[title='+title+'] li').live('mousedown',function(){
jQuery('.dropdownValue').removeClass("dropdownValueClicked");
var value = jQuery(this).html();
jQuery(this).parent().animate({"height": "toggle", "opacity": "toggle"}, 200);
jQuery(this).parent().parent().find('.dropdownValue[title='+title+']').html(value);
});
}
and the test php that doesnt work looks like this:
<?php
$mail = $_POST['Email'];
$name = $_POST['Name'];
$to = "email#mydomain.com";
$message =" You received a mail from ".$mail;
$message .=" His name is : ".$name;
if(mail($to,$mail,$message)){
echo "mail successful send";
}
else{
echo "there's some errors to send the mail, verify your server options";
}
?>
Thank you very much for all your time and effort.
Aaron

Answer 1

The content of your form is never proccessed in your php script.
You have to wirte the values that where send to your script into thhe $message variable.
Example
<?php
$mail = $_POST['Email'];
$name = $_POST['Name'];
$to = "email#mydomain.com";
$message =" You received a mail from ".$mail;
$message .=" His name is : ".$name."\n";
//add content to your mail!!!
$message .= "Shirt style: {$_POST['shirt_style']}";
if(mail($to,$mail,$message)){
echo "mail successful send";
}
else{
echo "there's some errors to send the mail, verify your server options";
}
?>

Answer 2

Im back now and have checked everything.
It seems a bit trickier than expected.
Actually it seems that I only receive valid emails, which means emails which include the variables from the form when I use Safari.
On browsers like FF and IE I only receive the message without the variables.
So on Safari I get the email:
You received a mail from testmail#test.com
His name is : testname Shirt style: Short
on FF and IE I receive, with the same settings the message
You received a mail from His name
is : Shirt style:
Additionally I receive the error in IE
Access denied
Row: 127 Sign: 287 Code: 0 URI:
http://www. .com/js/jquery.min.js
I do not receive an error message when viewing in FF with firebug.