Get dropdown value using Express in node.js from html page

Question

I am developing a quick node.js app using express and I am a newbie to NODE. For pages I am just using plain html.

Basically I have a form as follows:

 &         


        

Answer 1

You can use req.query.selectpicker for getting data from the 'select' element as a URL query Parameter. This worked for me!

Keep the method GET and action as the route name in which you want to access the dropdown data.

Answer 2

You can use a change function inside the select tag.

<select class="selectpicker" (ngModelChange)="changeValue($event)" data-style="btn-info" name="selectpicker">
        <optgroup label="Select Table">
          <option name="" value="0">Select table</option>
          <option name="table1" value="1">Table 1</option>
          <option name="table2" value="2">Table 2</option>
          <option name="table3" value="3">Table 3</option>
        </optgroup>
    </select>

then in your typescript file,

  changeValue(value) {
     console.log(value);
  }

Answer 3

You need to submit the form somehow. The easiest way to do it would be with a submit button. You also need to put the method for the form, which by the way you phrased it it sounds like you're wanting to use GET.

HTML

<form id="tableForm" action="/getJson" method="get">
    <select class="selectpicker" data-style="btn-info" name="selectpicker">
        <optgroup label="Select Table">
            <option name="" value="0">Select table</option>
            <option name="table1" value="1">Table 1</option>
            <option name="table2" value="2">Table 2</option>
            <option name="table3" value="3">Table 3</option>
        </optgroup>
    </select>
    <input type="submit" />
</form>

On the server side you need parse out the get request. You already have it set up to receive it, you just need to know what you're looking for. Since your select has the name "selectpicker" that's what you'll use in this case.

JavaScript

var express = require('express'),
    app = express();

app.use(express.bodyParser());

// as only one page can use res.sendfile to render the page which will contain the drop   downs
app.get('/', function (req, res) {
    res.sendfile('views/index.html');
});

app.get('/getJson', function (req, res) {
    // If it's not showing up, just use req.body to see what is actually being passed.
    console.log(req.body.selectpicker);
});

app.listen(process.env.PORT);

I haven't fully tested this code, but it should work.