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:

 <form id="tableForm" action="getJson">
        <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>
    </form>

Basically, I need to get the value selected once done I need it to be passed a app.get() call but my questions is how do I get the value and call the API?

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 dropdowns ...
 app.get('/', function(req, res){
  res.sendfile('views/index.html');
});

app.get('/getJson', function (req, res) {
   console.log(req.body.);
});

app.listen(process.env.PORT);

So I need to call the getJson() with the value being passed in.

Cheers!

Andrew Lively · Accepted Answer · 2013-09-03 00:12:09Z

20

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.

answered Sep 3, 2013 at 0:12

Andrew Lively

2,1532 gold badges20 silver badges28 bronze badges

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

3 Comments

tjhack Over a year ago

Just wondering why a get does not work as all i want is to get a result back? but the console.log(req.params.selectpicker); comes back as undefined. Post works fine.

Jalle Over a year ago

This does not work for me. Tried with POST and GET method. Tried with Express v3 and v4. No way I can get Dropdown element in req.body!. Anyone with more working examples ?

Benny Over a year ago

In your app.js file, did you make sure the middleware code for bodyParser, i.e., app.use(bodyParser...) lines are above the app.get and app.post lines of code?

Rinsha CP · Accepted Answer · 2018-03-23 04:53:45Z

1

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);
  }

answered Mar 23, 2018 at 4:53

Rinsha CP

493 silver badges11 bronze badges

Comments

SHIVAM SHUKLA · Accepted Answer · 2020-01-13 13:44:42Z

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.

edited Jan 13, 2020 at 13:44

answered Jan 13, 2020 at 13:22

SHIVAM SHUKLA

114 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related