Getting the value of a select element by ID

Question

Possible Duplicate:
Why does jQuery or a DOM method such as `getElementById` not find the element?

I'm sure this is obvious, but 2 hrs of head banging. Trying to get the value from each of my Select boxes:

<table>
<tr><td>Team</td><td>Games</td><td>Players</td></tr>
<tr><td><div id="selTeam">
<select name="teams" id="teams" onChange="sndReq(this)"  >
  <option value="-1">-- Not Set --</option>
</select>
</div></td>
<td><div id="selGames">
<select name="games" id="games" onChange="sndReq(this)" )" >
  <option value="-1">-- Not Set --</option>
</select>
</div></td>
<td><div id="selPlayers">
<select name="players" id="players" onChange="sndReq(this)" )" >
  <option value="-1">-- Not Set --</option>
</select>
</div></td></tr>
</table>

Here is the javascript I am using, the getElementById keeps returning a null.

        var selbox = document.getElementById("teams");
        var idx = selbox.selectedIndex;
        var teamValue = selbox.options[idx].value;

        var selbox = document.getElementById("games");
        var idx = selbox.selectedIndex;
        var gameValue = selbox.options[idx].value;

        var selbox = document.getElementById("players");
        var idx = selbox.selectedIndex;
        var playerValue = selbox.options[idx].value;

I'm trying not to use JQuery.

Thanks!

When/how are you calling `document.getElementById` (these lines of code)? The code itself looks fine, I assume you are calling it before the element exists. If so, please have a look at http://stackoverflow.com/q/14028959/218196. Otherwise, please provide more information about the context of this code and preferably a http://jsfiddle.net/ demo. — Felix Kling, Jan 20 '13 at 17:24

score 1 · Accepted Answer · answered Jan 20 '13 at 17:29

These are some of the reasons that document.getElementById("teams"); might return null:

There is no object in the document with id="teams".
You are running the code too early in the document loading process before the content has been loaded. You can run this code at the end of the <body> after the relevant content. You cannot run this code from the <head> section.
You have some sort of HTML error that causes the id="teams" to not be interpreted properly.
The HTML is being dynamically inserted in the page (by some other javascript) so it is not present at the time you run the code. In this case, you would have to wait until after it was inserted into the document before looking for it.
The HTML is in a frame so you are looking for it in the wrong document.

The most common mistake is that you are running the code too early and you must either wait for the DOM to load before running the code or you must trigger the code from the end of the <body> tag right before </body>.

It would be great if you could add some aspects of your answer to http://stackoverflow.com/a/14028960/218196 :) (the Ajax and iframe part specifically). — Felix Kling, Jan 20 '13 at 17:34
Thank you! I was dynamically re inserting the code and my code did not include the ID value. Amazing you were able to target that without more info!!! — Code After Dark, Jan 20 '13 at 17:38
@FelixKling - feel free to add any of these items that seem relevant to your answer [here](http://stackoverflow.com/a/14028960/218196). — jfriend00, Jan 20 '13 at 17:49

score 1 · Answer 2 · answered Jan 20 '13 at 17:31

You're code is fine. Here's a working example. Make sure you run the JS after the HTML is rendered. Either put it at the bottom of the body, or run it in window.onload.

This should work fine:

<table>
<tr><td>Team</td><td>Games</td><td>Players</td></tr>
<tr><td><div id="selTeam">
<select name="teams" id="teams" onChange="sndReq(this)"  >
  <option value="-1">-- Not Set --</option>
</select>
</div></td>
<td><div id="selGames">
<select name="games" id="games" onChange="sndReq(this)" )" >
  <option value="-1">-- Not Set --</option>
</select>
</div></td>
<td><div id="selPlayers">
<select name="players" id="players" onChange="sndReq(this)" )" >
  <option value="-1">-- Not Set --</option>
</select>
</div></td></tr>
</table>
<script type="text/javascript" language="javascript">
        var selbox = document.getElementById("teams");
        var idx = selbox.selectedIndex;
        var teamValue = selbox.options[idx].value;

        var selbox = document.getElementById("games");
        var idx = selbox.selectedIndex;
        var gameValue = selbox.options[idx].value;

        var selbox = document.getElementById("players");
        var idx = selbox.selectedIndex;
        var playerValue = selbox.options[idx].value;
</script>

Getting the value of a select element by ID

2 Answers2