CODEWITHSUNDEEP
javascripthtml
Ramy Khalil
Ramy Khalil

Reputation: 5

How to get the value of selected option

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" class="form-select form-select-lg mb-3" 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>

Upvotes: 0

Views: 54

Answers (4)

Tat
Tat

Reputation: 51

You should fetch the id of the select input and it will return the value of the selected option

document.getElementById(OverallRating).value;

Upvotes: 0

David
David

Reputation: 218827

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" class="form-select form-select-lg mb-3" 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" class="form-select form-select-lg mb-3" 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>

Upvotes: 0

flyingfox
flyingfox

Reputation: 13506

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" class="form-select form-select-lg mb-3" 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>

Upvotes: 0

Mahaveer Amrani
Mahaveer Amrani

Reputation: 26

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

Upvotes: 1

Related Questions