CODEWITHSUNDEEP
javascripthtmlformsinput
Jakub Smetana
Jakub Smetana

Reputation: 13

Form input values are empty strings

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>

Upvotes: 1

Views: 440

Answers (1)

Rodrigo
Rodrigo

Reputation: 106

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

Upvotes: 3

Related Questions