JavaScript提交表单[重复]答案

【问题标题】：JavaScript submit form [duplicate]JavaScript提交表单[重复]
【发布时间】：2022-01-09 09:59:22
【问题描述】：

大家好，感谢您的宝贵时间。我在 JS 中提交表单时遇到问题。显然我的表单的值为“null”，但我不知道为什么。你能帮我吗，我是 JS 新手。

HTML：

<form id="form">
  <input type="text" id="username" placeholder="Username" required>
  <input type="email" id="email" placeholder="Email" required>
  <input type="submit" value="Register">
</form>

JS：

var form = document.getElementById('form')

form.addEventListener('submit',function(event){
  event.preventDefault()

  var username = document.getElementById("username").value
   console.log(username)
    
      var email = document.getElementById("email").value
      console.log(email)
    })

错误按摩：未捕获的 TypeError：无法读取 null 的属性（正在读取 'addEventListener'）

【问题讨论】：

你是如何加载/运行你的 Javascript 的？确保等到 DOM 加载完毕，即使用 DOMContentLoaded event。
嗯，你是如何在你的 HTML 页面中执行 JS 的？你能展示你的整个 HTML 吗？
提交表单时，使用元素的name 属性，并且您的元素没有名称。如果您通过默认提交操作提交表单，这可能会导致您在服务器端检索数据的能力出现问题。从你的问题中我不清楚你是如何提交表格的。

标签： javascript html submit

【解决方案1】：

请确保您首先像这样加载您的 html：

<body>
  <form id="form">
    <input type="text" id="username" placeholder="Username" required>
    <input type="email" id="email" placeholder="Email" required>
    <input type="submit" value="Register">
  </form>
  <!--Javascript-->
  <script>
    var form = document.getElementById('form')

    form.addEventListener('submit',function(event){
      event.preventDefault()

      var username = document.getElementById("username").value
      console.log(username)
    
      var email = document.getElementById("email").value
      console.log(email)
    })
  </script>
</body>

除此之外它看起来还不错。

【讨论】：