I have a form and I am experimenting with formData.. on submit, I created the formData object by passing the 'form' from the DOM as the argument. Now I can pass this argument as e.target, e.currentTarget and it works fine.. but when I use the 'this' keyword, it shows as undefined. Why?
Here's my codepen link.. https://codepen.io/alimbolar/pen/GRWxwzN
const myForm = document.getElementById('myForm');
myForm.addEventListener('submit', (e) => {
e.preventDefault();
// uncomment the line below to check 'this' in the console
// console.log(this)
const myFormData = new FormData(e.target);
const dataArray = [...myFormData];
const data = Object.fromEntries(dataArray);
console.log(data.name);
console.log(data.email);
console.log(data.password)
});
.container form {
width: 50%;
margin: auto;
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
border: 1px solid black;
padding: 2em;
>label,
button {
margin-top: 1em;
text-transform: uppercase;
font: 1.5em Monospace;
color: grey;
}
}
<div class="container">
<form id="myForm" action="">
<label for="name">
Name
</label>
<input type="text" id="name" name="name" value="Alim Bolar">
<label for="email">Email
</label>
<input type="email" id="email" name="email" value="alim@alim.com">
</label>
<label for="password">Password
</label>
<input type="password" id="password" name="password" value="alim123">
<button type="submit">Submit</button>
</form>
</div>
you might have to see the results in the console on submit.. please help me understand why 'this' is not equal to e.currentTarget or e.target in this case.