object.onsubmit 事件未激活答案

【问题标题】：object.onsubmit event is not activatingobject.onsubmit 事件未激活
【发布时间】：2018-08-02 18:46:28
【问题描述】：

首先是我的代码，全部在一个 .hbs 文件中：

<form id='specialform'>
   <input name='about' type='hidden'>
   <div id='editor'><p>Type something :D</p></div>
    <button type='submit'>Reload</button>
</form>

<script>
var form = document.querySelector('#specialform');
form.onsubmit = function() {

    var about = document.querySelector('input[name=about]');
    about.value = JSON.stringify(quill.getContents());

    console.log('Submitted!');
    console.log('Submitted!', 'Serialized:', $(form).serialize(), 'Serialize Array:', $(form).serializeArray());

    alert('Open Console!');
    return false;
    }
</script>

现在，当我在测试时尝试按下提交按钮时，没有任何反应，而是预期的 console.log(...)。我到处寻找答案，希望你们能帮助我。我只是在学习 node.js 和 quilljs，这非常困难。谢谢您的帮助。我从这个预设https://quilljs.com/playground/#form-submit得到了代码。

编辑：将 document.querySelector('specialform') 修复为 document.querySelector('#specialform')，仍然不起作用。

EDIT2：函数现在用 } 关闭，只是在复制代码时忘记了。问题依然存在。

EDIT3：

做了一个虚拟函数：

form.onsubmit = function() {
    alert('This one works');
    console.log('Submitted!');
    return false;
}

如果没有返回 false，这将不起作用；声明，但可以使用它！我更改了原始函数并包含了返回，但它仍然无法正常工作。

编辑4：我又玩了一些虚拟函数，并隔离了问题。它源于这一行：

console.log('Submitted!', 'Serialized:', $(form).serialize(), 'Serialize Array:', $(form).serializeArray());

谁能告诉我为什么它不起作用？ :)

如果这样做，可以忽略该行的问题： function (e) { e.preventDefualt(); ... }，但更改只是“解决”问题（？）并不能解决问题。

编辑5：使用 e.preventDefault() 函数可以工作，但仍然没有第二个 console.log。所以显然车把的 $(form).serialize() 有问题，或者我太愚蠢了，看不到我的错误。感谢所有帮助过我的人！

编辑6：问题解决了！ $.(form).serialize() 使用 jquery 库，在 node.js 中使用起来并不容易，显然必须先导入。感谢所有帮助我解决问题的人！

【问题讨论】：

旁注，与下面的答案无关，您有语法错误。您需要使用 }; 关闭该功能；就在您的之前
在#3 中，您将要使用e.preventDefault()，而不是return false。您的表单提交和刷新页面是您最初的问题吗？
显然它确实做到了。我认为它什么也没做，但它几乎立即刷新了控制台 + 页面。
现在它不再刷新页面，仍然忽略 serialize() console.log。你能解释一下为什么我不应该使用 return false 而是 preventDefault() @mccambridge 吗？谢谢
在这种情况下，它们具有相同的效果。但是，当您覆盖默认行为时，最好使用event.preventDefault。您可能会遇到希望函数的返回值为false 并仍提交表单的情况。不是你的情况，但学习标准是个好主意。

标签： javascript node.js express quill

【解决方案1】：

试试这个

var form = document.querySelector('#specialform');

您在使用 id 选择器时遗漏了一个哈希

【讨论】：

因为我用的是带车把的express作为引擎和一些基本逻辑，所以我真的很想保留车把。
如果你使用它来阻止页面重新加载它应该可以工作 "form.onsubmit = function (e) { e.preventDefault() ..."=> codepen.io/anon/pen/jpxxvK
是的，它现在可以工作了，但这只是因为它跳过了带有 $(form).serialize() 的 console.log 行。我非常感谢你，但你知道那条线有什么问题吗？请参阅我的第四次编辑。 :)
它没有跳过它，jquery 没有在那里定义，现在它可以按预期工作 => codepen.io/anon/pen/jpxxvK
非常感谢您的帮助，我看到了它在您使用 html 时是如何工作的，但它仍然忽略了第二个 console.log 和我的 serialize()。只将第一件事记录到控制台中，可能是车把的问题..

【解决方案2】：

document.querySelector 需要一个有效的 CSS 选择器。

document.querySelector('specialform');

是说，嘿 JS —— 获取所有特殊形式的元素。如果您的页面上有 <specialform></specialform> 元素，那么这将起作用。

相反，您可能想要

document.querySelector('#specialform');

也就是说，嘿 JS —— 获取 ID 为 specialform 的所有元素。

【讨论】：

【解决方案3】：

var form = document.getElementById('specialform');

如果您知道您是通过 id 进行搜索，那么我会使用它。它比查询快，因为它不关心类属性等。如果您不确定查询选择器，它更不容易出错。在我看来，如果你的结构更复杂，querySelector 会更有意义。

【讨论】：

有道理。我会使用你的版本。