HTML Check list with PHP

Question

I have following form with action in PHP. I have used Check list to get the project names. If I select the projects in the list it is coming as Array, Array instead of the original value (i.e. Tatvam, Amairo, Vedam).

I am getting the message like this

jQuery(".form-js-contact").submit(function () {
    var thisform = jQuery(this);
    jQuery('.required-error',thisform).remove();
    var aname   = jQuery("#aname").val();
    var amail   = jQuery("#amail").val();
    var aphone  = jQuery("#aphone").val();
    var acomments   = jQuery("#acomments").val();
    var color   = jQuery("input[name='color[]']").serializeArray();

    var psubject    = jQuery("#psubject").val();

    var data = {'aname':aname,'amail':amail,'aphone':aphone,'acomments':acomments,'psubject':psubject,'color':color};
    if (aname == "") {
        jQuery("#aname").after('<span class="form-description required-error">Required field.</span>');
    }else {
        jQuery("#aname").parent().find('.required-error').remove();
    }
    if (amail == "") {
        jQuery("#amail").after('<span class="form-description required-error">Required field.</span>');
    }else {
        jQuery("#amail").parent().find('.required-error').remove();
    }
    if (aphone == "") {
        jQuery("#aphone").after('<span class="form-description required-error">Required field.</span>');
    }else {
        jQuery("#aphone").parent().find('.required-error').remove();
    }
    if (acomments == "") {
        jQuery("#acomments").after('<span class="form-description required-error">Required field.</span>');
    }else {
        jQuery("#acomments").parent().find('.required-error').remove();
    }



    if (aname != "" && amail != "" && aphone != "" && acomments != "" ) {
        jQuery.post("contact_us_contact.php",data,function (result) {
            if (result == "done") {
                thisform.prepend("<div class='alert-message success-contact'><p><strong>Thank you "+name+"!</strong> We'll be in touch real soon .</p></div>");
                jQuery("#aname").val("");
                jQuery("#amail").val("");
                jQuery("#aphone").val("");
                jQuery("#acomments").val("");

            }
        });
    }
    return false;
});

This is my HTML code

<form class="form-style form-js-contact" action="contact_us_contact.php" method="post">
                         <input type="hidden" name="psubject" id="psubject" value="Enquiry from Contact Page">
<div class="col-md-6 col-lg-6" >
<input class=required-item value="" name=aname id=aname aria-required=true placeholder="Your Name*"></div>
<div class="col-md-6 col-lg-6" ><input type=email class=required-item id=amail name=amail value="" aria-required=true placeholder="Your Email*"></div>
<div class="col-md-6 col-lg-12" ><input class=required-item aria-required=true id=aphone name=aphone value="" placeholder="Your Phone*"></div>

<div class="col-md-3" style="margin-bottom:10px; "><h4>Projects Interested</h4></div>
<div class="col-md-2" ><input name="color[]" id="color" class="check" type="checkbox" value="Amairo">Amairo</div>
<div class="col-md-2" ><input name="color[]" id="color" class="check" type="checkbox" value="Tatvam">Tatvam</div>
<div class="col-md-2" ><input name="color[]" id="color" class="check" type="checkbox" value="Vedam">Vedam</div>

<div class="col-md-6 col-lg-12" >
 <textarea name="acomments" id="acomments" class=required-item aria-required=true placeholder="Type Your Message*"></textarea></div>
 <div class="col-md-6 col-lg-6" >
<input style=font-size:16px name=submit type=submit value="Send Enquiry" class="submit_buttom buttonColor" id="Main_Contact_Form"></div>
</form>

This is my PHP

     <?php
     function clean_text($text='') {
     $text = trim($text);
     $text = strip_tags($text);
     $text = addslashes($text);
     $text = htmlspecialchars($text);
     return $text;
     }
   if (!$_POST) {
    die();
  }else {
  if (empty($_POST["aname"]) && empty($_POST["aphone"]) &&      empty($_POST["amail"])&& empty($_POST["acomments"]) ) {
    echo "all_empty";
}else if (empty($_POST["aname"])) {
    echo "empty_name";
}else if (empty($_POST["amail"])) {
    echo "empty_mail";
}else if (empty($_POST["aphone"])) {
    echo "empty_phone";
}else if (empty($_POST["acomments"])) {
    echo "empty_Comments";
}else {     
    $your_email = "mail@mydomain.com";      
    $aname   = clean_text($_POST["aname"]);
    $amail   = clean_text($_POST["amail"]);
    $aphone  = clean_text($_POST["aphone"]);
    $acomments   = clean_text($_POST["acomments"]);
    $wname = $_POST['color'];
    $psubject    = clean_text($_POST["psubject"]);
    $subject  = "$psubject"; 

    $headers  = "From: leads@mydomain.in". "\r\n";
    $headers .= 'Content-type: text/html; charset=UTF-8'. "\r\n";
    $msg      = "New Message \n\r <br>";
    $msg     .= "Name : \t $aname \r\n <br>";
    $msg     .= "Email : \t $amail \r\n<br>";       
    $msg    .= "Phone : \t $aphone \r\n<br>";   
    $msg    .= "Message : \t $acomments \r\n<br>";
    if (isset($wname)) {
    $msg    .= "Project(s) Interested: \r\n";
    $msg    .= "<ul> \r\n";
    foreach ($wname as $color){
    $msg    .="<li>" .$color. "</li>  \r\n";
 }

    $msg    .= "</ul>";

     } // isset

    echo "done";
    $done = @mail($your_email, $subject, $msg, $headers);
    }
}

?>

Answer 1

You are taking value of color in jquery with id jQuery("#color").val(); and as per HTML rule there is only one id with same name so you will get only one value. You have to replace like

> jQuery

var color = jQuery("input[name='color[]']").serializeArray();

and then you will get the all the values of color in PHP Code $wname = $_POST['color'];

Answer 2

Saw an error on your code

The following seems wrong

if (isset($_POST['wname'])) {...}

I believe it should be

if (isset($wname)) {...}

Answer 3

In your php code replace this

$wname      = $_POST['color'];

with

$wname      = implode( ",", $_POST['color']);

as you are passing name="color[]" from HTML as an array.