Get value of hidden inpute to $_POST

Question

I've assigned a hidden input into my form which will store values of checked checkboxes (that part is working fine as can be seen in this picture):

The value of this hidden input is converted to a string By the way, in order to perform explode on it later.

When I try to access it in PHP via var_dump(['distribution']) I get this data: string(0) "".

Code on php side:

if(isset($_POST['distribution'])){
  var_dump($_POST['distribution']);
  die;
}

just in case, here is my html: <input type="hidden" name="distribution[]" />

and here is my JS:

function isChecked(){
    let distributionEL = document.querySelector("[name='distribution[]']");
    console.log(distributionEL.value);
    sendingLists.forEach(function(list) {
      let sendSMSArr = distributionEL.value.split(',');
        if(list.checked == true){
          sendSMSArr.push(list.value);
        } else {
          let index = sendSMSArr.indexOf(list.value)
          if (index > -1) {
            sendSMSArr.splice(index, 1);
          }
      }
      distributionEL.value = sendSMSArr.join(',');
  });
}

Update:

I've used name='distribution[]' when creating the inputs and its working, but, when someone uses the search bar which creates checkboxes according to the query it won't accumulate values from pre search and post search.

my ajax:

const resToHtml = res => {
// create a virtual fragment where we will create all the HTML in
let resultDiv = document.createElement('div');

// iterates on each option
res.forEach(({
sendingListName,
sendingListID
}) => {

// create an <li>
let liEl = document.createElement('li');


// create a <span> and an <input>
let spanEl = document.createElement('span');
let inputEl = document.createElement('input');

// create class attribute and append it to input
let elementClass = document.createAttribute("class");
let nameClass = document.createAttribute("name");
elementClass.value = "sending-lists"; 
nameClass.value = "distribution[]"; 
inputEl.setAttributeNode(elementClass);
inputEl.setAttributeNode(nameClass);

    // the <span> will hold the visible text
    spanEl.textContent = sendingListName;

    // the <input> will be a checkbox with a value
inputEl.type = "checkbox";
inputEl.value = sendingListID;
inputEl.name = 'distribution[]';



// put the <input> and the <span> inside the <div>
liEl.appendChild(inputEl);
liEl.appendChild(spanEl);

    // add the <li> into the <div>
resultDiv.appendChild(liEl);
})

// apply all the elements into the <div>
listREl.innerHTML = '';
listREl.innerHTML = resultDiv.innerHTML;
}

Answer 1

Why use JS to append values and store as a string when you can just access them as an array in PHP if you use proper naming?

<form name="demo" method="POST" action="<?php print($_SERVER['PHP_SELF']); ?>">
<input type=checkbox name="checkbox[]" value="val1"> check 1<br />
<input type=checkbox name="checkbox[]" value="val2"> check 2<br />
<input type=checkbox name="checkbox[]" value="val3"> check 3<br />
<input type=submit name=submit value="submit">
</form>

Then in the PHP you can access the values :

<?php

  print("Selected checkbox values were: ".implode(",",$_POST['checkbox']))."<br />");

?>