Question

HTML

<select name="select" id="select">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>
<br>
<input id="bla" type="text" name="attendant[]">

JQuery

$("select").change(function() {

    var select = parseFloat($('#select').val());
    $('#bla').after('<br><input id="bla" type="text" name="attendant[]">');

 });​

Hi guys, above is the code I created.
I need the select box on change to update the the number of form field base on the value of the select box. If user change to 4 there should be 4 form field display on screen. If value change to 1 there should only be one on the screen.

Not so good with JQuery just started few days ago so any help is appreciated.

Thanks

Here is the JSFiddle I’m working on.
http://jsfiddle.net/andrewvmail/b5Gqg/3/

Answer 1

Try this

HTML

   <select name="select" id="select">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>
<br>
<div class="template" style="display:none">
   <input type="text" name="attendant[]" />
</div>
<div id="container" >

</div>

Javascript

$("select").change(function() {

    var select = parseInt($('#select').val() , 10);
    var $clone = $('.template').clone().html();
    console.log($clone);
    var html = '';
    for(var i = 0;i< select ; i++){
        html += $clone;
    }
    $('#container').empty().html(html);
 }).change();​

You can achieve the same without using .clone() .. That was unnecessary..

$("select").change(function() {

    var select = parseInt($('#select').val() , 10);
    var $clone = $('.template').html();
    var html = '';
    while(select > 0){
        html += $clone;
        select--;
    }
    $('#container').empty().html(html);
 }).change();​

Check Fiddle

Without clone