skip to Main Content

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


  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/

    Login or Signup to reply.
  2. 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.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search