Question

I have a select box:

<select id="steps_number">
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
</select>

Now, if the user selects “4”, then 4 input boxes needed to be added to the page, if he changes his selection to 8, 8 input boxes need to be there, an so on…

And also, the input boxes names are important, I’m gonna send the form values to another page for processing and inserting the data into db, how I could know/get the newly made input boxes names?

Answer 1

Very simple example (also demonstrated here):

// bind to when the drop-down list changes
$('#steps_number').change(function(){    
    // find out the number to display
    var count = $(this).val();

    // Try to keep the fields already on the page. Remove anything
    // that exceeds the count
    $('#steps input:gt('+(count-1)+')').remove();

    // But if it doesn't have enough, add more
    for (var i = $('#steps input').length; i < count; i++){
        $('<input>',{type:'text',id:'step'+(i+1),name='step'+(i+1)}).appendTo('#steps');
    }
});

This assumes you want the following structure for your inputs:

<div id="steps">
  <input type="text" id="step1" name="step1" />
  <input type="text" id="step2" name="step2" />
  <input type="text" id="step3" name="step3" />
  <!-- .... -->
</div>

And with regards to server-side, you’ll now see the inputs using $_REQUEST['step1'], $_REQUEST['step2'], etc. Or, depending on your form method, they’ll show up in $_POST or $_GET as well.