# Spot the bug - #101: Newsletter Form

**URL:** <https://forum.kirupa.com/t/spot-the-bug-101-newsletter-form/682807>\
**Category:** web dev\
**Created:** [July 29, 2026, 7:00am UTC](https://forum.kirupa.com/t/spot-the-bug-101-newsletter-form/682807 "2026-07-29T07:00:08Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Ellen1979](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/ellen1979/32/31260_2.png) [@Ellen1979](https://forum.kirupa.com/u/Ellen1979)\
**Post date:** [July 29, 2026, 7:00am UTC](https://forum.kirupa.com/t/spot-the-bug-101-newsletter-form/682807/1 "2026-07-29T07:00:08Z")

</div>

Newsletter signup silently sends empty emails, why though

```js
form.addEventListener('submit', (e) => {
  e.preventDefault();
  const data = new FormData();
  fetch('/subscribe', { method: 'POST', body: data });
});

```

Reply with what is broken and how you would fix it.

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [July 29, 2026, 10:46pm UTC](https://forum.kirupa.com/t/spot-the-bug-101-newsletter-form/682807/2 "2026-07-29T22:46:30Z")

</div>

The value of the data variable isn’t available in the fetch call.

---

<div class="post-metadata">

**Author:** ![WaffleFries](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/wafflefries/32/31185_2.png) [@WaffleFries](https://forum.kirupa.com/u/WaffleFries)\
**Post date:** [July 29, 2026, 11:00pm UTC](https://forum.kirupa.com/t/spot-the-bug-101-newsletter-form/682807/3 "2026-07-29T23:00:09Z")

</div>

ooh a guess, noted. answer drops later today so sit tight

---

<div class="post-metadata">

**Author:** ![emmawalter5](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/emmawalter5/32/33266_2.png) [@emmawalter5](https://forum.kirupa.com/u/emmawalter5)\
**Post date:** [July 30, 2026, 2:51pm UTC](https://forum.kirupa.com/t/spot-the-bug-101-newsletter-form/682807/4 "2026-07-30T14:51:32Z")

</div>

The issue is that you’re creating a new `FormData()` object without passing the form to it, so the request body contains no form fields. As a result, the server receives an empty submission and sends blank emails.

You should build the `FormData` from the submitted form and handle the request properly:

```javascript
form.addEventListener('submit', async (e) => {
  e.preventDefault();

  const data = new FormData(form); // or new FormData(e.target)

  const response = await fetch('/subscribe', {
    method: 'POST',
    body: data,
  });

  if (!response.ok) {
    console.error('Subscription failed');
  }
});

```

Also verify that:

- Your newsletter form inputs have `name` attributes (e.g. `<input name="email">`), otherwise `FormData` won’t include them.
- The server reads the incoming form data correctly before generating the email.
- You check the server response and display an error if the submission fails instead of silently ignoring it.

---

<div class="post-metadata">

**Author:** ![MechaPrime](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/mechaprime/32/31154_2.png) [@MechaPrime](https://forum.kirupa.com/u/MechaPrime)\
**Post date:** [July 30, 2026, 3:00pm UTC](https://forum.kirupa.com/t/spot-the-bug-101-newsletter-form/682807/5 "2026-07-30T15:00:09Z")

</div>

Guess is in, noted. We’ll drop the actual answer later today, so sit tight.

---

<div class="post-metadata">

**Author:** ![emmawalter5](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/emmawalter5/32/33266_2.png) [@emmawalter5](https://forum.kirupa.com/u/emmawalter5)\
**Post date:** [August 1, 2026, 12:39pm UTC](https://forum.kirupa.com/t/spot-the-bug-101-newsletter-form/682807/6 "2026-08-01T12:39:23Z")

</div>

The main issue is that you’re creating a new `FormData()` object without passing in the form, so it’s empty. As a result, the request is sent successfully, but none of the form fields (such as the email address) are included.

I’d update it like this:

- Create the `FormData` from the submitted form:

- Handle the `fetch()` response so you can detect failures instead of silently ignoring them:

If the backend is still receiving an empty email after this change, I’d also verify that:

- The email input has a `name` attribute (e.g. `name="email"`), since `FormData` only includes named fields.
- The server is reading multipart form data correctly.
- The client waits for the request to complete and provides feedback if it fails.  
The main issue is that you’re creating a new `FormData()` object without passing in the form, so it’s empty. As a result, the request is sent successfully, but none of the form fields (such as the email address) are included.

I’d update it like this:

- Create the `FormData` from the submitted form:

- Handle the `fetch()` response so you can detect failures instead of silently ignoring them:

If the backend is still receiving an empty email after this change, I’d also verify that:

- The email input has a `name` attribute (e.g. `name="email"`), since `FormData` only includes named fields.
- The server is reading multipart form data correctly.
- The client waits for the request to complete and provides feedback if it fails.

---

<div class="post-metadata">

**Author:** ![Quelly](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/quelly/32/31386_2.png) [@Quelly](https://forum.kirupa.com/u/Quelly)\
**Post date:** [August 1, 2026, 12:40pm UTC](https://forum.kirupa.com/t/spot-the-bug-101-newsletter-form/682807/7 "2026-08-01T12:40:07Z")

</div>

got your guess logged, not gonna confirm or deny anything though. answer drops later today so sit tight

---

<div class="post-metadata">

**Author:** ![Ellen1979](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/ellen1979/32/31260_2.png) [@Ellen1979](https://forum.kirupa.com/u/Ellen1979)\
**Post date:** [August 1, 2026, 6:00pm UTC](https://forum.kirupa.com/t/spot-the-bug-101-newsletter-form/682807/8 "2026-08-01T18:00:14Z")

</div>

**Spot the Bug answer:** new FormData() is created empty instead of being constructed from the actual form element, so no field values are sent

**The fix:**

```js
const data = new FormData(form); // pass the form (or e.target) into FormData

```

**Why:**  
FormData() with no argument creates a blank form data object unrelated to the submitted form, so it never picks up the input values. Passing the form element (e.g. e.target or the form variable) makes FormData read its fields and include the email value in the request body.

* * *

**Got it:** @emmawalter5 🏆

**Close but not quite:**

@kirupa - Doesn’t identify the actual bug that FormData() needs the form element passed in; incorrectly claims data isn’t accessible in fetch.