Как передать значение переменной из JS в php через hidden-переменную

Вcем, спасибо! Кажется понял как это должно работать, но у меня пока не работает до конца. Итак:

1. на форме с помощью HTML создается поле ввода формы input, поскольку оно имеет тип hidden, то его просто не видно в браузере, но в структуре DOM документа оно присутствует.

2. Чтобы индентифицировать это поле присваеваем ему имя в виде id или name. В примере, id="myField" . Далее пример моего кода:

   < form method = "POST" class="dynamic-input-form" > < input type="hidden" id="myField" value="Результат" />

3. При возникновении события на форме отрабатывает JS, формирует значение результирующей переменной. Поскольку JS имеет доступ к структуре документа DOM, то мы можем обратиться к элементу DOM по его имени, в моем случае id="myField". Значение переменной JS мы присваеваем элементу DОМ (полю в вода) по его имени (id). Это значение находится там, как будто его внес человек. Я даже провел эксперимент: заменил тип hidden, на text, в результате на форме появилось это дополнительное поле, по событию в этом поле появилось значение JS-переменной.

   < button type="button" class="get-value-btn" >Тест

Класс "get-value-btn" запускает JS передающий значение:

$('.get-value-btn').click(function () {
        document.getElementById('myField').value= JSON.stringify($('.dynamic-input-form').dynamicInputForm('value'));

4. При отправке формы по onSubmit, должна происходить отправка данных из поля ввода на сервер в php. Но вот это почему-то не получается. В консоли $_POST не определена, на форме не выводится в браузер. В чем может быть дело?

< button type="submit" class="get-value-btn" >Enter

PS Значение переменной JS изначально я является объкетом (массивом массивов), но перед передачей оно преобразовано в строкуJSON.stringify. Всем заранее спасибо за любую помощь.

<form action="script.php" method="POST" id="postForm">
  <input type="hidden" name="initVar" value="initVarValue" />
  <input type="submit" value="Send" />
</form>
<p>Var name<input type="text" id="varName" /></p>
<p>Var value <input type="text" id="varValue" /></p>
<p>
  <label for="isHidden">add as hidden</label>
  <input type="checkbox" id="isHidden" checked />
  <button id="addInput">Add input</button>
</p>

document.getElementById('addInput')
.addEventListener('click', function(e){

  let varName = document.getElementById('varName').value;
  let varValue = document.getElementById('varValue').value;

  if(varName !== ""){

      let input = document.createElement('input');
          input.type = document.getElementById('isHidden').checked ? "hidden" : "text";
          input.name = varName;
          input.value = varValue;

      document.getElementById('postForm').appendChild(input);
  }
});

Изучите формы. Тип hidden у поля делает поле скрытым на форме, и больше ничем не отличается от других полей. Отправляется форма по нажатию инпута с типом submit, то есть события onclick не нужно. Если хотите отправку формы без перезагрузки страницы, или отправку значения какой то переменной без перезагрузки страницы то это другой вопрос, никак не связанный с полем на форме типа hidden. Если вы хотите отправить значение переменной в таком поле вместе в формой, то просто измените значение этого поля.

var varToSend = "Содержимое переменной для отправки";

$('[name="hidden-field"]').val(varToSend);
// для такого поля:
// <input type="hidden" name="hidden-field">