handleChange and onSubmit on javascript vanilla

Question

i'm working on my very first app: a login/register form with JS/node Js/ Mysql. I'm trying to connect my form to my database (to collect my users' data into my db) but my code is not working. I didn't use "handleChange" or "onSubmit" functions because i don't use ReactJS framework. Do you guy think it's necessary?

this is my code : 

HTML code: 

<div class="msg-alerte">message</div>
        <form method="post" action="http://localhost:8000/">
            <div class="formulaire">
                <h1 class="entete">inscription</h1>
                <input type="name" placeholder="nom" name="nom" id="nom" autocomplete="off" required>
                <input type="email" placeholder="email" name="email" id="email" autocomplete="off" required>
                <input type="password" placeholder="mot de passe" name="password" id="password" autocomplete="off" required>
                <button class="btn-valider">s'inscrire</button>
                <a href="/connexion.html" class="lien-inscription">Vous avez déjà un compte? Se connecter</a>
            </div>
        </form>

JS (frontend) :

  const username = document.getElementById('name')|| null;
  const email = document.getElementById('email');
  const password = document.getElementById('password');
  const submitBtn = document.querySelector('.btn-valider');
  
  if(username === 0){

  }
  else{
    submitBtn.addEventListener('click', ()=>{
        //register-user??
        fetch('/', {
            method: "post",
            headers: new Headers({'Content-Type':'application/json'}),
            body: JSON.stringify({
                user_name: username,
                email: email,
                password: password
            })
        })
        console.log(username);
        console.log(email);
        console.log(password)

        .then(res =>res.json())
        
    })
  }

js server :

app.post("/",(req,resp)=>{
    //insertion d'une donnée
    const data={user_name:req.body.user_name,email:req.body.email, password:req.body.password};
    let sql="INSERT INTO users (user_name, email, password) VALUES (?,?, ?);";
 
    pool.query(sql,[data],(err,fields)=>{
        if(err)console.log("Echec d'enregistrement à BD");
        else{
            console.log("Enregistrement effectuee");
            resp.redirect("/");
        }
    });
});

THANK YOU FOR YOUR HELP!!!

Answer 1

It looks like the main issue you will want to resolve before you can move forward is with your fetch call in your frontend code. You need to use the then() method on fetch so you can properly parse and read the response. Currently, you are calling .then(res =>res.json()) on a console.log() . This is not valid.

I have made a modification to your event listener function that you can try

submitBtn.addEventListener('click', () => {

    fetch('/', {
        method: "post",
        headers: new Headers({'Content-Type':'application/json'}),
        body: JSON.stringify({
            user_name: username,
            email: email,
            password: password
        })
    })
    .then((res) => res.json())
    .then((data) => {
        // now we can read the response and decide what to do next
        console.log(data);
    });
})

Please comment if you need any further clarification.