HTML Form returning null

[bold minnow]

I can't figure out why this is returning null. Any ideas?

<form id="dprForm">
  <label for="name">Name: </label>
  <input type="text" id="name"/><br><br>

  <label for="target">Target: </label>
  <input type="number" id="target"/><br><br>```
```ts
const form = document.querySelector('#dprForm') as HTMLFormElement;
form.addEventListener('submit', (event) => {
   event.preventDefault();

   const formData = new FormData(form);
   const name = formData.get('name');
   const target = formData.get('target');

   console.log(`${name} - ${target}`);
});```

[fickle token]

@bold minnow What part is null?

[bold minnow]

What's showing up in console.log

[fickle token]

What part?

[bold minnow]

console.log(${name} - ${target});

[fickle token]

What part? Name or target?

[bold minnow]

It returns "null - null"

[fickle token]

Hard to say without context - try logging form see if it's the correct element. If so does the form actually have a field called "name" and a field called "target"?

[bold minnow]

I added the HTML portion above the TS. I believe it's right, but am new so probably not 🙂

Logging "form" does return the form object. And in inspector, the value field has the correct data. It's just not making through formData, it seems

[fickle token]

Pretty sure you need name="name" and "name="target" on your input elements.

[bold minnow]

Yep, you are correct. I'm following a tutorial, and just double checked, but it says to use "id" 🙃

Nice work, thank you!

[fickle token]

https://developer.mozilla.org/en-US/docs/Learn/Forms

👆 MDN guides tend to be pretty good - if the tutorial you're following doesn't have name then yeah, it's probably not a good tutorial.

[bold minnow]

Docs are still tough for me to navigate through. Not sure what to look for or where to look, plus lots of jargon is hard to follow. I'll try to force myself to poke around more though. Thanks again!

[fickle token]

FWIW that's a tutorial not a doc