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> 

什麼是我最好的解決方法？我該怎麼去做呢？

編輯：Div'readnode'被調用，並在需要時放置在窗體內，取代上面表單中看到的div'writenode'。這個div工作得很好。當我在'readnode'內添加另一個div（testdiv）時，放置在新div（testdiv）中的任何字段在使用$ _get時總是返回爲null。

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不再一部分，所以你永遠不會得到正確設置的名稱。你必須檢查孩子的孩子或使用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; 

     // ... 
    } 
}