javascript obtain value of select option without submitting form

Question

I'm trying to get the value of input select option without submitting the form (need to keep it available while displaying the live results). I then need to use this value with a global variable to be inserted in an array later on. Because I can't use submit, I need to find a way to update this value if the user changes the option (ie probably using onchange).

Here's what I have currently (doesn't work):

html

<select id="color" > <option value="">select:</option> <option value="blue">Blue</option> <option value="red">Red</option> <option value="yellow">Yellow</option> </select>

javascript

document.getElementById('color').onchange = function() { var colorInput = this.value; console.log(colorInput); };

updated

Okay, no using inline javascript, I get it. I updated the script above to reflect most of the answers I'm getting - which are not addressing my central problem. Tracking the input option value within the script is no problem; I need to the value as a global variable. For some reason I can't do it.

Here's a jsfiddle that is analogous to how I need to use it: http://jsfiddle.net/agvRn/2/

It should be able to track the select option (already can) and then must be able to use this value in a separate function - in this case inserting it into the paragraph field "show".

Rahil Wazir · Accepted Answer · 2014-05-30 07:17:07Z

2

Don't use inline JavaScript.

Try this (avoiding global variables):

(function() { var select_val; document.getElementById('color').addEventListener('change', function() { select_val = this.value; document.getElementById("show").innerHTML = select_val; }, false); })();

DEMO

edited May 30, 2014 at 7:17

answered May 29, 2014 at 21:06

Rahil Wazir

10.1k11 gold badges46 silver badges66 bronze badges

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

4 Comments

Josh Beam Over a year ago

@user3180105, just for clarification, the function is wrapped in what's called a "closure", making it so select_val can only be accessed inside the closure. This lets you have more control over the global namespace.

workabyte Over a year ago

this is a much cleaner solutions, my answer was just a way to solve your problem. you would be much better off digesting this solution and leveraging the pattern in the futre

user3180105 Over a year ago

My whole issue was that I need to use this input option as a global variable - "colorInput".

Rahil Wazir Over a year ago

@user3180105 You need to move it inside the onchange handler it should work. See my edit.

Josh Beam · Accepted Answer · 2014-05-29 21:03:44Z

Firstly, I would suggest you don't use the inline onchange attribute.

You can try this (see the jsfiddle):

document.getElementById('color').onchange = function() { var color = this.value; console.log(color); };

Better yet, use addEventListener:

document.getElementById('color').addEventListener('change', function() { var color = this.value; console.log(color); });

aside from not using the inline js, I already had this functionality. The whole problem is that I can't access the value outside of the onchange script.

workabyte · Accepted Answer · 2014-05-29 21:01:14Z

you may try

var colorInput; function colorCalc(value) { colorInput = value; console.log(colorInput); }

i think the issue is that you are trying to set the var from the method return but at the time you call the method you are not giving it a value

instead you should let the method set you value when the change event triggers it with the selected value

function colorCalc(value) { return value; } var colorInput = colorCalc(/*there is no value here value == undefined so will return undefined*/); console.log(colorInput);

Collectives™ on Stack Overflow

javascript obtain value of select option without submitting form

3 Answers 3

4 Comments

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

Comments

Related