表单输入值是空字符串答案

【问题标题】：Form input values are empty strings表单输入值是空字符串
【发布时间】：2020-08-18 10:17:08
【问题描述】：

我的问题是提交表单后输入值为空。我没有错误，也不知道出了什么问题。

谢谢！

const myForm = document.getElementById("myForm");
const myName = document.getElementById("myName").value;
const myEmail = document.getElementById("email").value;
const myMessage = document.getElementById("message").value;

myForm.addEventListener( "submit", async (e) => {
    e.preventDefault();

    console.log( myName );
    console.log( myEmail );
    console.log( myMessage );
})

<form id="myForm" name="myForm">
            
            <label for="myName">Name:</label>
            <input id="myName" name="myName" type="text" >

            <label>E-mail:</label>
            <input id="email" name="email" type="email" >

            <label>Message:</label>
            <textarea id="message" name="message" type="text" ></textarea>

            <button id="form-button" type="submit">Send</button>
       
</form>
 
    
    <script src="./mail-post.js"></script>

【问题讨论】：

您在 submit 事件之前获得值 - 在页面开始时，这就是它为空的原因

标签： javascript html forms input

【解决方案1】：

值超出范围，尝试将 then 放入提交事件中，像这样

const myForm = document.getElementById("myForm");

myForm.addEventListener( "submit", async (e) => {
    e.preventDefault();

   const myName = document.getElementById("myName").value;
   const myEmail = document.getElementById("email").value;
   const myMessage = document.getElementById("message").value;

    console.log( myName );
    console.log( myEmail );
    console.log( myMessage );
})

【讨论】：