從javascript中的表格檢索數據

Question

我已經上傳了我的JS代碼（http://jsfiddle.net/3mcm2/）的小提琴，它的最底部是我在我的PHP文檔中調用JS的方式。爲了運行該腳本，只需從底部刪除PHP代碼註釋。我只是想補充一點，讓你看看我如何在PHP中輸出它。另外，在最後的評論之上，還有三行註釋，它們可以幫助你瞭解PHP是如何迴應的，以幫助你更好地理解每件事的外觀。

/* The following is what is in my .js file: (see the bottom of this script for part of   
    what is in my PHP file) */ 

var f = document.createElement("form"); 
f.setAttribute('method', "get"); 
f.setAttribute('action', "index.php"); 

var Category = (function() { 
    var categoryCount = 0; 

    function elem(tag) { // shortcut 
     return document.createElement(tag); 
    } 

    function text(str) { // shortcut 
     return document.createTextNode(str); 
    } 

    function Category(node) { 
     var self = this; 
     this.categoryId = ++categoryCount; 
     // make add button 
     this.addButton = elem('button'); 
     this.addButton.appendChild(text('Add Textbox')); 
     this.addButton.addEventListener('click', function() { 
      self.addTextbox(); 
     }); 
     // make wrapper 
     this.wrapper = elem('section'); 
     this.wrapper.setAttribute('id', 'cat'+this.categoryId); 
     this.wrapper.appendChild(this.addButton); 
     // make textboxes 
     this.textboxes = []; 
     this.addTextbox(); 
     // append to document 
     if (node) { 
      this.append(node); 
     } 

    } 

    Category.prototype.addTextbox = function() { 
     var e = document.createElement("input"); 
     e.setAttribute('name', 'cat-'+this.categoryId+'-textbox[]'); 
     f.appendChild(e); // this is where each textbox is supposed to be added to the form... 
     this.textboxes.push(e); 
     this.wrapper.insertBefore(e, this.addButton); 
    }; 

    Category.prototype.append = function (node) { 
     return node.appendChild(this.wrapper); 
    }; 

    return Category; 
}()); 

var s = document.createElement("input"); //input element, Submit button 
s.setAttribute('type',"submit"); 
s.setAttribute('value',"Submit"); 
f.appendChild(s); 

//var cat1 = new Category(document.body); 
//var cat2 = new Category(document.body); 
//document.getElementsByTagName('body')[0].appendChild(f); 

上面的評論只是爲了讓你看看這個腳本在做什麼，而這三行實際上並不在我的.js文件中。下面的評論是什麼在我的PHP文件的一部分，非常簡單，只是輸出的上述評論：

$counter = 0; 
echo '<script type="text/javascript" src="js/categories.js"></script>'; 

foreach ($catArr as $category) { 
    $counter++; 
    echo 'do<script>var cat'.$counter.' = new Category(document.body);</script>'; 
} 

echo "<script>document.getElementsByTagName('body')[0].appendChild(f);</script>"; 

我的問題是，與我在JS創建的窗體中，GET不提供任何數據。我的PHP頁面只是從index.php到index.php？帶有問號，而不是問號後面的任何文本框變量。出於某種原因，該表單沒有找到創建的文本框或其名稱。請幫助我。

Answer 1

此代碼：

var cat1 = new Category(document.body); 
function Category(node) { 
     var self = this; 
     this.categoryId = ++categoryCount; 
     // make add button 
     this.addButton = elem('button'); 
     this.addButton.appendChild(text('Add Textbox')); 
     this.addButton.addEventListener('click', function() { 
      self.addTextbox(); 
     }); 
     // make wrapper 
     this.wrapper = elem('section'); 
     this.wrapper.setAttribute('id', 'cat'+this.categoryId); 
     this.wrapper.appendChild(this.addButton); 
     // make textboxes 
     this.textboxes = []; 
     this.addTextbox(); 
     // append to document 
     if (node) { 
      this.appendChild(node); 
     } 

    } 

附加您所有的輸入文本框的body而不是form，所以當你按提交沒有數據傳遞

撥弄工作代碼：http://jsfiddle.net/5H8Pv/1/