How to display the value of select option as response using Node.js

Question

I am new to Node.js and Express

I am trying to fetch the selected option from the select list of an HTML page and display as a response using node.js

HTML

<form name="survey" id="survey" method="post" action="/survey">
    <select name="monthofbirth">
        <option value="1">January</option>
        <option value="2">February</option>
        <option value="3">March</option>
        <option value="4">April</option>
        <option value="5">May</option>
        <option value="6">June</option>
        <option value="7">July</option>
        <option value="8">August</option>
        <option value="9">September</option>
        <option value="10">October</option>
        <option value="11">November</option>
        <option value="12">December</option>
    </select>
</form>

Index.JS

var express = require('express')
var bodyParser = require("body-parser");
var app = express()

app.use(express.static('public'))

app.use(bodyParser.urlencoded({ extended: false }));

app.post('/survey', function (req, res) {
    let month = req.body.monthofbirth;
});

app.listen(3000, function () {
    console.log('Example app listening on port 3000!')
})

When I try to print the response using the code res.write(<b>${month}</b>); It displays the value of the option like 1, 2, 3 etc but I have to display the text like January, February etc.

please help me out with this :(

Edit:

I am not supposed to change the HTML document so I won't be able to change the option values from 1, 2, 3 to January, February etc;

you could use month names as a value of each option instead of numbers — zerosand1s
– zerosand1s, Commented Sep 19, 2018 at 23:35
I am not supposed to edit the HTML document so that option isn't possible for me :( — avnaveen
– avnaveen, Commented Sep 19, 2018 at 23:37

Yves Kipondo · Accepted Answer · 2018-09-19 23:37:22Z

4

that is normal because the value attach to each option is number (1,2,3,4, ...12), if you want to get month name your must change you select option like this

<select name="monthofbirth">
    <option value="January">January</option>
    <option value="February">February</option>
    <option value="March">March</option>
    <option value="April">April</option>
    <option value="May">May</option>
    <option value="June">June</option>
    <option value="July">July</option>
    <option value="August">August</option>
    <option value="September">September</option>
    <option value="October">October</option>
    <option value="November">November</option>
    <option value="December">December</option>
</select>

answered Sep 19, 2018 at 23:37

Yves Kipondo

5,7031 gold badge22 silver badges34 bronze badges

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

Comments

Steven Spungin · Accepted Answer · 2018-09-20 00:13:18Z

2

Client Side

Use querySelector to get the option element for the value, and then get it's innerText.

document.getElementById('submit').onclick = () => {
  const select = document.querySelector("select[name='monthofbirth']")
  const value = select.value;
  const option = select.querySelector(`option[value='${value}']`)
  const text = option.innerText
  console.log(text)
}

<form name="survey" id="survey" onSubmit='return false'>
  <select name="monthofbirth">
    <option value="1">January</option>
    <option value="2">February</option>
    <option value="3">March</option>
    <option value="4">April</option>
    <option value="5">May</option>
    <option value="6">June</option>
    <option value="7">July</option>
    <option value="8">August</option>
    <option value="9">September</option>
    <option value="10">October</option>
    <option value="11">November</option>
    <option value="12">December</option>
  </select>

  <button id='submit'>Submit</button>
</form>

Server Side

Create a map or object, using a string or number as key.

const monthNames = {
  '1': 'January',
  '2':'February',
   // etc
}

res.write(`<b>${monthNames[month]}</b>`);

3rd Party Library

You can also use a 3rd party library to get not only the name, but a locale specific name.

https://momentjs.com/

https://github.com/moment/moment/issues/2433

edited Sep 20, 2018 at 0:13

answered Sep 19, 2018 at 23:36

Steven Spungin

29.6k7 gold badges97 silver badges85 bronze badges

4 Comments

Yves Kipondo Over a year ago

He doesn't want to see the month name in the frontEnd, because res.write("${month}"); is in express which is in the server side

Steven Spungin Over a year ago

@YvesKipondo Thanks for that. I updated the answer.

avnaveen Over a year ago

The above answer helped me out in achieving the result. But I just want to know if there is any other way than declaring the constants?

Steven Spungin Over a year ago

In Java, you can use locale to get object names, but not in Javascript. You can use a library such as moment to get the names, with the bonus of locale flavors. I will put a link in my answer. But that is just someone else 'declaring the constants'.

markb · Accepted Answer · 2018-09-19 23:37:53Z

2

The easiest way is to simply make the values represent the months you are trying to use. Is there a reason you have the values as month number, rather than the name?

answered Sep 19, 2018 at 23:37

markb

2792 silver badges9 bronze badges

Collectives™ on Stack Overflow

How to display the value of select option as response using Node.js

3 Answers 3

Comments

Client Side

Server Side

3rd Party Library

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Client Side

Server Side

3rd Party Library

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related