无法使用ajax将变量发送到php

Question

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

Answer 1

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;
 });

Answer 2

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 () {
        ...
    }
});