jQuery ajax post data to form mail

Question

I'm trying to make jQuery post some data to an PHP form mail via Ajax, so i can sent the data in an email. But my problem is that it doesn't post anything in the mail. It's empty.

Here is my javascript:

$(document).ready(function() {
  $('#food_requirements').hide();
  $('#name_allergy').hide();
  $('#food').click(function(e) {
    $('#food_requirements').fadeIn('slow');
  });
  $('#allergy').click(function(e) {
    $('#name_allergy').fadeIn('slow');
  });

  $('.confirm input').click(function(e) {
    $(".confirm").removeClass('red-border');
  });
  $('.checkin').click(function() {
    $(this).attr("src", 'images/loader.gif');
    var checkBoxs = document.getElementsByName("confirmation");
    var confirmation = '';
    for (var i = 0; i < checkBoxs.length; i++) {
      if (checkBoxs[i].checked) {
        confirmation += checkBoxs[i].value + " - ";
      }
    }
    if (confirmation == '') {
      $('.confirm').addClass('red-border');
      $(this).attr("src", 'images/checkin.jpg');
      return false;
    }
    if (document.getElementById("food").checked) {
      var food = "yes";
    } else {
      var food = "no";
    }
    var food_requirements = $('#food_requirements').val();
    if (food == 'yes') {
      if (food_requirements == '') {
        $('#food_requirements').addClass('red-border');
        $('#food_requirements').focus();
        $(this).attr("src", 'images/checkin.jpg');
        return false;
      } else {
        $("#food_requirements").removeClass('red-border');
      }
    }
    if (document.getElementsByName("allergy").checked) {
      var allergy = "yes";
    } else {
      var allergy = "no";
    }
    var name_allergy = $('#name_allergy').val();
    if (allergy == 'yes') {
      if (name_allergy == '') {
        $('#name_allergy').addClass('red-border');
        $('#name_allergy').focus();
        $(this).attr("src", 'images/checkin.jpg');
        return false;
      } else {
        $("#name_allergy").removeClass('red-border');
      }
    }
    var firstname1 = $('#firstname1').val();
    if (firstname1 == '') {
      $('#firstname1').addClass('red-border');
      $('#firstname1').focus();
      $(this).attr("src", 'images/checkin.jpg');
      return false;
    } else {
      $("#firstname1").removeClass('red-border');
    }
    var lastname1 = $('#lastname1').val();
    if (lastname1 == '') {
      $('#lastname1').addClass('red-border');
      $('#lastname1').focus();
      $(this).attr("src", 'images/checkin.jpg');
      return false;
    } else {
      $("#lastname1").removeClass('red-border');
    }
    var age1 = $('#age1').val();
    if (age1 == '') {
      $('#age1').addClass('red-border');
      $('#age1').focus();
      $(this).attr("src", 'images/checkin.jpg');
      return false;
    } else {
      $("#age1").removeClass('red-border');
    }
    var fname = "";
    var firstname = document.getElementsByName("firstname");
    for (var i = 0; i < firstname.length; i++) {
      if (firstname[i].value != '') {
        if (firstname[i].value != '') fname += firstname[i].value + " / ";
      }
    }
    var lname = "";
    var lastname = document.getElementsByName("lastname");
    for (var i = 0; i < lastname.length; i++) {
      if (lastname[i].value != '') lname += lastname[i].value + " / ";
    }
    var ages = "";
    var age = document.getElementsByName("age");
    for (var i = 0; i < age.length; i++) {
      if (age[i].value != '') ages += age[i].value + " / ";
    }










    var data = "&confirmation=Events: " + confirmation + "&firstname=First names: " + fname + "&lastname=Last names: " + lname + "&age=Ages: " + ages;
        if (food_requirements != '') data = data + "&food_requirements=Food requirements: " + food_requirements;
        if (name_allergy != '') data = data + "&allergy=Allergy: " + name_allergy;
        var url = "rsvp.php";
        $('#form').html('Your CHECK-IN is done!.<br/> Thank you very much.');
        $.post(url, data, function(msg) {
          $('#form').addClass('formfinal');
            alert(data)
          window.scrollTo(0, 0);
          if (msg.substr(0, 2) == "ok") {
            $('#form').html('Your CHECK-IN is done!.<br/> Thank you very much.');
          } else {
            $('#form').html('There has been an error with the CHECK-IN. Please try again.');
            return false;
          }
        });





  });
});
function isEmail(email) {
  var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
  return regex.test(email);
}
function addguest() {
  $("#guests").append("<input class='firstname' name='firstname' placeholder='First Name' /><input class='lastname' name='lastname' placeholder='Last Name' /><input class='age' name='age' placeholder='Age' /><div class='clr'></div>");
}

I get this value when i alert "data"

"&confirmation=Events:Bollywood - &firstname=First names: andreas / john / james / &lastname=Last names: Johnson / Jamesson / Hansen / &age= Ages: 24 / 26 / 42 / &food_requirements=Food requirements: Does it work"

This is my php(rsvp.php) form. I've tried some different stuff just to get some sort of value, but without any luck. I just receive an empty email.

<?php
   $email = 'from@mail.com';
   $message = 'firstname' . $firstname . '';
   $to = 'me@mail.com';
   mail($to, 'my subject', $message, $email);
?>

Please let me know what to do.

Answer 1

the Problem is here you expecting $firstname = $_POST['fname']; but passing firstname

var data = "&confirmation=Events: " + confirmation + "&firstname=First names: " + fname + "&lastname=Last names: " + lname + "&age=Ages: " + ages;