title: Javascript: Trying to show different forms based on drop down value?
body: <p>I'm trying to display different forms based on the value of the selected drop down. I've got it almost all working, although it seems that when two values both display the same form it gives me an error.</p>
  
  <p>Here is <strong><a href="http://jsfiddle.net/miiicheellee/f4PV4/186/" rel="nofollow">the jsfiddle</a></strong></p>
  
  <p>And the code:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;select id="C002_ctl00_ctl00_C022_ctl00_ctl00_dropDown" name="form_select"&gt;
      &lt;option value=""&gt;-- Select an Option --&lt;/option&gt;
      &lt;option value="Buy A Product"&gt;Buy A Product&lt;/option&gt;
      &lt;option value="Support"&gt;Support&lt;/option&gt;
      &lt;option value="Ask A Question"&gt;Ask A Question&lt;/option&gt;
      &lt;option value="Literature Request"&gt;Literature Request&lt;/option&gt;
      &lt;option value="AE Account"&gt;A&amp;E Account&lt;/option&gt;
  &lt;/select&gt;
  &lt;div id="C006_ctl00_ctl00_C006"&gt;Zip Code&lt;/div&gt;
  &lt;div id="C007_ctl00_ctl00_C001"&gt;Support&lt;/div&gt;
  &lt;div id="C008_ctl00_ctl00_C003"&gt;Ask A Question&lt;/div&gt;
  &lt;div id="C009_ctl00_ctl00_formControls"&gt;Brochures&lt;/div&gt;
  &lt;div id="C012_ctl00_ctl00_formControls"&gt;A&amp;E Account Header&lt;/div&gt;
  &lt;div id="C013_ctl00_ctl00_formControls"&gt;Literature Header&lt;/div&gt;
  &lt;div id="C010_ctl00_ctl00_formControls"&gt;Street Address&lt;/div&gt;
  &lt;div id="C006_ctl00_ctl00_C008"&gt;Product Interest&lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#C006_ctl00_ctl00_C006{display:none;}
  #C006_ctl00_ctl00_C008{display:none;} 
  #C007_ctl00_ctl00_C001{display:none;}
  #C008_ctl00_ctl00_C003{display:none;} 
  #C009_ctl00_ctl00_formControls{display:none;} 
  #C010_ctl00_ctl00_formControls{display:none;} 
  #C013_ctl00_ctl00_formControls{display:none;} 
  #C012_ctl00_ctl00_formControls{display:none;} 
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>document.getElementById('C002_ctl00_ctl00_C022_ctl00_ctl00_dropDown').addEventListener('change', function () {
      var style = this.value == "Buy A Product" ? 'block' : 'none';
      document.getElementById('C006_ctl00_ctl00_C006').style.display = style;
       document.getElementById('C006_ctl00_ctl00_C008').style.display = style;
  });
  
  document.getElementById('C002_ctl00_ctl00_C022_ctl00_ctl00_dropDown').addEventListener('change', function () {
      var style = this.value == "Support" ? 'block' : 'none';
      document.getElementById('C007_ctl00_ctl00_C001').style.display = style;
  });
  
  document.getElementById('C002_ctl00_ctl00_C022_ctl00_ctl00_dropDown').addEventListener('change', function () {
      var style = this.value == "Ask A Question" ? 'block' : 'none';
      document.getElementById('C008_ctl00_ctl00_C003').style.display = style;
  });
  
  document.getElementById('C002_ctl00_ctl00_C022_ctl00_ctl00_dropDown').addEventListener('change', function () {
      var style = this.value == "Literature Request" ? 'block' : 'none';
      document.getElementById('C010_ctl00_ctl00_formControls').style.display = style;
      document.getElementById('C009_ctl00_ctl00_formControls').style.display = style;
  });
  
  document.getElementById('C002_ctl00_ctl00_C022_ctl00_ctl00_dropDown').addEventListener('change', function () {
      var style = this.value == "AE Account" ? 'block' : 'none';
      document.getElementById('C012_ctl00_ctl00_formControls').style.display = style;
      document.getElementById('C010_ctl00_ctl00_formControls').style.display = style;
  });
  </code></pre>
  
  <p>So when 'Literature Request' is selected, it's supposed to display Brochures and Street Address. When A&amp;E Account is selected it is supposed to show 'A&amp;E Account Header' and 'Street Address'. Both are supposed to display 'Street Address', although only A&amp;E Account is displaying street address. Does anyone know why? I'm not all that fantastic at javascript... and I apologize for the terrible ID names. They were automatically given and I haven't changed them.</p>