CODEWITHSUNDEEP
javascripthtmldrop-down-menu
Olivia Brown
Olivia Brown

Reputation: 632

Javascript not working while getting value from Dropdown

I have written a simple HTML page where, on a button click event, the selected value from a drop down is printed in a textbox. I have used javascript for this task. I don't know why it's not working, though the logic seems ok to me. Any help would be appreciated.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Sample</title>
</head>

<body>
    <table align="center">
        <tr>
            <td>
                <select id="drpdwn" name="drpdwn">
                     <option selected>Select</option>
                     <option value="1">1</option>
                     <option value="2">2</option>
                     <option value="3">3</option>
                     <option value="4">4</option>
                     <option value="5">5</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>
                <input type="text" name="textbox" id="textbox">
            </td>
        </tr>
        <tr>
            <td>
                <button onclick="myFunction()">Go</button>
            </td>
        </tr>
    </table>

    <script>
    myFunction() {
        var el = document.getElementById("drpdwn");
        var sel_value = el.options[el.selectedIndex].value;
        document.getElementById("textbox").value = sel_value;
    }
    </script>

</body>
</html>

Upvotes: 0

Views: 3839

Answers (2)

Osvaldo Maria
Osvaldo Maria

Reputation: 361

I believe the problem was the fact that you are trying to get the value of the select using el.options[el.selectedIndex].value; I have made minimal corrections to your snippet in order for it to work and also used querySelector which is much better in terms of reusability than getElementById

document.querySelector('.btn').addEventListener('click',function() {
  var el = document.querySelector("#drpdwn");
  var sel_value = el.value;
  document.querySelector("#textbox").value=sel_value;
});
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Sample</title>
</head>

<body>
  <table align="center">
    <tr>
      <td>
        <select id="drpdwn" name="drpdwn">
                     <option selected>Select</option>
                     <option value="1">1</option>
                     <option value="2">2</option>
                     <option value="3">3</option>
                     <option value="4">4</option>
                     <option value="5">5</option>
                </select>
      </td>
    </tr>
    <tr>
      <td>
        <input type="text" name="textbox" id="textbox">
      </td>
    </tr>
    <tr>
      <td>
        <button class="btn" type="submit">Go</button>
      </td>
    </tr>
  </table>

</body>

</html>

Upvotes: 1

Mass C
Mass C

Reputation: 41

To get the option value from the select element you can just do el.value

This is version does the job using only vanilla javascript without the jQuery library:

document.addEventListener("DOMContentLoaded", function(event) { 
    var el = document.getElementById("drpdwn");
    var button = document.getElementsByClassName('btn')[0];
    var textBox = document.getElementById("textbox");
    button.onclick = function() { 
        textBox.value = el.value;
    }
});

Upvotes: 1

Related Questions