Javascript not working while getting value from Dropdown

Question

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>

You are trying to use jQuery but have not included that javascript library in the html. Your console should have been throwing errors — Patrick Evans
– Patrick Evans, Commented Feb 27, 2018 at 21:48
Why using jquery for such a simple case? A queryselector call would do the trick without the overhead of a third party js file — Pierre
– Pierre, Commented Feb 27, 2018 at 22:00
You code works after you have changed (to remove $(...).click). jsfiddle.net/2mhftb6n — Nivas
– Nivas, Commented Feb 27, 2018 at 22:04

Osvaldo Maria · Accepted Answer · 2018-02-27 22:11:19Z

1

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>

edited Feb 27, 2018 at 22:11

answered Feb 27, 2018 at 22:02

Osvaldo Maria

3715 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Olivia Brown Over a year ago

I have updated the question, please have a look. I don't want to use jquery for such a simple task.

Osvaldo Maria Over a year ago

@OliviaBrown , I have updated my answer to not include jQuery.. please let me know if it works for you

Mass C · Accepted Answer · 2018-02-27 22:03:52Z

1

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;
    }
});

answered Feb 27, 2018 at 22:03

Mass C

414 bronze badges

Collectives™ on Stack Overflow

Javascript not working while getting value from Dropdown

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related