Data not passing to req.body variables from HTML form

Question

In my server-side settings (knex, express), I have this function:

// POST: Create new users
app.post('/add-user', (req, res) => {
    const {firstName, lastName, emailAdd, gender, dob, password} = req.body;
    console.log(req.body)
    db('useraccounts').insert({
        first_name: firstName,
        last_name: lastName,
        email_add: emailAdd,
        gender: gender,
        dob: dob,
        password: password,
    })

And in my client-side settings I have this form and this function:

return (
    <div className="form-container">
        <form id="formSend" onSubmit={onFormSubmit}>
            <input type="text"
                   name="firstName"
                   placeholder="First Name"
                   value="James"
                   id="firstName"
                   required
            />
            <input type="text"
                   name="lastName"
                   placeholder="Last Name"
                   value="James"
                   id="lastName"
                   required
            />
            <input type="email"
                   name="emailAdd"
                   placeholder="Email Address"
                   value="[email protected]"
                   id="emailAdd"
                   required
            />
            <select type="text"
                    name="gender"
                    list="genderDropdown"
                    id="gender"
                    required>
                <option value="Male">Male</option>
                <option value="Female">Female</option>
            </select>
            <input type="date"
                   name="dob"
                   placeholder="D.O.B"
                   id="dob"
                   required
            />
            <input type="password"
                   name="password"
                   placeholder="Password"
                   id="password"
                   required
            />
            <input type="password"
                   name="confirmPassword"
                   id="confPass"
                   placeholder="Confirm Password"
                   required
            />
            <input type="submit" value="COMPLETE REGISTRATION" disabled={isDisabled} />
        </form>
    </div>
);

const onFormSubmit = (e) => {
    e.preventDefault();
    let formData = new FormData(e.target)
    if (verifyPassword()) {
        setIsDisabled(false)
        fetch("http://localhost:5000/add-user", {
            method: "POST",
            body: formData
        }).then((response) => {
            console.log(response);
            return response.json();
        })
    }
}

The functionality is simple:

1 - The form is filled in and populates the db.insert variables.

However, I keep on getting null value error:

error: insert into "useraccounts" ("dob", "email_add", "first_name", "gender", "last_name", "password") values (DEFAULT, DEFAULT, DEFAULT, DEFAULT, DEFAULT, DEFAULT) - null value in column "first_name" violates not-null constraint

when I submit the form. For some reason the form data is not being passed to the variables in the other file, even though the form data is present when I output something like console.log(formData.get('firstName')

When I run the POST request in the form itself e.g. <Form method='POST' action='URL'>

The form uploads to the server no problem...anyone have any idea?

Answer 1

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