使用 javascript 提交动态多位置表单

Question

我正在尝试为我的网站编写一些 JavaScript，它将选择页面上的所有表单，在提交时添加事件侦听器，然后将提交的值路由到主操作页面和其他备用页面.

这是我目前所拥有的：

发送.php：

<script type="text/javascript">


    function post_to_url(path, params, method) {
        method = method || "post"; // Set method to post by default, if not specified.

        // The rest of this code assumes you are not using a library.
        // It can be made less wordy if you use one.
        var form = document.createElement("form");
        form.setAttribute("method", method);
        form.setAttribute("action", path);

        for(var key in params) {
            var hiddenField = document.createElement("input");
            hiddenField.setAttribute("type", "hidden");
            hiddenField.setAttribute("name", key);
            hiddenField.setAttribute("value", params[key]);

            form.appendChild(hiddenField);
        }

        document.body.appendChild(form);    // Not entirely sure if this is necessary
        form.submit();
    }

    function addEvent(elm, evType, fn, useCapture) {
        if (elm.addEventListener) {
            elm.addEventListener(evType, fn, useCapture);
            return true;
        }
        else if (elm.attachEvent) {
            var r = elm.attachEvent('on' + evType, fn);
            return r;
        }
        else {
            elm['on' + evType] = fn;
        }
    }

    function addLoadEvent(func) {
        var oldonload = window.onload;
        if (typeof window.onload != 'function') {
            window.onload = func;
        }
        else {
            window.onload = function() {
                oldonload();
                func();
            }
        }
    }

    function addSubmits() {
        var fs=document.forms;
        for(var i=0;i<fs.length;i++){
            //addEvent(fs[i],"submit",post_to_url('http://www.gwtwg.com/recieve.php', {'email' : 'test.com'}), false)
        }
    }

    addLoadEvent(addSubmits);
</script>

<form method="post" action="<?php echo $_SERVER["PHP_SELF"]; ?>">
    <input type="text" name="email" />
    <input type="submit" value="Submit!" />
</form>

现在脚本只是冻结了，但如果我替换：“post_to_url('http://www.gwtwg.com/recieve.php', {'email' : 'test.com'})” 和： “警报（“foobar”）”

我在加载页面和提交表单时收到警报。 （它应该只在提交按钮时发生）。

有什么想法吗？

Answer 1

所以，这里的问题实际上是您没有使用任何 JS 库。我个人建议您使用 jQuery，但任何主要的都可以。您展示的所有函数在各种 JS 库中都有更强大的等效项，因此当您可以免费将它们替换为经过更好测试、更强大的版本时，尝试调试它们是愚蠢的。

如果您使用 jQuery，以下是（我认为）您可以做您想做的事情的方法：

var URL = "http://www.gwtwg.com/recieve.php"; // Define your site's URL
$(function() { // setup an onReady (similar to onLoad) handler
    $("form") // get all forms on the page
        .submit(function() { // hook up an onSubmit handler to them
            var params = $(this).serialize(); // get this form's data
            $.post(URL, paprams);// POST the data your server
      });
});

现在，我还没有实际测试过这些，但它应该可以工作（即使没有，希望你明白）。另外，请注意它有多短？还有一个好处。但重要的是，如果您使用经过数百个眼球审查的既定代码，您将不会花时间重新发明轮子。此外，更重要的是，您不会浪费时间在互联网上恳求人们帮助您调试该轮子的版本；-)