使用 JavaScript 将值数组分配给空的 HTML 标记

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>

我一直在尝试使用 JavaScript 将值从 check 转移到 selected。这是我目前所拥有的：

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. 为您的表单提供一个 id 以使用 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>

• 2. 添加以下脚本

<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>