TransWikia.com

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

Stack Overflow на русском Asked on December 25, 2020

Я конечно понимаю, что это старый и много раз обсужденный вопрос, но я никак не могу понять, как это работает. Потратил уже больше месяца…
Буду очень признателен, если сможете понятно объяснить с примером, как это сделать имено через hidden-переменную, повесив событие на нажатие кнопки на форме OnClick. Я, к сожалению, даже не до конца понимаю принцип, как передать. Как забрать потом из $_POST мне понятно.

3 Answers

В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'));
  1. При отправке формы по onSubmit, должна происходить отправка данных из поля ввода на сервер в php. Но вот это почему-то не получается. В консоли $_POST не определена, на форме не выводится в браузер. В чем может быть дело?

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

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

Answered by Sturmer on December 25, 2020

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

Answered by XelaNimed on December 25, 2020

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

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

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

Answered by holden321 on December 25, 2020

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP