Get dropdown value using Express in node.js from html page
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);
}
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.
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.