How do I return a specific string based on user input from a menulist option submission in JavaScript?

Question

I have the below HTML code that's just a menulist of a default option plus 4 options for the user to choose from, with a submit button. I'm trying to figure out how to write JavaScript code for when the submit button is clicked, the code refers back to the menulist option that the user had selected and returns a phrase that correlates to the option that the user had selected. I'm very new at coding in general, so please let me know if there's additional relevant information I need to provide on this (I tried to keep it succinct).

Code:

<label for="investmentHorizon">Investment Horizon:</label>
<select id="investmentHorizon">
    <option value="default">How many years are you planning to invest for? 
</option>
    <option name='horizonOption' value="ultraShortTerm">Less than 1 year</option>
    <option name='horizonOption' value="shortTerm">Between 1 and 3 years</option>
    <option name='horizonOption' value="mediumTerm">Between 3 and 10 
years</option>
    <option name='horizonOption' value="longTerm">More than 10 years</option>
</select>

<input id='submit' type='submit' value='Submit' name=''>

This answer https://stackoverflow.com/a/1085810/3880660 does not resolve your problem? — Mateus S. Vasconcelos, Sep 10 '20 at 19:49

score 1 · Answer 1 · edited Sep 11 '20 at 07:45

You can see a working example of Your code here (hint look in the console to see the result)

<label for="investmentHorizon">Investment Horizon:</label>
                      <select id="investmentHorizon">
                          <option value="default">How many years are you planning to invest for? 
  </option>
                          <option name='horizonOption' value="ultraShortTerm">Less than 1 year</option>
                          <option name='horizonOption' value="shortTerm">Between 1 and 3 years</option>
                          <option name='horizonOption' value="mediumTerm">Between 3 and 10 
  years</option>
                          <option name='horizonOption' value="longTerm">More than 10 years</option>
                      </select>

  <input id='submit' type='submit' value='Submit' name='' onclick="changeSelection()">

  <script>
    function changeSelection() {
      let x = document.getElementById("investmentHorizon").value;
      console.log('You have selected ' + x)
    }
  </script>

You were looking for what are known as EventListeners and they are chains between a reaction on the UI (click, change, etc.) and the possible back-end (or any form of special actions) done by scripts.

Just for your info it would be more appreciated by the community if You do at least of a bit of research before posting here since this is a fairly simple thing to find.

Cheers and keep on learning!

score 0 · Answer 2 · answered Sep 10 '20 at 19:59

You can add this code to // here and try to understand it. I keep it simple.

let btn = document.getElementById('submit');

btn.addEventListener('click', function(event) {
  event.preventDefault();
  
  let options = document.getElementsByTagName('option');
  
  console.log("ici")
  for(let i = 0; i < options.length; i++) {
    if(options[i].selected)
      console.log(options[i].innerHTML);
  }
});

How do I return a specific string based on user input from a menulist option submission in JavaScript?

2 Answers2