Question

我已经上传了我的JS代码（http://jsfiddle.net/3mcm2/）的小提琴，其最底层是我在PHP文档中调用JS的方式。要运行脚本，只需从底部删除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，因此当您按“提交”时，不会传递任何数据

摆弄工作代码：http://jsfiddle.net/5H8Pv/1/

从javascript中制作的表单中检索数据

1 个答案: