jQuery If checkbox in foreach loop is checked, include checkboxes and input values within that loop

Question

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>";
}

-----------------------------------------
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());
                    }
                
                
                }); 
        })

knetsi · Accepted Answer · 2022-09-24 10:25:34Z

1

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/

edited Sep 24, 2022 at 10:25

answered Sep 24, 2022 at 10:20

knetsi

1,6211 gold badge17 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

DSmit Over a year ago

Thank you, I will try this shortly. I have added more information to my original question as requested.

DSmit Over a year ago

Hi @knetsi, thanks again for the code. It has helped me get the solution I was looking for. I've updated my original question to include the code I'm using.

D. Dimopoulos · Accepted Answer · 2022-09-24 10:33:36Z

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 "-----------------------------------------------------------------";

        // set the id of this item
        echo '<div data-name="sup-checkbox-ids[]">';
        echo '<input type="hidden" name="item_id" value="'.$item_id.'" >';
        echo '</div>';

        // 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_'.$item_id.'" data-name="servicetitle[]" value="' . $item['name'] . '"><span>' . $item['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>';

    }

?>

<button id="select_values">Select values<button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<script>

    let values = [];

    $("#select_values").click(function(){

        var current_id = 0

        $("div[data-name='sup-checkbox-ids[]'], 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 id = $(this).find('input[name="item_id"]');
            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(id.val()){
                console.log('Current id is:'+id.val());
                current_id = id.val();
            }

            if($('#servicetitle_'+current_id).is(':checked')){

                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());
                }
            }

        });

        console.log(values); // Print the selected values, based upon the checkbox

        values = []; // empty values
    })


</script>

I hope it helps.

Collectives™ on Stack Overflow

jQuery If checkbox in foreach loop is checked, include checkboxes and input values within that loop

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related