Question

I am trying to find a better way to gather multiple input. At the moment, I am using a slider to represent how many items a user wishes to enter. If a user say selects 3 then I am looking for a way to display a way for them to enter 3 items.

I guess what I need is say if a user selects 3 with the slider, then I need to display 3 input elements with a certain width using the same ID. Say like a bank may ask for your pin. Is this possible. In my example, #boxnumber is the div that needs to be created. Many thanks

$(function() {
$("#boxnumber").hide();
$("#slider").live('change', function() {

if($(this).val()>0)
  $("#boxnumber").addClass("ui-input-text").show(1000);
else
if ($(this).val()==0)
  $("#boxnumber").hide(1000);

 });
});

+++EDIT+++

<div id="boxnumber">
  <label for="boxamount">Enter box numbers *</label>
  <input type="text" name="boxamount" id="boxamount" value="" />
</div>

This input is initially hidden.

Answer 1

Hopefully this will work:
http://jsfiddle.net/laheab/XkfsZ/4

$(function() {
   $("#slider").live('change', function() {
      $('#boxnumber').empty();
      for(var i = 0; i < $(this).val(); i++){
         $('#boxnumber').append(
            '<div>
              <label for="boxamount">Enter box ' + (i+1) +' number:</label>
              <input type="text" name="box-'+i+'-no" id="box-'+i+'-no" />
            </div>'
         );
          }
   });
});