Cannot send variables with ajax to php

If been trying for some time now and cannot get this to work without help.

I want to send variables from a contact form to a php in order to get it mailed to me.

the js looks something 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/mail.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="Thank you" id="thankyouimage" />');
    $("#thanksImage").fadeIn(1000);
    $("#quoteStepContainer").delay(1000).animate({"height": "190px"},1500);

   }
  }); 

  return false;


 });

I want the form_values2 to be send to me, but I cannot get it to work.

I think the main problem for me is that I'm unsure how the php file has to look like in order to send the form_values2 var.

the very simple php test-form does not work.

<?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 so much for your help.

Aaron

A much easier approach (and avoids encoding errors) would be to use .serialize() on the <form> so it gets the data like a normal non-AJAX submit does, like this:

$("#submitQuote").live('click',function(){   
  $.ajax({
    type: "POST",
    url: "http://www.....com/ajax/mail.php",
    data: $("#formid").serialize(),
    success: function() {    
      $('html,body').animate({scrollTop:290},1000);
      $("#quoteStepContainer").html('<img src="http://www...com/img/sent.jpg" width="625" height="160" alt="Thank you" />').find('img').hide().fadeIn(1000)
                        .end().delay(1000).animate({"height": "190px"},1500);
    }
  });   
  return false;
 });

Your second set of inputs already works with this, the first set though you're finding by title, make sure they have the name attribute you want to send to the server instead. Also, just for the sake of completeness, there's an even shorter version using $.post(), like this:

$("#submitQuote").live('click',function(){   
  $.post("http://www.....com/ajax/mail.php", $("#formid").serialize(), function() {    
      $('html,body').animate({scrollTop:290},1000);
      $("#quoteStepContainer").html('<img src="http://www...com/img/sent.jpg" width="625" height="160" alt="Thank you" />').find('img').hide().fadeIn(1000)
                        .end().delay(1000).animate({"height": "190px"},1500);
  });   
  return false;
 });

You need to use Json-typed data. For example:

var ajaxData = {
     shirt_style: $(".dropdown[title=shirt_style] .dropdownValue").text(), 
     shirt_type : $(".dropdown[title=shirt_type] .dropdownValue").text()
};

$.ajax({
    type: "POST",
    url:  "http://www.....com/ajax/mail.php",
    data: ajaxData,
    success: function (data) {
        ...
    },
    error: function () {
        ...
    }
});