jQuery Ajax PHP Email form only returning first checkbox value-CodePudding

I am trying to use jQuery for the first time and have a problem returning multiple checkbox values. I thought the following jQuery was correct, however it only returns the first value 'BLACK' in the email regardless of what is selected.

Any advice on how to return the selected checkboxes as a list would be much appreciated! Thank you.

*** UPDATED checkbox ID's to be different from each other ***

PHP & jQUERY:

<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<script>
function sendSupplierForm() {
            
            var data = {
                ordernumber: $("#ordernumber").val(),
                servicelist: $("#servicelist").val(),
            };

            jQuery.ajax({
            url: "email.php",
            data: data,
            dataType:'text',
            type: "POST",
            success:function(data){
            $("#EmailStatus").html(data);
            },
            error:function (){}
            });
}
</script>

<div id="SupplierForm">
           <div id="EmailStatus"></div>
           <input type="text" name="ordernumber" id="ordernumber" value="456122"><br>
           <input  type="checkbox" name="servicelist[]" id="servicelist1" value="BLACK">Black<br>
           <input  type="checkbox" name="servicelist[]" id="servicelist2" value="RED">Red<br>
           <input  type="checkbox" name="servicelist[]" id="servicelist3" value="YELLOW">Yellow<br>
           <div name="submit"  onClick="sendSupplierForm();">Send</div>
</div>

email.php

<?php
$mailto = "info@******.com";
$subject = "Test Form";
$headers = "From: info@******.com\nMIME-Version: 1.0\nContent-Type: text/html; charset=utf-8\n";
$message = "
<html>
<head>
       <title>Supplier Form Details</title>
</head>
<body>
       <p>Original Order Number: " . $_POST['ordernumber'] . "</p>
       <p>Service List: " . $_POST['servicelist'] . "</p>
</body>
</html>
";

// PHP MAILER FUNCTION
$result1 = mail($mailto, $subject, $message, $headers);

// PHP MAILER MESSAGE
if ($result1) {
       print "<p class='success'>SUCCESS!!! The details have been sent.</p>";
       } else {
       print "<p class='Error'>ERROR... Sorry there is a problem sending the details.</p>";
}
?>

CodePudding user response：

Jquery by default selects the first element so you should take all checkboxes and collect values

function sendSupplierForm() {
        
         let values = [];
        $("input[name='servicelist']:checked").each(function() {
             values.push($(this).val());
        });
        var data = {
            ordernumber: $("#ordernumber").val(),
            servicelist: values
        };

        jQuery.ajax({
        url: "email.php",
        data: data,
        dataType:'text',
        type: "POST",
        success:function(data){
        $("#EmailStatus").html(data);
        },
        error:function (){}
        });

}

Also, you have added the same id for all checkboxes, it is incorrect.

CodePudding user response：

The POST values are to be received in the email.php. You cannot treat the servicelist key as a string it is an array of values therefore, you need to loop through Like this.

"<body>";
    "<p>Original Order Number: " . $_POST['ordernumber'] . "</p>";
    "<p>Service List: ";
        //these lines can be written above.
        $seperate = implode(",",$_POST['servicelist']);
        $serviceList = trim(",",$seperate);
        //these lines can be written above.
        echo $serviceList;
    "</p>";
"</body>";

I hope this solves your problem :).