div внутри формы не «видно»

Question

У меня есть div внутри моей формы, который заполняется полем, основанным на значении окна выбора над ним. Это поле всегда возвращается как «null» при отправке, я помещал div вокруг других частей формы, чтобы проверить, действительно ли это был div, и каждое поле с div вокруг него продолжало возвращаться как «null».

<form> 
<span id="writenode"></span> 
<input type="button" value="Add language" onClick="addlanguage()" > 
<input type="submit" value="Submit" > 
</form> 

<!--This div below is called every time I want to add a new 'instance' of this form 
this div works fine, its when i add a div inside that one I get 'null'--> 

<div id="readnode" style="display: none"> 
    <select name="rank"> 
     <option disabled="disabled" selected="selected">Rating</option> 
     <option value="3">3</option> 
     <option value="2">2</option> 
     <option value="1">1</option> 
     <option value="0">0</option> 
    </select> 
    <select name="time"> 
     <option disabled="disabled" selected="selected">Time</option> 
     <option value="3">3</option> 
     <option value="2">2</option> 
     <option value="1">1</option> 
     <option value="0">0</option> 
    </select> 
    <input type="button" value="X" 
     onclick="this.parentNode.parentNode.removeChild(this.parentNode);" /> 
</div> 

Таким образом, код выше отлично работает, когда я добавляю div внутри, я получаю «null», как показано ниже;

<form> 
<span id="writenode"></span> 
<input type="button" value="Add language" onClick="addlanguage()" > 
<input type="submit" value="Submit" > 
</form> 

<!--This div below is called every time I want to add a new 'instance' of this form 
this div works fine, its when i add a div inside that one I get 'null'--> 

<div id="readnode" style="display: none"> 
    <select name="rank"> 
     <option disabled="disabled" selected="selected">Rating</option> 
     <option value="3">3</option> 
     <option value="2">2</option> 
     <option value="1">1</option> 
     <option value="0">0</option> 
    </select> 
<div id='testdiv'> 
    <select name="time"> 
     <option disabled="disabled" selected="selected">Time</option> 
     <option value="3">3</option> 
     <option value="2">2</option> 
     <option value="1">1</option> 
     <option value="0">0</option> 
    </select> 
</div> 
    <input type="button" value="X" 
     onclick="this.parentNode.parentNode.removeChild(this.parentNode);" /> 
</div> 

Какой у меня лучший способ обойти это? и как я буду заниматься этим?

EDIT: Div 'readnode' вызывается и помещается внутри формы при необходимости, заменяя div 'writenode', который отображается внутри формы выше. Этот div отлично работает. Когда я добавляю еще один div (testdiv) внутри «readnode», любые поля, помещенные внутри нового div (testdiv), всегда возвращаются как null при использовании $ _get.

EDIT2:

Функция, которая ставит readnode вместо writenode,

<script type="text/javascript"> 
/* Set the counter that will increase every time 
    the user adds a new language*/ 
var counter = 0; 
function addlanguage() 
{ 
    // Ask the user for input 
    var language = prompt("Language Name",""); 
    if (language == "" || language == null) 
    { 
     alert("Please enter a language."); 
    } 
    else 
    { 
     counter++; 
     // Find the element to be copied 
     var newNode = document.getElementById('readnode').cloneNode(true); 
     newNode.id = ''; 
     newNode.style.display = 'block'; 
     var newField = newNode.childNodes; 
     // Give all fields a unique value 
     for (var i=0;i<newField.length;i++) 
     { 
      var theName = newField[i].name; 
      var theId = newField[i].id; 
      if (theName) 
      { 
       newField[i].name = theName + counter; 
      } 
      if (theId == "languagename") 
      { 
       // Change the field to the user input 
       newField[i].innerHTML = language; 
      } 
      if (theName == "lang") 
      { 
       // Replace the hidden field with the correct language 
       newField[i].value = language; 
      } 
     } 
     // Insert the elements 
     var insertHere = document.getElementById('writenode'); 
     insertHere.parentNode.insertBefore(newNode,insertHere); 
    } 
} 
</script> 

и это PHP;

<?php 
if ($_GET["time1"] == null) 
{ ?> 
    <form> 
    <span id="writenode"></span> 
    <input type="button" value="Add language" onClick="addlanguage()" > 
    <input type="submit" value="Submit" > 
    </form> 
<?php 
} 
else 
{ 
    $final = 0; 
    $i = 1; 
    while($final == 0) 
    { 
     $gettime = "time" . $i; 
     $getRank = "rank" . $i; 
     $time = $_GET[$gettime]; 
     $rank = $_GET[$getRank]; 

     if ($language == "") 
     { 
      $final = 1; 
     } 

     if ($final == 0) 
     { 
      // Show the user the input 
      echo("<p>Your <strong>$time</strong> is <strong>$rank</strong>.</p>"); 
     } 
     $i++; 
    } 
} ?> 

Answer 1

Когда вы поместите его в DIV, это уже не часть newNode.childNodes, так что вы никогда не получите, чтобы установить имя правильно. Вам нужно будет проверить дочерние элементы childs или использовать jQuery для упрощения.

for (var i=0;i<newField.length;i++) 
     { 
    var subField = newField.childNodes; 


    for (var i=0;i<subField.length;i++) { 
      var theName = subField[i].name; 
      var theId = subField[i].id; 

     // ... 
    } 
}