Generate arrays using dynamically generated forms

Question

Basically, I'm using JavaScript to dynamically generate a form that allows from multiple entries within a single submission. Here's the code I'm using for that:

function addEvent()
{
 var ni = document.getElementById('myDiv');
 var numi = document.getElementById('theValue');
 var num = (document.getElementById('theValue').value - 1) + 2;
 numi.value = num;
 var divIdName = 'my' + num + 'Div';
 var newdiv = document.createElement('div');
 newdiv.setAttribute('id', divIdName);
 newdiv.innerHTML = '<table id="style" style="background-color: #ffffff;"><tr><td colspan="2">Entry ' + num + '<hr \/><\/td><\/tr><tr><td><label>Item 1: <\/td><td><input name="item1_' + num + '" value="" type="text" id="item1" \/><\/label><\/td><\/tr><tr><td><label>Item 2: <\/td><td><input name="item2_' + num + '" type="text" id="item2" \/><\/label><\/td><\/tr><tr><td><label>Item 3: <\/td><td><input type="text" name="item3_' + num + '" id="item3" \/><\/label><\/td><\/tr><tr><td><label>Item 4: <\/td><td><select name="item4_' + num + '" id="item4"><option value="---">---<\/option><option value="opt_1">1<\/option><option value="opt_2">2<\/option><option value="opt_3">3<\/option><option value="opt_4">4<\/option><\/select><\/label><\/td><\/tr><\/table>';
 ni.appendChild(newdiv);
}

This works just fine, generating the entries fields I need. Using console in-browser, I've even verified all the names are correct. The issue is that I need to then take the selections and generate output. I've tried several methods, but everything resulted in null values.

function generateVideo()
{
 var entries = document.getElementById('theValue').value;
 var item1 = {};
 var item2 = {};
 var item3 = {};
 var item4 = {};
 for(i = 1; i <= entries; i++)
 {
  item1[i - 1] = document.getElementById('item1_' + i);
  item2[i - 1] = document.getElementById('item2_' + i);
  item3[i - 1] = document.getElementById('item3_' + i);
  item4[i - 1] = document.getElementById('item4_' + i);
 }
 var code = 'Copy code and paste it into Notepad<br \/>"Save as" filename.html<br \/><textarea name="" cols="45" rows="34">header template\n';
 for(i = 0; i < entries; i++)
 {
  if(i != (entries - 1))
  {
   code = code + '     ["' + item1[i] + '", "' + item2[i] + '", "' + item3[i] + '", "' + item4[i] + '"],\n';
  }
  else
  {
   code = code + '     ["' + item1[i] + '", "' + item2[i] + '", "' + item3[i] + '", "' + item4[i] + '"]\n';
  }
 }
 code = code + 'footer template<\/textarea>';
 var result = document.getElementById("result");
 result.innerHTML = code;
}

The output is as follows:

Copy code and paste it into Notepad<br />"Save as" CourseName_Unit_Chapter.html<br /><textarea name="" cols="45" rows="34">header template
     ["null", "null", "null", "null"]
footer template</textarea>

Now, certain fields can be null, that's fine (I'll do form validation after I get it working), but I'm getting null for every field regardless of what is entered.

I, originally, had the .value on the getElementByIds, but that only results in the script not running when the entries variable is greater than 0 (default), which is why I tried removing them.

function generateVideo()
{
 var entries = document.getElementById('theValue').value;
 var item1 = {};
 var item2 = {};
 var item3 = {};
 var item4 = {};
 for(i = 1; i <= entries; i++)
 {
  item1[i - 1] = document.getElementById('item1_' + i).value;
  item2[i - 1] = document.getElementById('item2_' + i).value;
  item3[i - 1] = document.getElementById('item3_' + i).value;
  item4[i - 1] = document.getElementById('item4_' + i).value;
 }
 var code = 'Copy code and paste it into Notepad<br \/>"Save as" filename.html<br \/><textarea name="" cols="45" rows="34">header template\n';
 for(i = 0; i < entries; i++)
 {
  if(i != (entries - 1))
  {
   code = code + '     ["' + item1[i] + '", "' + item2[i] + '", "' + item3[i] + '", "' + item4[i] + '"],\n';
  }
  else
  {
   code = code + '     ["' + item1[i] + '", "' + item2[i] + '", "' + item3[i] + '", "' + item4[i] + '"]\n';
  }
 }
 code = code + 'footer template<\/textarea>';
 var result = document.getElementById("result");
 result.innerHTML = code;
}

I've also tried variations of multidimensional arrays, instead of four arrays, but got the same results.

The output, as indicated by the removal of the .value on the getElementByIds, is good. Basically, there is something wrong with my attempts to populate the arrays using the dynamically generated forms.

I suspect that the issue with the declaration of the element ID, but I'm not sure how else to declare it. This style of scripting is not my norm. ^^'

Anyone have any ideas on how to fix the for loop to generate the array?

Answer 1

replace all occurences of

itemN[i] 

with

itemN[i].value

if that doesnt work add

console.log( itemN[i] )

and see what it outputs