title: Assign an array of values to an empty HTML tag with JavaScript
body: <p>I have some values in a table with the same tag name:</p>
  
  <pre><code>{% for groups in groupList %}
      &lt;tr&gt;
          &lt;td id="checkboxes"&gt;
              &lt;input type="checkbox" name="check" id="check_{{groups.GroupID}}"&gt;
          &lt;/td&gt;
      &lt;tr&gt;
  {% endfor %}
  </code></pre>
  
  <p>However I want this data to be somewhere else so I can use it in a form for a POST request. Here is my form HTML:</p>
  
  <pre><code>&lt;form method="post" enctype="multipart/form-data"&gt;
      {% csrf_token %}
      &lt;button type="submit" name="create"&gt; Create Report for Selected Items &lt;/button&gt;
      &lt;input type="hidden" name="selected" value="" /&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>I've been trying to transfer the values from <code>check</code> into <code>selected</code> using JavaScript. Here's what I have so far:</p>
  
  <pre><code>function getChecked()
          {
                  var checked = document.getElementsByName("check");
                  var i = 0;
                  for (a in checked)
                  {
                          document.getElementsByName("selected")[i].value = a.value;
                          i = i + 1;
                  }
          }
  </code></pre>
  
  <p>I've checked Google Chrome console and I'm getting this error:</p>
  
  <pre><code>Uncaught TypeError: Cannot set property 'value' of undefined
  at getChecked (1:75)
  </code></pre>
  
  <p>That highlights this line:</p>
  
  <pre><code>document.getElementsByName("selected")[i].value = a.value;
  </code></pre>
  
  <p>I'm not sure where I'm going wrong here. Can anyone help me out?</p>