I am building a Login Page for my web site,
client side code
<!DOCTYPE html>
<html>
<head>
<div class="header">
<h1>create new account</h1>
</div>
<div class="container">
<div class="form">
<form action="/api/db" method="POST">
<div>
<input type="text" name="name" id="name"
placeholder="name" required/>
</div>
<div>
<input type="password" name="password"
id="password" placeholder="password" required>
</div>
<div>
<button type="submit">create new
account</button>
</div>
</form>
</div>
</div>
</head>
<body>
<link rel="stylesheet" href="style.css">
<script>
let name = document.querySelector('#name').value
let password = document.querySelector('#password').value
let form = document.querySelector('form')
const { cookie } = document
form.addEventListener('submit', (e) => {
localStorage.setItem('name', name)
localStorage.setItem('password', password)
})
</script>
server code
class User {
constructor(name, password) {
this.name = name
this.password = password
}
}
const Datastore = require('nedb')
const express = require('express')
const app = express()
const database = new Datastore('database.db')
database.loadDatabase()
app.post('/api/db', (req, res) => {
let name = req.body.name
let password = req.body.password
database.insert(new User(name, password))
res.redirect('/chat')
})
I have a name input and password input inside a form, and when the user submit the form the script should save the name and the password in the localStorage but when I check the localstorage in the "application" tab the values of the items are "undefined"
Edit: #oops I just realized how dumb my question was
That's because you're getting the input values before user submits the form. You need to get them exactly when the submit event is triggered. For example:
const form = document.querySelector('form');
form.addEventListener('submit', (e) => {
const name = form.querySelector('#name').value
const password = form.querySelector('#password').value
localStorage.setItem('name', name)
localStorage.setItem('password', password)
})