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@******.comnMIME-Version: 1.0nContent-Type: text/html; charset=utf-8n";
$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>";
}
—————————————–
EDIT: SOLUTION
—————————————–
Thanks to the answer from @knetsi, I was able to create the following code which fixed my issue. Basically the code looks for a div with the class of ".service-row-items" and then looks for all checkboxes named "servicelist[]". All labels & inputs (text, date, checkbox etc) are then gathered and used in the array.
let values = [];
$(".service-row-items").each(function() {
const checkboxtitle = $(this).find('input[name="servicelist[]"]');
if (!checkboxtitle.is(":checked")) {
return;
}
$(this).find("span").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"]');
const number = $(this).find('input[type="number"]');
const textarea = $(this).find('textarea');
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());
}
if (number.val()) {
values.push(label.html(), number.val());
}
if (textarea.val()) {
values.push(label.html(), textarea.val());
}
});
})
2
Answers
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'>then you could use a similar to this jQuery code
what does this code do?
It loops through the newly added
divthen 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-itemand 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/
You must utilize the unique id of each item.
Below is the code (I used test data):
I hope it helps.