Node.js: receiving input from HTML select without document.getElementById

Question

I'm working on a node.js project that involves selecting someones' name and redirecting the user for more information. However, when I try to console.log the result, just to check that I can retrieve the values, I get nothing. Below is an example of my code:

function displayDetailed(data, req) {
  names = data[0];
  var input = '<select name = "dropDown" onChange = "testing(this)">;
  for (var i = 0; i < names.length; i++) {
    input += '<option value= "' + i + '" name = "employee" > ' + names[i] + ' </option>';
  }
  input += '</select><br>';
  var myData = {
    test: req.body
  }
  console.log(myData);
  return '<!DOCTYPE html><head></head><body>' + input + '</body></html>';
}

function testing(name) {
  console.log('Testing!  ' + name);
}

Clearly, I just want the employee's name to be printed off onto the console for the moment. However, nothing is popping up on the console, be it the name or any errors.

I've also tried multiple solutions I've seen on other StackOverflow posts ( Example, Example1 ). That's where I got the idea for the test var. For some reason, the request's body does not exist when I try to call it and just returns undefined.

I also can't call document.getElementById since node.js doesn't have a DOM. The solutions linked implement this function, which I cannot call because node.js doesn't allow me to call the html document that the user is working on.

This function will be returning an HTML string to a res.send call within an express app.get.

Possible duplicate of [Get selected value in dropdown list using JavaScript?](https://stackoverflow.com/questions/1085801/get-selected-value-in-dropdown-list-using-javascript) — Puka, May 26 '18 at 22:06
Hello, you should have a look at this question : https://stackoverflow.com/questions/1085801/get-selected-value-in-dropdown-list-using-javascript — Puka, May 26 '18 at 22:07
@Gaspacchio I can't call the document.getElementById because there's no document element to work with. All the solutions in your link utilize this function. If there's a work around to call this function, I'm unaware of it. — dropTableUsers, May 26 '18 at 22:45

fardjad · Answer 1 · 2018-05-27T14:22:38.077

Short answer:

I suspect your problem is you're not using a body parser middleware to parse the request body.

Longer version:

Suppose you have an HTML file named index.html in a directory named html in the root of your project:

<!doctype html>

<meta charset=utf-8>
<title>Test</title>

<body>
    <form action="/" method="post">
        <select name="values">
            <option value="value1">Value 1</option>
            <option value="value2">Value 2</option>
        </select>
        <input type="submit">
    </form>
</body>

You can use the built-in static middleware to serve that file to clients (or build the HTML string and send it as a response to clients or maybe use a template engine and make your life easier) and then use a body parser middleware (like this one) to parse the request body when the form is submitted:

const http = require('http');
const path = require('path');

const bodyparser = require('body-parser'); // npm i body-parser
const express = require('express');

const app = express();

const PORT = process.env.PORT || 8080;
const server = http.createServer(app);
server.listen(PORT, () => {
  console.log(`Server is listening on port ${PORT}`);
});

app.use(express.static(path.join(__dirname, './html')));
app.use(bodyparser.urlencoded({extended: true}));

app.post('/', (req, res) => {
  res.setHeader('content-type', 'text/plain');
  res.end(`You have selected: ${req.body.values}`);
});

Node.js: receiving input from HTML select without document.getElementById

1 Answers1