Извлечение данных из формы, сделанных в javascript

Question

Я загрузил скрипт моего кода JS (http://jsfiddle.net/3mcm2/), в самом низу которого я называю JS в своем PHP-документе. Чтобы запустить скрипт, просто удалите комментарии PHP-кода снизу. Я просто хотел добавить это для вас, чтобы посмотреть, как я выводил его в PHP. Кроме того, над этими последними комментариями есть три строки комментариев в файле .js, которые есть для вас, чтобы увидеть, что это такое, что 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, поэтому при нажатии кнопки Submit данных не передаются

скрипки с рабочим кодом: http://jsfiddle.net/5H8Pv/1/