Form input values are empty strings

Question

my problem is that I have empty input value after submitting a form. I have no errors and I have no idea what is wrong.

Thanks!

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>

You get values before submit event - on start of page, that's why it's empty — Justinas
– Justinas, Commented Aug 18, 2020 at 10:19

Rodrigo · Accepted Answer · 2020-08-18 12:38:49Z

3

The values are out of scope, try putting then inside the submit event, like this

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 );
})

edited Aug 18, 2020 at 12:38

answered Aug 18, 2020 at 10:22

Rodrigo

961 gold badge1 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Form input values are empty strings

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related