jQuery combine input checkbox, dates and text values into one value string based on name-CodePudding

I am using the following php & jquery to process a simple product form within WordPress Admin which works fine for the input checkboxes. However, I am trying to combine a mix of both checkboxes AND text input fields as well as a date field into the one servicelist[] value.

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

Normally I would use something like servicestartdate: $("#servicestartdate").val(), however I need this to pull through with the servicelist[] value as the results will loop for however many products are selected. The values are then imploded in the email template.

My attempts are not working as I'm not experienced with jQuery and not sure how I can include text inputs with the code below. I have tried removing the :checked as well as replacing with :val yet this breaks the jQuery. I have also tried creating an additional value which also breaks the code.

Hope this makes sense. Any suggestions would be very helpful! Thanks.

Here is the full php, jquery and email code...

Form PHP & JQUERY: (Note: Make sure your path to email.php is correct)

<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<script>
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 (){}
        });
}
</script>

<div id="SupplierForm">
    <div id="EmailStatus"></div>
    <label><input type="text" name="ordernumber" id="ordernumber" value="1234567890">ID</label><br>
    <label><input  type="checkbox" name="servicelist[]" id="servicelist1" value="Service1">Service1</label><br>
    <label><input  type="checkbox" name="servicelist[]" id="servicelist2" value="Service2">Service2</label><br>
    <label><input  type="checkbox" name="servicelist[]" id="servicelist3" value="Service3">Service3</label><br>

    <label>Date: <input type="date" name="servicelist[]" id="servicestartdate"></label>
    <label>Price: <input type="text" name="servicelist[]" id="supplierpriceperlift" value="£16.75"></label>

    <div name="submit"  onClick="sendSupplierForm();">Send</div>
</div>

email.php (Note: Make sure you change the email addresses for it to work)

<?php
$mailto = "info@******.com";
$subject = "Test";
$headers = "From: info@******.com\nMIME-Version: 1.0\nContent-Type: text/html; charset=utf-8\n";

$seperate = implode("<br>",$_POST['servicelist']);

$message = "
<html>
<head>
  <title>Supplier Form Details</title>
</head>
<body>
  <p>Original Order Number: " . $_POST['ordernumber'] . "</p>
  <p>Service List: <br>" . $seperate . "</p>
</body>
</html>
";

$result1 = mail($mailto, $subject, $message, $headers);

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：

Try this

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

Here I am basically selecting elements with multiple selectors..

input[name='servicelist[]']:checked
#servicestartdate
#servicestartdate

and jQuery will return the full collection, which then you can iterate.