Checkbox in php contact form returns empty [duplicate]

This question already has an answer here:

• use jQuery to get values of selected checkboxes 7 answers

I've read several posts on this issues but nothing i'm implimenting seems to solve my problem.

I have a working 'contact form' that I want to add a checkbox to. I've done all the necessary html to get the checkbox working, but for some reason the email it generates doesn't contain the checked boxes.

This is the section of html (i've only included the 'phone' form as well as the 'area' checkbox entry just for reference... this is on a bootstrap 3 site):

<div class="control-group">

                    <div class="controls ">                            

                        <label for="phone">YOUR PHONE</label><br>

                        <input type="text" name="phone" id="phone" required data-validation-required-message="Please enter your phone" />

                    </div>

                </div>



                <div class="control-group">

                    <div class="controls">

                        <label for="area">SERVING AREA</label>
                        <p class="form-sub">Please indicate the area(s) you would like to serve in<br></p>
<input type="checkbox" name="area[]" value="PA-Tech"><label>PA and Tech</label><br>
<input type="checkbox" name="area[]" value="Publicity-comms"><label>Publicity and comms</label><br>
<input type="checkbox" name="area[]" value="Youth"><label>Youth (current DBS certificate will be required)</label><br>
<input type="checkbox" name="area[]" value="Kids"><label>Kids (current DBS certificate will be required)</label><br>
<input type="checkbox" name="area[]" value="Creche"><label>Creche and toddlers (current DBS certificate will be required)</label><br>
<input type="checkbox" name="area[]" value="First-Aid"><label>First Aid</label><br>
<input type="checkbox" name="area[]" value="Bookshop"><label>Bookshop</label><br>
<input type="checkbox" name="area[]" value="Sport-Social"><label>Running sports and social events</label><br>
<input type="checkbox" name="area[]" value="Security"><label>Security and stewarding</label><br>
<input type="checkbox" name="area[]" value="Registration"><label>Registration, welcome and info desk</label><br>
<input type="checkbox" name="area[]" value="Parking"><label>Car parking</label><br>
<input type="checkbox" name="area[]" value="Health-Safety"><label>Health and Safety</label><br><br>
                    </div>
                </div>

Submitting the form calls a js function:

// CONTACT FORM FUNCTION

var contact_send = function(){
'use strict';
var name        = $("#name").val();
var age         = $("#age").val();
var email       = $("#email").val();
var phone       = $("#phone").val();
var area        = $("#area").val();
var experience  = $("#experience").val();
var elder       = $("#elder").val();
var type        = $("#type").val();

     if ( name=="" ){ alert("Name area is empty!"); $("#name").focus(); }

else if ( age=="" ){ alert("Age is empty!"); $("#age").focus(); }

else if ( email=="" ){ alert("Email address area is empty!"); $("#email").focus(); }

else if ( phone=="" ){ alert("Phone number area is empty!"); $("#phone").focus(); }

else if ( area=="" ){ alert("Serving area is empty! Please tick some serving areas"); $("#area").focus(); }

else if ( experience=="" ){ alert("Experience area is empty!"); $("#experience").focus(); }

else if ( elder=="" ){ alert("Elder Contact area is empty!"); $("#elder").focus(); }

else if ( type=="" ){ alert("Register type isn't selected!"); $("#type").focus(); }

else {

    $.post("contact.send7b.php", { name:name, email:email, age:age, phone:phone, area:area, experience:experience, elder:elder, type:type }, function( result ){

        if ( result=="SUCCESS" ){

            alert("Thank You! Your contact form has been sent. (You should receive a copy to the address you have provided, but check your spam/junk)");

            setTimeout(function(){

                $("#name").val("");

                $("#age").val("");

                $("#email").val("");

                $("#phone").val("");

                $("#area").val("");

                $("#experience").val("");

                $("#elder").val("");

                $("#type").val("");

            }, 3000);

        } else {

            alert("Your contact form isn't sent. Please check fields and try again.");

        }
    });
}

};

Then as you can see the js calls a php script to send the mail, here is the part that creates the message:

$mail->msgHTML("Application to Serve at Together 2017: ".
        $_POST["type"]."<br /><br /> Name: ".
        $_POST["name"].". <br />Email: ".
        $_POST["email"].". <br />Phone: ".
        $_POST["phone"].". <br />Age: ".
        $_POST["age"]."<br /><br />Areas Interested in serving: ".
        implode(",", $_POST["area"])."<br />Previous Experience: ".
        $_POST["experience"]."<br /><br />Contact details for Elder: ".
        $_POST["elder"]);

//send the message, check for errors

if (!$mail->send()) { echo "ERROR"; } else { echo "SUCCESS"; }

The form sends, and resets (apart from the checkboxes) but When the email arrives it just says this:

--

Phone: +277936747485. Age: 34

Areas Interested in serving: Previous Experience: 19 years in live sound

--

At one point it was returning 'PA and Tech' (the first checkbox) but it would do that even though that option was not checked.

I've tried changing the name="area" tired in the form to include name="area[]" as it is above, tried including id="area[1]" id="area[2]" etc but nothing ever seems to work...