update routing not working in node with ejs templating (404 not found error)

editUser.js which is loading the data correctly, however when clicking on update I am getting (404 not found error), not able to understand why update route is not getting invoked. It is working for /, createUser, editUser/:id (for loading user data).

editUser.js

<div class="container">
  <a href="/" class="btn btn-primary">All Users</a>
  <form class="col g-3 mt-3"" method="post" action="/update/<%= user.id %>">
    <div class="col-md-6">
      <label for="inputFirstName" class="form-label">First Name:</label>
      <input type="text" class="form-control" value="<%= user.first_name %>" name="first_name" id="first_name">
    </div>
    <div class="col-md-6">
      <label for="inputLastName" class="form-label">Last Name</label>
      <input type="text" class="form-control" value=<%= user.last_name%> name="last_name" id="last_name">
    </div>
    <div class="col-md-6">
      <label for="inputEmail" class="form-label">Email</label>
      <input type="email" class="form-control" value=<%= user.email%> name="email" id="email">
    </div>
    <div class="col-md-6 mt-3">
      <button type="submit" class="btn btn-primary">Update</button>
    </div>
  </form>
 </div>

routes/index.js

    var express = require('express');
var router = express.Router();


var {allUsers, createUser, saveUser, editUser, updateUser} = require('../controllers/userController')

/* GET users listing. */
//Commenting default function
router.get('/', allUsers)
router.get('/createUser', createUser)
router.post('/createUser', saveUser)
router.get('/editUser/:id', editUser)
router.post('/updateUser/:id', updateUser)

module.exports = router;

controllers/userController.js

const User = require('../models/userModel')

const updateUser = async (req, res) => {
console.log('Updating User')

const userId = req.params.id
const userData = req.body
const selector = {where: {id:userId}}

await User.update(userData, selector).catch(error => console.log(error))

res.redirect('/')
}

module.exports = {  allUsers,createUser,saveUser,editUser,updateUser }

app.js

    //Imports
var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
var expressLayouts = require('express-ejs-layouts')

const routes = require('./routes');

//DOTENV  for storing sensitive data
require('dotenv').config({path:'./bin/.env'})

var app = express();

// View engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs'); //Key, Value

app.set('layout','layouts/layout')

//Middleware between requet and response
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use(expressLayouts)

//Use Router
app.use('/',routes)

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// error handler
//error handler first parameter is "err"
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

Form action should be action="/updateUser/<%= user.id %>

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0