show form elements based on dropdown value

[nadiam]

what i want to do is show form based on the value of a dropdown list. like if value 2 then what appears is two forms of the same form.
example:

<div>
    How many? 
    <select name="options">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
</div>

<div id="test">

</div>

<form id="form1">
    <table>
        <tr><td>Name :</td><td><input type="text" name="name"></td></tr>
        <tr><td>Email : </td><td><input type="email" name="email"></td></tr>
        <tr><td><input type="submit" name="submit" value="Submit"></td></tr>
    </table>
</form>

so say value="3" is selected then form1 will be shown in <div id="test"> 3 times one after the other.

im thinking maybe use .append(), like append form1 into test. but how to append the form based on the value from the drop down list? wouldn't the input type="text" need different names? coz the forms will be submitted into database.

thanks in advance!

[minitauros]

The inputs will indeed need new names. Maybe you could add square brackets to the names, to make them an array? PHP will be able to work with that. Example:

$(document).ready(function()
{
    $('select[name=options]').change(function()
    {
        var number_of_forms_to_create = $(this).val();
        var form = $('form#form1').clone();
        var target = $('div#test');

        for(var i = 0; i < number_of_forms_to_create; i++)
        {
            var clone = form.clone();

            // Unset the form ID.
            clone.attr('id', '');

            clone.prependTo(target);
        }
    });
});

The input names should be changed to, for example, "name[]" and "email[]".

[nadiam]

ah.. clone we meet again. which is successfull btw, thanks minitauros.
but theres an issue. in my real form i have 3 radio buttons. one of the radio button have their function being to copy value from textbox1 to textbox2. when the form is cloned the radio buttons arent performing their functions and also say 2 forms are cloned which means now there are 6 radio buttons and i can only pick 1 out of those 6. i hope im making sense.

script for the radio button:

<script type="text/javascript">
    $(document).ready(function()
    {
        $("#living-me").click(function()
        {
            var line1 = $("#line1").val();
            var line2 = $("#line2").val();
            $("#child-line1").val(line1);
            $("#child-line2").val(line2);
        });
    });
</script>

radio buttons; the one with function copy is id="living-me":

<input type="radio" name="living[]" id="living-me"/>With Me<input type="radio" name="living[]" id="living-other"/>With Other Parent<input type="radio" name="living[]" id="living-own"/>Own</td></tr>

html where line1 and line2 are:

<tr><td>House Address</td></tr>
<tr><td>Line 1  :</td><td><input type="text" name="line1" id="line1" size="20" class="style" /></td>
<td>Mobile No :</td><td><input type="text" name="mobile" id="mobile" class="style" /></td></tr>
<tr><td>Line 2 :</td><td><input type="text" name="line2" id="line2" size="20" class="style" /></td>
<td>Office No :</td><td><input type="text" name="office" id="office" class="style" /></td></tr>

html where child-line1 and child-line2 are:

<tr><td>House Address</td></tr>
<tr><td>Line 1  :</td><td><input type="text" name="child-line1[]" id="child-line1" size="20" class="style" /></td>
<td>Mobile No :</td><td><input type="text" name="child-mobile[]" id="child-mobile" class="style" /></td></tr>
<tr><td>Line 2 :</td><td><input type="text" name="child-line2[]" id="child-line2" size="20" class="style" /></td>
<td>Office No :</td><td><input type="text" name="child-office[]" id="child-office" class="style" /></td></tr>