JS-created form elements not submitting

I've got a form, with "regular" form elements, and then also form elements which are created by clicking a javascript button. Here's how it's called:

<script src="incld/addClass.js" language="Javascript" type="text/javascript">  
</script>  
<input type="button" value="Add a Class" onClick="addInput('dynamicInput');" class="add-class-btn">  

When I look at the $_POST output, though, these elements haven't been submitted.

Here's the JS:

var counter = 1;
var limit = 25;
function addInput(divName){
  if (counter == limit)  {
     alert("You have reached the limit of adding " + counter + " inputs");
  } else {
     var newdiv = document.createElement('div');
     newdiv.innerHTML = "Class " + (counter + 1) + "          <p><label for=\"class_name\">Class Name </label><input type=\"text\" name=\"class[" + (counter + 1) + "][name]\" id=\"class[" + (counter + 1) + "][name]\" class=\"text-fld\" /></p><p><label for=\"class_grade_level\">Grade Level </label><input type=\"text\" name=\"class[" + (counter + 1) + "][grade_level]\" id=\"class[" + (counter + 1) + "][grade_level]\" class=\"text-fld\" /></p><p><label开发者_运维问答 for=\"class_subject\">Subject </label><input type=\"text\" name=\"class[" + (counter + 1) + "][subject]\" id=\"class[" + (counter + 1) + "][subject]\" class=\"text-fld\" /></p>";
     document.getElementById(divName).appendChild(newdiv);
     counter++;
  }
}

Edit: The "regular" form elements are in a different div tag than the JS-created ones. Maybe this matters?

Edit2: Full (edited but ugly) source available here: http://pastebin.com/y5QJU4NN

---

I was able to copy your code and create a form that submitted without changing it. However, on the receiving side after the form was submitted, I wound up with a POST structure similar to this:

<?php
    var_dump($_POST);
?>

---

array(1) { 
    ["class"]=> array(1) { 
        [2]=> array(3) { 
            ["name"]=> string(5) "test1" 
            ["grade_level"]=> string(5) "test2" 
            ["subject"]=> string(5) "test3" 
        } 
    } 
} 

---

So it looks like the code you posted above works. Check to ensure that you are inspecting the right array level in the POST in your handler script.

---

Edit

It looks like PHP was not liking your use of array indices as field names. I am sure you can specify a field name such as class[] and PHP will capture all incoming fields with field name of class[] as an array, but I am not sure you can specify a field name like class[1][name]. I changed the field names in your JS to be something along the lines of:

<input type=\"text\" name=\"class-" + (counter + 1) + "-name\" 
    id=\"class[" + (counter + 1) + "][name]\" class=\"text-fld\" />

And after submitting it was inserted into the POST just fine. Try that and see if it works.