title: javascript obtain value of select option without submitting form
body: <p>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).</p>
  
  <p>Here's what I have currently (doesn't work):</p>
  
  <p><b>html</b></p>
  
  <pre><code>&lt;select id="color" &gt;
      &lt;option value=""&gt;select:&lt;/option&gt;
      &lt;option value="blue"&gt;Blue&lt;/option&gt;
      &lt;option value="red"&gt;Red&lt;/option&gt;
      &lt;option value="yellow"&gt;Yellow&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p><br/>
  <b>javascript</b></p>
  
  <pre><code>document.getElementById('color').onchange = function() {
      var colorInput = this.value;
      console.log(colorInput);
  };
  </code></pre>
  
  <p><br/></p>
  
  <p><b>updated</b></p>
  
  <p>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.</p>
  
  <p>Here's a jsfiddle that is analogous to how I need to use it: <a href="http://jsfiddle.net/agvRn/2/" rel="nofollow">http://jsfiddle.net/agvRn/2/</a></p>
  
  <p>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".</p>