CODEWITHSUNDEEP
node.jsexpressbody-parser
avnaveen
avnaveen

Reputation: 562

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

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;

Upvotes: 0

Views: 12482

Answers (3)

Steven Spungin
Steven Spungin

Reputation: 29109

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

Upvotes: 2

markb
markb

Reputation: 279

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?

Upvotes: 2

Yves Kipondo
Yves Kipondo

Reputation: 5603

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>

Upvotes: 4

Related Questions