change "POST" route to "GET" route when submit data with hbs template engine

I have two routes in my nodejs app, my default route "/" is a simple form with a submit button

when I click on submit button, the "view" router is rendered (I am using the handlebars library) and then the request method for the "view" route is POST.

how can I change POST request to GET request when I click the submit button while the server is receiving new data at the same time?

server.js:

const express = require('express')
const app = express()
const path = require('path')
// body parser
app.use(express.urlencoded({ extended: false }));
app.use(express.json());

app.use(express.static(__dirname + '/public'));

// hbs setup
app.set('views', path.join(__dirname))
app.set('view engine', 'hbs')
// import routes
const submitRouter = require('./routes/submitResume')
const viewRouter = require('./routes/viewResume')

app.use('/', submitRouter)
//app.use('/submit', submitRouter)
app.use('/view', viewRouter)

app.use((req, res, next) => {
res.status(404).send('not found')
})

app.listen(3000, (err) => {
  if(err) console.log(err)
  console.log('listening ... ')
})

viewResume.js(view route):

const express = require('express')
const router = express.Router()

router.get('/', (req, res) => {
   res.render('views/viewResume', {})
})

module.exports = router

submitResume.js(default route):

const express = require('express')
const router = express.Router()

router.get('/', (req, res) => {
  res.render('views/newSubmit', {})
})

router.post('/', (req, res) => {
  console.log(req.body)
  res.render('views/viewResume')
})

module.exports = router;

newSubmit.hbs:

     <form action="/" method="POST">
        <div class="d-flex flex-column jusrify-content-center align-items-center">
            <div class="mb-3 col-4 ">
                <label for="firstName" class="form-label">First Name</label>
                <input type="text" class="form-control" name="firstName" >
            </div>
            <div class="mb-3 col-4">
                <label for="lastName" class="form-label">Last Name</label>
                <input type="text" class="form-control" name="lastName" >
            </div>
            <div class="mb-3 col-4">
                <label for="lastName" class="form-label">Profile</label>
                <input type="text" class="form-control" name="profile">
            </div>
            <button type="submit" class="btn btn-primary m-5 w-50">Submit</button>
        </div>
     </form>

Source: Ask Javascript Questions

LEAVE A COMMENT