How to get the value of selected option-CodePudding

i am trying to get the value of the selected option but i couldn't, any help:

i am pretty new to JavaScript

help is very appreciated.

here is my code

btn = document.getElementById('submitbtn')
btn.addEventListener('click', checkOverallRating);
let overall = document.querySelector('select');
let overallValue = overall.options[overall.selectedIndex].text
function checkOverallRating(e){
  if (overall == 0) {
    alert(overallValue);
    e.preventDefault();
  }
  else {
    alert(overallValue);
    e.preventDefault();
  }
}

<select method="POST" name="OverallRating" id="OverallRating"  aria-label=".form-select-lg example">
  <option value= 0 selected>Select the desired Overall Rating</option>
  <option value="5">Outstanding Performance</option>
  <option value="4">Excceds Target</option>
  <option value="3">Meets Target</option>
  <option value="2">Partially Meets Target</option>
  <option value="1">Needs Improvement</option>
</select>
      
<button type="submit" id="submitbtn">Submit</button>

CodePudding user response：

let answer = document.querySelector('#OverallRating').value;

CodePudding user response：

The reason is that below code snippets is outside checkOverallRating(),it will executed once your page is loaded and keeps the same no matter which option you select

    let overall = document.querySelector('select');
    let overallValue = overall.options[overall.selectedIndex].text

In order to make it works as your expected,you need to put them inside checkOverallRating()

<form>
<select method="POST" name="OverallRating" id="OverallRating"  aria-label=".form-select-lg example">
        <option value= 0 selected>Select the desired Overall Rating</option>
        <option value="5">Outstanding Performance</option>
        <option value="4">Excceds Target</option>
        <option value="3">Meets Target</option>
        <option value="2">Partially Meets Target</option>
        <option value="1">Needs Improvement</option>
      </select>
      
      <button type="submit" id="submitbtn">Submit</button>

</form>

<script>
    btn = document.getElementById('submitbtn')
    btn.addEventListener('click', checkOverallRating);
    function checkOverallRating(e){
        let overall = document.querySelector('select');
        let overallValue = overall.options[overall.selectedIndex].text
        if (overall == 0) {
            alert(overallValue);
            e.preventDefault();
        }
        else {
            alert(overallValue);
            e.preventDefault();
        }
        
    }
</script>

CodePudding user response：

You're reading the selected value immediately upon loading the page, before the user has selected anything.

Don't try to read the selected value until after the user has selected something. Such as in your button click handler:

btn = document.getElementById('submitbtn')
btn.addEventListener('click', checkOverallRating);
function checkOverallRating(e){
  // move these two lines into the function...
  let overall = document.querySelector('select');
  let overallValue = overall.options[overall.selectedIndex].text

  if (overall == 0) {
    alert(overallValue);
    e.preventDefault();
  } else {
    alert(overallValue);
    e.preventDefault();
  }
}

<select method="POST" name="OverallRating" id="OverallRating"  aria-label=".form-select-lg example">
  <option value= 0 selected>Select the desired Overall Rating</option>
  <option value="5">Outstanding Performance</option>
  <option value="4">Excceds Target</option>
  <option value="3">Meets Target</option>
  <option value="2">Partially Meets Target</option>
  <option value="1">Needs Improvement</option>
</select>
<button type="submit" id="submitbtn">Submit</button>

As an aside... Your if statement makes no sense because an HTML element object will never equal 0. But the good news is that the if statement is also entirely unnecessary because you're doing the same thing in both cases. So just remove it:

btn = document.getElementById('submitbtn')
btn.addEventListener('click', checkOverallRating);
function checkOverallRating(e){
  // move these two lines into the function...
  let overall = document.querySelector('select');
  let overallValue = overall.options[overall.selectedIndex].text

  alert(overallValue);
  e.preventDefault();
}

<select method="POST" name="OverallRating" id="OverallRating"  aria-label=".form-select-lg example">
  <option value= 0 selected>Select the desired Overall Rating</option>
  <option value="5">Outstanding Performance</option>
  <option value="4">Excceds Target</option>
  <option value="3">Meets Target</option>
  <option value="2">Partially Meets Target</option>
  <option value="1">Needs Improvement</option>
</select>
<button type="submit" id="submitbtn">Submit</button>

CodePudding user response：

""" You should fetch the id of the select input and it will return the value of the selected option"""
  answer=document.getElementById(OverallRating).value;