Присвойте массив значений пустому тегу HTML с помощью JavaScript

Question

У меня есть некоторые значения в таблице с таким же именем тега:

{% for groups in groupList %}
    <tr>
        <td id="checkboxes">
            <input type="checkbox" name="check" id="check_{{groups.GroupID}}">
        </td>
    <tr>
{% endfor %}

Однако я хочу, чтобы эти данные были где-то еще, поэтому я могу использовать их в форме для запроса POST. Вот моя форма HTML:

<form method="post" enctype="multipart/form-data">
    {% csrf_token %}
    <button type="submit" name="create"> Create Report for Selected Items </button>
    <input type="hidden" name="selected" value="" />
</form>

Я пытался перевести значения из check в selected, используя JavaScript. Вот что у меня получилось:

function getChecked()
        {
                var checked = document.getElementsByName("check");
                var i = 0;
                for (a in checked)
                {
                        document.getElementsByName("selected")[i].value = a.value;
                        i = i + 1;
                }
        }

Я проверил консоль Google Chrome и получаю эту ошибку:

Uncaught TypeError: Cannot set property 'value' of undefined
at getChecked (1:75)

Это выдвигает на первый план эту строку:

document.getElementsByName("selected")[i].value = a.value;

Я не уверен, где я иду не так здесь. Кто-нибудь может мне помочь?

Answer 1

Одним из решений может быть отправка id выбранных флажков в виде массива скрытых входов .

Например, если вы установили флажок check_1 , check_2 и check_3 , вы можете построить форму как

<form ...>
  <input type="hidden" name="selected[]" value="checkbox_1"/>
  <input type="hidden" name="selected[]" value="checkbox_2"/>
  <input type="hidden" name="selected[]" value="checkbox_3"/>

  <input type="submit" ... />
</form>

На вашем сервере вы получите selected как массив

request.POST['selected'] // ["checkbox_1", "checkbox_2", "checkbox_3"]

Чтобы создать все скрытые входы, когда пользователь нажимает кнопку отправки, вы можете сделать:

• 1. дать идентификатор к вашей форме для доступа к ней думал javascript

<form id="my-form" method="post" enctype="multipart/form-data">
  {% csrf_token %}
  <button type="submit" name="create"> Create Report for Selected Items 
  </button>
</form>

• добавить следующий скрипт

<script>
var form = document.getElementById('my-form');  // get the form

// when the user submit the form execute the following function
form.onsubmit = function() {
  document.getElementsByName('check')  // get all checkboxes
    .forEach(function(checkInput) {
      // if the checkbox is selected
      if (checkInput.checked) {
        // create a new hidden input and add into the form
        var hiddenInput = document.createElement('input');
        hiddenInput.setAttribute('type', 'hidden');
        hiddenInput.setAttribute('name', 'selected[]');
        hiddenInput.setAttribute('value', checkInput.getAttribute('id'));
        form.appendChild(hiddenInput);
      }
    });
  return true;  // return true to continue the submit execution
};
</script>