title: how to use select element onchange event to fill hidden element
body: <p>Any help with this is greatly appreciated, as I've been pulling my hair out trying to make it work!</p>
  
  <p>I have a form with five select elements like this:</p>
  
  <pre><code> &lt;select name="program1" class="floatCtrl" id="cName" required="required" onchange="document.getElementByID('program1_text').value=this.options[this.selectedIndex].text"&gt;
      &lt;option value="" selected&gt;  &lt;/option&gt;
      &lt;option value="1"&gt;  Break Dancing 7/2/2013 $40.00&lt;/option&gt;
      &lt;option value="2"&gt;  Guitar 7/10/2013 $40.00&lt;/option&gt;
      &lt;option value="3"&gt;  Drums 7/12/2013 $40.00&lt;/option&gt;
      &lt;option value="4"&gt;  Drawing 6/19/2013 $78.00&lt;/option&gt;
      &lt;option value="5"&gt;  Watercolor Painting 6/19/2013 $78.00&lt;/option&gt;
      &lt;option value="6"&gt;  Kids Art 8/7/2013 $30.00&lt;/option&gt;
      &lt;option value="7"&gt;  Book Making 6/12/2013 $40.00&lt;/option&gt;
      &lt;option value="8"&gt;  Writing 6/25/2013 $50.00&lt;/option&gt;
      &lt;option value="9"&gt;  Dog Obedience 6/5/2013 $45.00&lt;/option&gt;
      &lt;option value="10"&gt; Skateboarding 7/30/2013 $40.00&lt;/option&gt;
      &lt;option value="11"&gt; Dodgeball 8/7/2013 $5.00&lt;/option&gt;
      &lt;option value="12"&gt; Jumprope 8/6/2013 $25.00&lt;/option&gt;
      &lt;option value="13"&gt; Swimming 6/2/13 $40.00&lt;/option&gt;
      &lt;option value="14"&gt; Games 7/2/2013 $20.00&lt;/option&gt;
      &lt;option value="15"&gt; Tennis 1 6/18/2013 $30.00&lt;/option&gt;
      &lt;option value="16"&gt; Tennis 2 6/25/2103 $30.00&lt;/option&gt;
      &lt;option value="17"&gt; Tennis 3 7/2/2013 $25.00&lt;/option&gt;
      &lt;option value="18"&gt; Tennis 4 7/16/2013 $25.00&lt;/option&gt;
      &lt;option value="19"&gt; Tennis 5 7/23/2013 $35.00&lt;/option&gt;
      &lt;option value="20"&gt; Tumbling 5/23/2013 $25.00&lt;/option&gt;
      &lt;option value="21"&gt; Backyard Discovery 7/20/2013 $5.00&lt;/option&gt;
      &lt;option value="22"&gt; Applegate Discovery 7/27/2013 $10.00&lt;/option&gt;
      &lt;option value="23"&gt; Mountain Adventure 8/3/2013 $10.00&lt;/option&gt;                                                 
  &lt;/select&gt;
  </code></pre>
  
  <p>and a hidden input for each one like this:</p>
  
  <pre><code>&lt;input type="hidden" name="program1_text" id="program1_text" value="" /&gt;
  </code></pre>
  
  <p>I'm trying to fill the value of the hidden element "program1_text" with the text from the selected option with the onchage event of the select element "program1". I have researched a lot and this solution is one that I keep coming across, but I just can't get it to work. Can anyone see any mistake?</p>