title: Ignore Hidden Spans within Form
body: <p>I have a relatively simple need. I have an html form that contains a dynamic drop down that I built by using JS. When the first <code>select</code> is changed, a second (dependent) <code>select</code> appears. For example, the first <code>select</code> includes options for Ford, Toyota, and Honda. If the user selects "Ford" then another dropdown appears and allows the user to choose a model made by Ford (i.e. F150, Ranger, Fusion, etc...). I am using hidden <code>&lt;span&gt;</code> elements to show/hide the dependent drop downs, but the <code>select name</code> for all of the secondary drop downs is the same.</p>
  
  <p>The issue is that when I submit my form, I get all three "make" variables passed through my <code>$_GET</code> method. I have included an example for clarity:</p>
  
  <pre><code>&lt;span class="Ford"&gt;
      &lt;select name="make"&gt;
          &lt;option&gt;F150&lt;/option&gt;
          &lt;option&gt;Ranger&lt;/option&gt;
          &lt;option&gt;Fusion&lt;/option&gt;
      &lt;/select&gt;
  &lt;/span&gt;
  &lt;span class="Toyota"&gt;
      &lt;select name="make"&gt;
          &lt;option&gt;Prius&lt;/option&gt;
          &lt;option&gt;Tacoma&lt;/option&gt;
      &lt;/select&gt;
  &lt;/span&gt;
  &lt;span class="Honda"&gt;
      &lt;select name="make"&gt;
          &lt;option&gt;Civic&lt;/option&gt;
          &lt;option&gt;Accord&lt;/option&gt;
      &lt;/select&gt;
  &lt;/span&gt;
  </code></pre>
  
  <p>The JS function just shows/hides the various <code>spans</code> as appropriate... All I want to do is pass the variable in the span that is currently showing  on the page. Any ideas would be great!</p>