表单提交被完全忽略

Question

我正在尝试使用 AJAX 制作动态评论插入系统，但我的表单有问题：它甚至不会尝试执行 javascript 功能。相反，它只是执行 GET 操作并将我重定向到?user=&reply=&submit=Submit并且不执行任何操作。这是我的表单代码：

<form id="cmtsubmit" onsubmit="return submitComment(this);">
    <input type="text" name="user" id="user" />
    <textarea name="reply" id="reply"></textarea> 
    <input type="submit" name="submit" value="Submit" />
</form>

这是我的javascript代码：

function submitComment(form) {
    if (window.XMLhttpRequest) {
        httpRequest = new XMLhttpRequest();
    } else if (window.ActiveXObject) {
        httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
    }

    httpRequest.onreadystatechange = function() {
            if(httpRequest.readyState === 4 && httpRequest.status === 200) {
                document.getElementById('container').innerHTML += '<div style="border: 1px solid; padding: 15px;">' + httpRequest.responseText + '</div>';
                return false;
            } else {

            }
    }

        httpRequest.open('GET', 'index.php?p=cmtinsrt&user=' + form.user.value + '&cmt=' + form.reply.value, true);
        httpRequest.send(null);

}

我哪里错了？

编辑：我在代码中添加了“return false”，现在它可以在 IE10 中运行，但不能在 Firefox 或 Chrome 中运行。我还没有测试过任何其他浏览器，但很明显，如果它在这两个浏览器中不起作用，那就不是一个合适的解决方案。

Answer 1

内联 javascript 事件必须返回 false 以防止发生默认操作。例如，如果您有一个锚标记：

<a onclick="somefunction();" href="http://www.google.com">Go</a>

someFunction会被调用，但浏览器也会转到 Google。您已经得到了等式的第一部分，为了防止默认操作，您的内联事件应该是函数的返回：

<form onsubmit="return someFunction(this);">

...但someFunction必须实际返回一些东西才能有效。返回 true，浏览器将继续执行默认操作。返回 false，然后停止。

var someFunction =function (formElement) {
    // .. code
    return false; // prevents the form submit
}

如果您从 javascript 附加事件：

var ele = document.getElementById('myElement');
ele.addEventListener('click', someFunction);

...那么您还可以使用preventDefault事件对象的方法来停止默认操作：

var someFunction =function (e) {
    e.preventDefault();
    // .. code
    return false; // redundant if you preventDefault
}

显然，这不适用于您的内联事件用例。这样做的另一个好处是，即使处理程序函数中存在错误，也可以停止默认操作。如果出现错误并且您正在使用内联事件，则return false永远不会到达该语句，因此当您的函数失败时，默认操作将继续。

文档

• MDN 上的事件和处理程序- https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Overview_of_Events_and_Handlers
• Event对象 - https://developer.mozilla.org/en-US/docs/Web/API/Event
• Event.preventDefault- https://developer.mozilla.org/en-US/docs/Web/API/event.preventDefault