Retrieving data from form made in javascript - php

Question

I have uploaded a fiddle of my JS code (http://jsfiddle.net/3mcm2/), at the very bottom of which is the way in which I am calling the JS in my PHP document. In order to run the script, just remove the PHP code comments from the bottom. I just wanted to add that for you to see how I am outputting it in PHP. Also, above those last comments are three lines of comments in the .js file, which are there for you to see what it is that the PHP is echoing just to help you better understand how everything looks.
/* 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);
The above comment is only for you to see what this script is doing and those three lines are not actually in my .js file. the following comments are part of what is in my PHP file, pretty much just outputting the above comments:
$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>";
My problem is that with the form I created in the JS, the GET is not delivering any data. My php page is simply going from index.php to index.php? with the question mark, and not with any of the textbox variables following the question mark. For some reason, the form is not finding those textboxes that are created or their names. Please help me out.

Answer 1

This code:
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);
}
}
appends all your input text boxes to the body and not the form, so when you press Submit no data is being passed
fiddle with working code: http://jsfiddle.net/5H8Pv/1/