php - jQuery If checkbox in foreach loop is checked, include checkboxes and input values within that loop
I am creating a php email form with a foreach loop which creates a checkbox with several other checkboxes and input fields within the foreach loop. The loop might repeat several times, creating several sets of checkboxes, however I only want to include the checked checkbox and associated fields, not all of those within every loop. Only those selected would then be included in the 'servicelist' array and email.php.
My code below is incorrect as it is gathering all of the data from every loop. I understand this is because the input fields are populated with data, so the data is added to the array.
I think I need to add an 'if' statement to my jQuery, but I'm not sure how? I have tried changing the jQuery line 'if (checkbox.is(":checked"))' with the below line of code without success.
if ($("input[data-name='servicetitle[]'").prop(":checked")) {
PHP Form:
foreach ( $order->get_items() as $item_id => $item ) {
// Main checkbox to check if selected
echo '<div data-name="sup-checkbox-title[]">';
echo '<label for="servicetitle">Service:</label><br>';
echo '<input type="checkbox" id="servicetitle" data-name="servicetitle[]" value="' . $item->get_name() . '"><span>' . $item->get_name() .'</span><br>';
echo '</div><br>';
// Sub checkboxes and input fields to include in array if above checkbox checked
echo '<div data-name="sup-input[]"><br>';
echo '<label for="weightallowance">Weight Allowance Per Bin:</label><br>';
echo '<input type="text" id="weightallowance" value="Weight1" ><br>';
echo '</div><br>';
echo '<div data-name="sup-input-date[]">';
echo '<label for="servicestartdate">Service Start Date:</label><br>';
echo '<input type="date" id="servicestartdate" class="sup-required"><br>';
echo '</div><br>';
echo '<div data-name="sup-checkbox[]">';
echo '<label for="routenumberAln1">Route Number:</label><br>';
echo '<input type="checkbox" id="routenumberAln1" value="Aln1" >Aln1<br>';
echo '</div><br>';
echo '<div data-name="sup-input-costs[]">';
echo '<label for="supplierpriceperlift">Supplier Price Per Lift:</label><br>';
echo '<input type="text" id="supplierpriceperlift" value="??16.75"><br>';
echo '</div><br>';
}
echo '<div name="submit" class="button btnAction" onClick="sendSupplierForm();">Send Email</div>';
jQuery:
function sendSupplierForm() {
let values = [];
$("div[data-name='sup-checkbox-title[]'], div[data-name='sup-input[]'], div[data-name='sup-input-date[]'], div[data-name='sup-checkbox[]'], div[data-name='sup-input-costs[]']").each(function() {
const label = $(this).find('label');
const checkbox = $(this).find('input[type="checkbox"]');
const input = $(this).find('input[type="text"]');
const date = $(this).find('input[type="date"]');
if (checkbox.is(":checked")) {
values.push(label.html(), checkbox.val());
}
if (input.val()) {
values.push(label.html(), input.val());
}
if (date.val()) {
values.push(label.html(), date.val());
}
});
var data = {
servicelist: values,
};
jQuery.ajax({
url: "email.php",
data: data,
dataType:'text',
type: "POST",
success:function(data){
$("#EmailStatus").html(data);
},
error:function (){}
});
}
email.php
$mailto = "info@******.com";
$subject = "Test";
$headers = "From: info@******.com\nMIME-Version: 1.0\nContent-Type: text/html; charset=utf-8\n";
$serviceinfo = implode("<br>",array_map(function($i){
return implode(" ",$i);
},array_chunk($_POST['servicelist'],2)));
$message = "
<html>
<head>
<title>Form Details</title>
</head>
<body>
<p>" . $serviceinfo . "</p>
</body>
</html>
";
// PHP MAILER FUNCTION
$result1 = mail($mailto, $subject, $message, $headers);
// PHP MAILER MESSAGE
if ($result1) {
print "<div id='EmailStatusSuccess'>SUCCESS!!! The details have been sent.</div><br>";
} else {
print "<div id='EmailStatusFail'>ERROR... Sorry there is a problem sending the details. Please check and retry.</div><br>";
}
Answer
Solution:
I would suggest having unique IDs for your inputs. But with small adaptation to your code you can achieve what you want. Even though would be nice to know what your end goal is so we could guide you to a better solution.
to begin with you can wrap each group of inputs under a single <div> let's call it <div class='row-item'>
foreach ( $order->get_items() as $item_id => $item ) {
echo '<div class="row-item">';
.... // rest of the code
echo '</div>';
}
then you could use a similar to this jQuery code
let values = [];
$(".row-item").each(function() {
const checkbox = $(this).find('input[type="checkbox"]');
if (!checkbox.is(":checked")) {
return;
}
$(this).find("div").each(function(){
const val = $(this).find("input").val();
if (!val){
return;
}
values.push($(this).find("label").html(), val);
});
what does this code do?
It loops through the newly added div then find the checkbox in that div and skips the processing if the checkbox is not checked.
Then I noticed that what you tried to do is to basically push in an array the combination of label and value. So you could simply go through each <div> element under the .row-item and add the label and val combinations.
I also created a small example for you in JSFiddle that has hardcoded the HTML instead of the PHP code.
https://jsfiddle.net/yjLqseax/5/
Answer
Solution:
You must utilize the unique id of each item. Below is the code (I used test data):
<?php
$data = array(
1 => array(
'name' => 'Jack'
),
2 => array(
'name' => 'John'
),
3 => array(
'name' => 'Josh'
),
);
foreach ( $data as $item_id => $item ) {
echo "
I hope it helps.