从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/