title: Disable hidden form input
body: <p>I have a form kinda like this:</p>
  
  <pre><code>&lt;form action="#" method="post"&gt;
   &lt;select name="phase"&gt;
     &lt;option&gt;1&lt;/option&gt;
     &lt;option&gt;2&lt;/option&gt;
     &lt;option&gt;3&lt;/option&gt;
   &lt;/select&gt;
   &lt;div data-phase="1"&gt;
    &lt;input type="text" name="info" /&gt;
   &lt;/div&gt;
   &lt;div data-phase="2"&gt;
    &lt;input type="text" name="info" /&gt;
   &lt;/div&gt;
   &lt;div data-phase="3"&gt;
    &lt;input type="text" name="info" /&gt;
   &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>By using JQuery, at any time, only one of the DIVs is displayed, corresponding to the value in the select box.</p>
  
  <p>The issue is that the value POSTed is overridden by the last text input, since they all have the same name. Is there away around this WITHOUT renaming the inputs?</p>