Creating form fields with select field value
<p>I'm currently creating a booking form for users to be able to book places at an event. What i would like to do is create form fields via the select input for number of places. For example if the user selects 3 in the select field, then 3 name input fields will be created. The maximum amount of places is 12.</p>

<p>The only way I have managed to do this is using the following script, which shows the amount of fields selected by the user and adds a display none to all the others, this is a problem when validating the form as it is picking up the hidden fields too and wont let me submit the form. For example if the user selects 3, 3 inputs are shown but the remaining 9 are hidden.</p>

<pre><code>&lt;script type="text/javascript"&gt;
$(function () {

  $(".limit").hide();
  //set panels group
  var panels = $(".limit", "#delegate_panels"); 
  $('.delegate-number').change( function() {
    //hide any previously shown panels
    $(panels).hide();
    //show the slice
    $(panels).slice(0, parseInt($(this).val())).show();
  });

});
&lt;/script&gt;
</code></pre>

<p>Below is the code for the select field</p>

<pre><code>&lt;span&gt;
  &lt;strong&gt;Number of delegates&lt;/strong&gt;
&lt;/span&gt;
&lt;select name="quantity" class="delegate-number"&gt;
  &lt;option&gt;Please select...&lt;/option&gt;
  &lt;option value="1"&gt;1&lt;/option&gt;
  &lt;option value="2"&gt;2&lt;/option&gt;
  &lt;option value="3"&gt;3&lt;/option&gt;
  &lt;option value="4"&gt;4&lt;/option&gt;
  &lt;option value="5"&gt;5&lt;/option&gt;
  &lt;option value="6"&gt;6&lt;/option&gt;
  &lt;option value="7"&gt;7&lt;/option&gt;
  &lt;option value="8"&gt;8&lt;/option&gt;
  &lt;option value="9"&gt;9&lt;/option&gt;
  &lt;option value="10"&gt;10&lt;/option&gt;
  &lt;option value="11"&gt;11&lt;/option&gt;
  &lt;option value="12"&gt;12&lt;/option&gt;
&lt;/select&gt;
</code></pre>

<p>The code below is repeated 12 times and wrapped in #delegate_panels.</p>

<pre><code>&lt;li class="limit"&gt;
  &lt;div class="del-wrap"&gt;
    &lt;span&gt;Title:&lt;/span&gt;
    &lt;select name="item_options[title_1]" id="title1"&gt;
      &lt;option value=""&gt;--&lt;/option&gt;
      &lt;option value="Mr."&gt;Mr.&lt;/option&gt;
      &lt;option value="Mrs."&gt;Mrs.&lt;/option&gt;
      &lt;option value="Miss."&gt;Miss.&lt;/option&gt;
      &lt;option value="Dr."&gt;Dr.&lt;/option&gt;
      &lt;/select&gt;
  &lt;/div&gt;

  &lt;div class="name-wrap"&gt;
    &lt;span&gt;Full Name:&lt;/span&gt;
    &lt;input type="text" id="name1" name="name1" value="" size="30" /&gt;
  &lt;/div&gt; 
&lt;/li&gt;
</code></pre>

<p>Basically I would like it to do what the script above does, but to create the elements rather than displaying a slice and hiding the rest, which would then enable me to validate all the name fields and not have the hidden fields preventing the form submission.</p>

<p>Any thoughts would be much appreciated.</p>
