[SOLVED] Handling radio button clicks in a Node.JS app

Handling radio button clicks in a Node.JS app

While working on a NodeJS app I am facing the following issue. I have a page where I dynamically set a few radio buttons. I then want to produce an action when a radio button is clicked. Concretely speaking, when a button is checked, I want to sent the app to a given(internal) URL. At this point I am able to produce an alert when a check is done. I also know how to point the app to a different URL (another route). But I can't do both at the same time.

Here the relevant code (index.js) for my question:

var express = require('express'),
    app = express()

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


app.get('/RouteOne', (req, res) => {
  .....
})


app.get('/RouteTwo', (req, res) => {
  .....
})


app.get('/RouteThree', (req, res) => {
  .....
})


app.get('/RouteSpecial', (req, res) => {
  .....
  specialDisplayFunc(res,prmArray);
})


function specialDisplayFunc(response,paramArray=null) {
  ........
  let htmlStr = "<!DOCTYPE html>\n";
  htmlStr += "<html lang='en'>\n";
  htmlStr += "<head>\n";
  htmlStr += "<meta charset='utf-8'>\n";
  htmlStr += "<meta name=viewport content='width=device-width, initial-scale=1'>\n";
  htmlStr += "<link type='text/css' href='css/chlg_styles.css' rel='stylesheet'>"
  htmlStr += "<title>Wheel Puzzle</title>\n";
  htmlStr += "</head>";
  htmlStr += "<body>\n";
  ........


  htmlStr += "<script>\n"
  htmlStr += "document.body.addEventListener('change', function (e) {\n"
  htmlStr += "  let target = e.target;\n"
  htmlStr += "  switch (target.id) {\n"
  htmlStr += "      case '1':\n"
  htmlStr += "          alert('1');\n" // This works!
  /*Here I want code so that when the radio button is checked the app goes to "RouteSpecial?p=1". */
  htmlStr += "          break;\n"
  htmlStr += "      case '2':\n"
  htmlStr += "          alert('2');\n" // This works!
  /*Here I want code so that when the radio button is checked the app goes to "RouteSpecial?p=2". */
  htmlStr += "          break;\n"
  htmlStr += "      case '3':\n"
  htmlStr += "          alert('3');\n" // This works!
  /*Here I want code so that when the radio button is checked the app goes to "RouteSpecial?p=3". */
  htmlStr += "          break;\n"
  htmlStr += "  }\n"
  htmlStr += "})\n"
  htmlStr += "</script>\n"
  .....



  if (paramArray!=null) {
    htmlStr += "<div class='RdBxBlk'>"
    htmlStr += "<p>You have a choice of "
    htmlStr += paramArray.length.toString()
    htmlStr += " possible methods:</p>"
    htmlStr += "<div class='RdBx'>"

    for (let i=1; i<=paramArray.length; i++) {
      htmlStr += "<input class='RdBtn' type='radio' name='WTRSFM'"
      const loopVal = i.toString()
      htmlStr += " id='"+loopVal+"' value='"+loopVal+"'"
      if (i==1) htmlStr += " checked"
      htmlStr += ">"+loopVal//+"<br/>"
    }

    htmlStr += "</div>"
    htmlStr += "</div>"
  }


  htmlStr += "</body>\n"
  htmlStr += "</html>"
  response.status(200).send(htmlStr)  
} /* End of specialDisplayFunc */

Solution

Just move the checking into a separate function which will be called from the event listener and take id as an argument.

Try this, replace the script part of the string with this:

  htmlStr += `

    <script>
          function check(button) {

            alert(button);
            window.location.href = 'RouteSpecial?p='+button

          }

          document.body.addEventListener('change', function (e) {
            check(e.target.id);
          });
      </script>

  `;