querying database from values selected in dropdown list Nodejs

Question

I have started using nodejs and trying to make a website that consists of two drop-down lists. The values selected in them will have to be passed as arguments to a MySQL procedure (and then a table to be displayed on the webpage).

So far, I have been able to (by adapting other people's codes) display the table on the webpage without the use of drop-down list, i.e. manually typing argunment in users.js.

So, the issue is to get the two values from drop-down list and then I will use placeholders in my query to use them as arguments. Any help and suggestion is appreciated. Here's my project folder tree.

users.js

var express = require('express');
var router = express.Router();
var db = require('../database');

router.get('/user-list', function(req, res, next) {
    db.query("TRUNCATE stack_Compare");
    db.query("SET max_sp_recursion_depth=100");
    db.query("CALL insertMain(?,?)");                   //here I manually type arguments but want to actually get them from drop down lists.

    var sql="SELECT * FROM stack_Compare";
    db.query(sql, function (err, results, fields) {
        if (err) throw err;
        res.render('user-list', { title: 'User List', userData: results});
  });
});


module.exports = router;

the form code in user-list.ejs

<form action="/users/input" method="POST">
          <fieldset style="width:50%">
          <select class="selectpicker" data-style="btn-info" name="selectpicker">
            <optgroup label="Select Table">
                <option name="" value="0">Starting Station</option>
                <option name="table1" value="1">A</option>
                <option name="table2" value="2">B</option>
                <option name="table3" value="3">C</option>
            </optgroup>
        </select>
       to
       <select class="selectpicker" data-style="btn-info" name="selectpicker">
        <optgroup label="Select Table">
            <option name="" value="0">Destination Station</option>
            <option name="table1" value="1">S</option>
            <option name="table2" value="2">O</option>
            <option name="table3" value="3">G</option>
        </optgroup>
    </select>
    <button class="dropbtn"><b>GO</b></button>

      </fieldset>
         </form>

I have thought of adding the following code in users.js but am stuck as to how they should pick distinct data from the form.

router.get('/form', function(req, res, next) { 
    res.render('users-form'); 
});

// this script to fetch data from drop-down lists
router.post('/input', function(req, res, next) 
    
})

FrancoF · Accepted Answer · 2021-05-06 15:29:18Z

1

So there is a middleware provided by Express that will process the request encoded form and will put all information into the request body object you receive in your handler function.

All you have to do is to add this middleware line:

app.use(
  express.urlencoded({
    extended: true
  })
);

Then you can access all form values using the request object. Like this:

app.post("/submit-form", (req, res) => {
  const formvalues = req.body;
  const valueSelected = req.body.selectpicker
  //process your data
  res.status(200).send('Processed');
});

The thing is that the express middleware will do the magic. I recommend you using different names for your dropdowns.

answered May 6, 2021 at 15:29

FrancoF

263 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

mr.loop Over a year ago

I have to add this in app.js or users.js

FrancoF Over a year ago

I don't see your app.js file but I assume at some point in app.js you are routing all '/user' to your router. If this is the case, you have to add the first portion of the code into the app.js file and then the second portion of the code into your users.js, like this: router.post("/input", (req, res) => { const formvalues = req.body; const valueSelected = req.body.selectpicker //process your data res.status(200).send('Processed'); }); the above will process any POST requests made to path "yourhost:port/user/input"

FrancoF Over a year ago

I coded this for ya: codesandbox.io/s/bitter-currying-rz036?file=/src/index.js

Collectives™ on Stack Overflow

querying database from values selected in dropdown list Nodejs

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related