Grabbing select value using regular javascript DOM

Question

I was working on a script that grabs the value from the selected option in a drop down select list and assigns it to an object. The only problem I'm having is that it's saying I have a null object.

The .js is as follows:

    var s = document.getElementById('mode');
alert(s.options[s.options.selectedIndex].value);
function selectValue(){

  yo.newSelect(s.options[s.options.selectedIndex].value);
  return true;
}

The HTML is as follows:

 <div id="text_editing">
       <form action="javascript:;" method="post" onsubmit="editHomePage()">
       <select name="CYD" id="mode" onchange="selectValue()">
        <option value="Home">Home</option>
        <option value="About">About</option>
        <option value="Contact">Contact</option>
       </select>
<textarea name="sexyText" row="500" col=500">    
</textarea>
<input value="submit" name="text_submit" type="submit" onclick="selectValue()">
       </form>

I'm just looking for a solution in plain js. I not interested in using jQuery for such a small site.

1) On what browser are you testing this? - 2) NULL object is the result of the Alert box? — Dr.Kameleon
– Dr.Kameleon, Commented Mar 23, 2012 at 0:19
Chrome. The alert box doesn't pop up at all. I'm getting this info from firebug lite. — VinceOmega
– VinceOmega, Commented Mar 23, 2012 at 0:32

RobG · Accepted Answer · 2012-03-23 02:50:10Z

2

If all your options have a value, you can simply write:

alert(s.value);

which will return the value of the first selected option (so not suitable for multiple selects with more than one selected).

Incidentally, from your listener you could do:

<input type="submit" onclick="selectValue(this)">

then in the function:

function selectValue(el) {
  alert(el.form.mode.value);
}

answered Mar 23, 2012 at 2:50

RobG

148k32 gold badges180 silver badges216 bronze badges

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

2 Comments

VinceOmega Over a year ago

The first method you mentioned I did perviously on a different script but with numbers and it worked them. I might just do that. I tried using the other method you mentioned but it just told me 'form' was undefined. At which point I threw up my hands and made my values numbers like before.

RobG Over a year ago

All form controls in a form have a form property that references the form they are in. If they're not in a form, it won't have a useful value.

RMorrisey · Accepted Answer · 2012-03-23 00:18:46Z

1

It looks like initially, none of the options are selected; therefore, s.options[s.options.selectedIndex] would be null when the page first loads.

I would recommend using the Firebug plugin for Firefox to step through your code; you can easily identify these kinds of issues using the debugger.

answered Mar 23, 2012 at 0:18

RMorrisey

7,73911 gold badges59 silver badges77 bronze badges

3 Comments

VinceOmega Over a year ago

I actually have it for Chrome. I tried what you said to do, that is make one of the options selected="selected" by default but that didn't work out either.

RMorrisey Over a year ago

Using firebug, you should be able to tell which object is null, and what the value of selectedIndex is

VinceOmega Over a year ago

Yeah I checked out the DOM tab on in Firebug on both Chrome and Firefox, it was telling me that s was null. I didn't figure out a way to stuff the string value in it so I just made the value numbers and followed RobG's advice. Thanks to both of you!

Collectives™ on Stack Overflow

Grabbing select value using regular javascript DOM

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related