JavaScript提交表单[重复]
Posted
技术标签:
【中文标题】JavaScript提交表单[重复]【英文标题】：JavaScript submit form [duplicate] 【发布时间】：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 属性，并且您的元素没有名称。如果您通过默认提交操作提交表单，这可能会导致您在服务器端检索数据的能力出现问题。从你的问题中我不清楚你是如何提交表格的。
【参考方案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>除此之外它看起来还不错。
【讨论】：
以上是关于JavaScript提交表单[重复]的主要内容，如果未能解决你的问题，请参考以下文章