node.js - cant get data from form to server - MERN

Question

im new and i cant get data from the form in server to insert it in the DB, heres the code:

form:

<form method = "post" action = "/register">
            <label>
                User Name:
                <input type = "text" name = "user" onChange = {(text) => setUser(text.target.value)}></input>
            </label>
            <label>
                Password:
                <input type = "password" name = "password"></input>
            </label>
            <input type = "submit" name = "Send" value = "Send"></input>
</form>

and the server.js:

const express = require("express");
const app = express();
const bodyParser = require("body-parser");
const cors = require("cors");
const mongoose = require("mongoose");
const PORT = 4000;

app.use(cors());
app.use(bodyParser.json());

mongoose.connect("mongodb://127.0.0.1:27017/Cook", {
    useNewUrlParser: true,
});

const connection = mongoose.connection;

app.post("/register", function(request, response) {
    let user = request.body.user;
    let password = request.body.password;
    console.log(user)
})

if anyone can help, would appreciate it :)

question from:https://stackoverflow.com/questions/65858521/cant-get-data-from-form-to-server-mern

Answer 1

The issue is your are wrapping input field in label. I have updated the code below:

<form method="post" action="/register">
            <label>User Name:</label>
            <input type = "text" name = "user" value="keep any default if needed">
            <label> Password:</label>
            <input type = "password" name = "password">
            <input type="submit" value="Send" >
</form>