JADE form submit not caught although route exists

Question

I am using JADE, node.js, and express to create a table to select some data. Everything is running on localhost. When I try the route /climateParamSelect it works and displays what I would like to see including URL encoded elements.

Routing to this code snippet is in app.js but I confirmed that it works using /climateParamSelect?test=test. The routes are located in climateParamSelect.js

router.get('/', async function(req, res, next) {
    console.log('GET');
    console.log(req.query);
});

router.post('/', async function(req, res, next) {
    console.log('POST');
    console.log(req.params);
});
module.exports = router;

The code in app.js may be important after all, so here is an excerpt:

const express = require('express');
var tableSelectRouter = require('./routes/tableSelect');
var cpSelectRouter = require('./routes/climateParamSelect');
var app = express();
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

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('/climateParamSelect', cpSelectRouter);
app.use('/tableSel', tableSelectRouter);

When I use the submit button of the following page it is invoked but for some reason, the route above is never taken. Instead, it displays: waiting for localhost.

html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
    link(rel='stylesheet', href='https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css')
    script(src='https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js')  
    script(src='https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js')  
    script.
        $(document).ready(function() {
            $('#selTable').DataTable();
        });
body
  form(name='productionSelect', method='post', action='/climateParamSelect')
    div#wrapper
      h1 Select production data for feature generation
      br
      table#selTable.display
        thead
          tr
            th headers
            //... 
        tbody
          tr
            td 
              input(type='checkbox',id='#{r}',name='#{r}')
            td 
            //...   
      br
      input(type='submit',value='Select Production',name='prodSubmit',data-transition='fade', data-theme='c')

What am I missing here?

Thank you

Answer 1

The browser will sit there spinning until it receives a response, and there is no response sent in your route. I'm sure you'll want to render a view, but to test it quickly just use res.send and a string.

The second issue is in how you're reading the data sent from the client. req.params is used for dynamic URL parsing with variables in the route. To handle form data (which is what you're sending here) you can use req.body.

Changing your route to this should fix your issues:

router.post('/climateParamSelect', async function(req, res, next) {
    console.log('POST');
    console.log(req.body);
    res.send("hello");
});