如何修复 "undefined is not an object (evaluating 'form.submit.addEventListener')"

Question

我在尝试使用基本的 AJAX 表单时遇到了很多麻烦，我对当前的问题特别困惑。我有一些代码总是出错。这是错误消息：

undefined is not an object (evaluating 'form.submit.addEventListener')

...这里是导致错误的代码位：

form.submit.addEventListener('click', () => {

  console.log('button pressed!');

});

老实说，我不知道为什么，因为我正在使用箭头函数，所以它不应该是未定义的吧？我是 javascript 的新手，所以我可能错过了一些我现在非常困惑的东西。

Answer 1

如果您想 AJAXify 您的表单，请收听表单 submit 事件，而不是按钮点击。

const form = document.querySelector("#formidable");

form.addEventListener("submit", async (ev) => {

  ev.preventDefault(); // prevent browser triggering action
  console.log('Someone tried to submit my formidable form!');

  // Than do your Ajax Magic!
  const response = await fetch(form.action, {
    method: form.method || "post",
    body: new FormData(form)
  });

  const result = await response.json();
  console.log(result.message); // log the response JSON from server!

});

如果没有延迟，请确保将您的 <script> 标记放在结束 </body> 标记之前，以确保 DOM 已被解析并准备就绪。

如何修复 "undefined is not an object (evaluating 'form.submit.addEventListener')"

how to fix "undefined is not an object (evaluating 'form.submit.addEventListener')"

javascript

ajax

undefined