Создать дружественный к PHP массив для флажков с помощью jQuery

Question

Название вопроса, возможно, не очень объясняет, и я был бы очень признателен всем, кто может помочь мне с решением. Это особый случай, когда у меня нет доступа к файлу PHP и я не могу ничего там изменить, и мне нужно другое решение, которого я действительно нигде не смог найти.

Вот мой вопрос: У меня есть form со значением hidden:

<form id="myForm" action="" method="POST">
   <input type="hidden" name="colors[]" value="">
   <input type="submit">
</form>

Я также создал array создание с javascript с некоторыми значениями:

<script>
  var myArray = new Array();
  myArray.push('red');
  myArray.push('yellow');
  myArray.push('green');
</script>

Iтогда есть случайный button где-то нет страницы (не имеет значения где)

<button id="myButton">Add to hidden array</button>

Итак, я хочу сделать следующее: когда я нажимаю кнопку id="myButton", я хочу jQuery решение для добавления всех элементов из массива myArray в скрытое поле name="colors[]". Я знаю решение добавить их как JSON string к значению поля hidden, а затем использовать json_decode в моем файле PHP, чтобы прочитать array. Но дело в том, что у меня нет доступа к файлу PHP и я не могу изменить ранее написанные функции и логику. Файл PHP получает array из checkboxes, как это обычно делается стандартным способом, например:

<input type="checkbox" name="colors[]" value="green">
<input type="checkbox name="colors[]" value="red">
<input type="checkbox name="colors[]" value="yellow">

Есть ли способ поместить myArray в массиве colors []Поле hidden input без использования строк JSON и без необходимости что-либо изменять в файле PHP, так что PHP получает и обрабатывает поле colors как обычное array из checkboxes?

Answer 1

Вы можете добавить несколько скрытых входов в форму, каждый из которых отличается от массива.

$("#myButton").click(function() {
    $("#myForm [name='colors[]']").remove();
    $.each(myArray, function() {
        $("#myForm").append($("<input>", {
            type: "hidden",
            name: "colors[]",
            value: this
        }));
    });
});