Data not passing to req.body variables from HTML form

Question

removed because it was incorrect

Please add a `catch` onto the `fetch` call and let us know what (if any) error there is. — evolutionxbox, Jul 24 '21 at 15:07
`let formData = new FormData(e.target)` creates a new formData that gets POST'ed. This means all the data in the form is set to null. Instead, you want to be grabbing the form used above i.e. `
` by using something like `document.querySelector` — purple, Jul 24 '21 at 15:39
this worked @purple but only in printing the formData to console. It gives the same output as insomnia too: but still gives a null column error in postgres — ComicBookGuy, Jul 24 '21 at 15:45
Hi @bfris I understand that - the question is how I get the variables to populate so they're no longer null — ComicBookGuy, Jul 24 '21 at 16:09

Đăng Khoa Đinh · Answer 1 · 2021-07-24T17:10:57.387

Explain

For this kind of problem, the key is to know the Content-Type of the request.

When I run the POST request in the form itself e.g. The form uploads to the server with no problem.

The default Content-Type of Form element is application/x-www-form-urlencoded(see this). On the server-side, you have something like app.use(express.urlencoded({extended:true}) to parse requests in application/x-www-form-urlencoded format and it worked.

Now, you're using another Content-Type with this code let formData = new FormData(e.target). It is multipart/form-data, see the documentation. On the server-side, your req.body is empty because you don't have the right middleware to parse requests in multipart/form-data format.

(You can think of it like 2 people use 2 different languages, they can't understand each other)

Action

At least 2 choices:

Because Express doesn't have built-in middleware to parse multipart/form-data format, you will need to install something like multer to do the job.
(recommended) multipart/form-data is usually used to handle upload file requests, which isn't the case here. You can send requests in application/x-www-form-urlencoded format. You need to convert FormData to urlencoded format and set the right Content-Type header.

...
 const urlEncoded = new URLSearchParams(formData).toString();
 fetch("http://localhost:5000/add-user", {
            method: "POST",
            body: urlEncoded,
            headers: {
               'Content-Type': 'application/x-www-form-urlencoded'
            }
        }).then((response) => {
            console.log(response);
            return response.json();
        })

score -1 · Accepted Answer · answered Jul 24 '21 at 18:29

This bit of jQuery solved the issue for me:

$('#formSend').serialize(),

In the fetch API like so:

fetch("/yourHTTPpath", {
                method: "POST",
                body: $('#formSend').serialize(),
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                }
            }).then((response) => {
                console.log(response);
                return response.json();
            })

Data not passing to req.body variables from HTML form

2 Answers2

Explain

Action