时间戳

首页 > 解决方案 > 为什么输入值是这种形式的空字符串？

javascript - 为什么输入值是这种形式的空字符串？

问题描述

我知道这应该很简单，但我仍然无法意识到问题所在。我已经使用用于变量的 Id 创建了表单，然后在提交后我想查看输入的值，但我得到“”。

<form action="signIn.html" method="get">
<input type="text" name="name" id="names" placeholder="Name">
<input type="email" name="email" id="email" placeholder="Email">
<input type="password" name="password" id="password" placeholder="Password">
<label for="terms">
<input type="checkbox" name="terms" id="terms" value="terms">I agree to the Terms and Privacy Policy
</label>
  <div class="button">
  <input class="btn signUp" type="submit" value="Sign Up">                            
  </div>

const formulario = document.querySelector("form");
const nombre = document.querySelector("#names").value;
const email = document.querySelector("#email").value;
const password = document.querySelector("#password").value;
let correctData = [];
let errors = [];


formulario.addEventListener("submit", (e) => {
    e.preventDefault()
     console.log(nombre)
    console.log(email)
    console.log(password)
});

标签： javascripthtmlinputreturn-value

解决方案

您正在检索页面加载时输入的值（这是一个空白字符串，因为最初输入没有值）。

相反，获取事件处理程序的value内部。submit

const formulario = document.querySelector("form");
const nombre = document.querySelector("#names");
const email = document.querySelector("#email");
const password = document.querySelector("#password");
let correctData = [];
let errors = [];


formulario.addEventListener("submit", (e) => {
  e.preventDefault()
  console.log(nombre.value)
  console.log(email.value)
  console.log(password.value)
});
<form action="signIn.html" method="get">
  <input type="text" name="name" id="names" placeholder="Name">
  <input type="email" name="email" id="email" placeholder="Email">
  <input type="password" name="password" id="password" placeholder="Password">
  <label for="terms">
<input type="checkbox" name="terms" id="terms" value="terms">I agree to the Terms and Privacy Policy
</label>
  <div class="button">
    <input class="btn signUp" type="submit" value="Sign Up">
  </div>

推荐阅读