选择具有选择和复选框的表单的重复完整字段集

Question

There is an order form with a fieldset called "Samenstelling". That fieldset contains a dropdown select with numbers called "How Much".

If the number 2 is selected all other fields in that fieldset must appear twice, if the number 3 is selected all fields must appear in triple.

The fieldset that must be copied is here below. Also if the field is complete and filled in the complete form must be mailed to one email address. Could someone please help me ?

   <fieldset id="fbrp__15"><legend>Samenstelling</legend> 
<div class="required"><label for="fbrp__201">How much</label>
 <select class="cms_dropdown" name="cntnt01fbrp__201">
 <option value=""> Selecteer &eacute;&eacute;n</option>
 <option value="1" selected="selected">1</option>
 <option value="2">2</option>
 <option value="3">3</option></select>

    </div> <div class="required"><label for="fbrp__35">Soort Sub*</label><select class="copy" name="cntnt01fbrp__35"><option value=""> Selecteer &eacute;&eacute;n</option><option value="11">Beef</option><option value="17">Chicken Fajita</option><option value="13">Chicken Teriyaki</option><option value="14">Gegrilde Kipfilet</option><option value="1" selected="selected">Ham</option><option value="7">Italian B.M.T.</option><option value="5">Kalkoenfilet</option><option value="2">Kalkoenfilet & Ham</option><option value="3">Meatball Marinara</option><option value="8">Spicy Italian</option><option value="12">Steak & Cheese</option><option value="10">Subway Club</option><option value="15">Subway Melt</option><option value="4">Surimi Crab</option><option value="9">Tonijn</option><option value="6">Veggie Delite</option><option value="16">Veggie Patty</option></select></div> <div><label    for="fbrp__36">Lengte</label><select class="copy" name="cntnt01fbrp__36"><option value=""> Selecteer &eacute;&eacute;n</option><option value="1" selected="selected">15 cm</option><option value="2">30 cm</option></select></div> <div><label for="fbrp__37">Soort brood</label><select class="copy" name="cntnt01fbrp__37"><option value=""> Selecteer &eacute;&eacute;n</option><option value="1" selected="selected">Bruin</option><option value="2">Sesam</option><option value="3">Honey Oat</option><option value="4">Wit</option><option value="5">Cheese & Oregano</option></select></div> <div><label for="fbrp__38">Getoast</label><select class="copy" name="cntnt01fbrp__38"><option value=""> Selecteer &eacute;&eacute;n</option><option value="1" selected="selected">Ja</option><option value="2">Nee</option></select>
    </div><div><label for="fbrp__39">        Kaas</label><select class="copy"    name="cntnt01fbrp__39"><option value=""> Selecteer &eacute;&eacute;n</option><option value="1" selected="selected" >Pittig</option><option value="2">Normaal</option><option value="3">Geen</option></select></div><div><label for="fbrp__40">Extra kaas*</label><select class="copy" name="cntnt01fbrp__40"><option value=""> Selecteer &eacute;&eacute;n</option><option value="1" selected="selected">Ja</option><option value="2">Nee</option></select>
    </div><div><label for="fbrp__41">Extra bacon*</label><select class="copy" name="cntnt01fbrp__41"><option value=""> Selecteer &eacute;&eacute;n</option><option value="1" selected="selected">Ja</option><option value="2">Nee</option></select>
    </div> <div><label for="fbrp__42">Dubbel vlees*</label><select class="copy" name="cntnt01fbrp__42"><option value=""> Selecteer &eacute;&eacute;n</option><option value="1" selected="selected">Ja</option><option value="2">Nee</option></select>
    </div><div>* Bijkomende kosten.</div><div>Groenten</div> <div><div><input type="checkbox" class="copy" name="cntnt01fbrp__43[]" value="1"  id="fbrp__43_1_0" />
    &nbsp;<label for="fbrp__43_1_0">Sla</label></div><div><input type="checkbox" class="copy" name="cntnt01fbrp__43[]" value="2"  id="fbrp__43_1_1" />
    &nbsp;<label for="fbrp__43_1_1">Komkommer</label></div><div><input type="checkbox" class="copy" name="cntnt01fbrp__43[]" value="3"  id="fbrp__43_1_2" />
   &nbsp;<label for="fbrp__43_1_2">Tomaat</label></div><div><input type="checkbox" class="copy" name="cntnt01fbrp__43[]" value="4"  id="fbrp__43_1_3" />
   &nbsp;<label for="fbrp__43_1_3">Augurk</label></div><div><input type="checkbox" class="copy" name="cntnt01fbrp__43[]" value="5"  id="fbrp__43_1_4" />
   &nbsp;<label for="fbrp__43_1_4">Paprika</label></div><div><input type="checkbox" class="copy" name="cntnt01fbrp__43[]" value="6"  id="fbrp__43_1_5" />
   &nbsp;<label for="fbrp__43_1_5">Ui</label></div><div><input type="checkbox" class="copy" name="cntnt01fbrp__43[]" value="7"  id="fbrp__43_1_6" />
   &nbsp;<label for="fbrp__43_1_6">Pepers</label></div><div><input type="checkbox" class="copy" name="cntnt01fbrp__43[]" value="8"  id="fbrp__43_1_7" />
   &nbsp;<label for="fbrp__43_1_7">Olijven</label></div></div>                                 <div>Saus</div> <div><div><input type="checkbox" class="copy" name="cntnt01fbrp__44[]" value="1"  id="fbrp__44_1_0" />
   &nbsp;<label for="fbrp__44_1_0">Chipotle Soutwest</label></div><div><input type="checkbox" class="copy" name="cntnt01fbrp__44[]" value="2"  id="fbrp__44_1_1" />
   &nbsp;<label for="fbrp__44_1_1">Honey Mustard</label></div><div><input type="checkbox" class="copy" name="cntnt01fbrp__44[]" value="3"  id="fbrp__44_1_2" />
   &nbsp;<label for="fbrp__44_1_2">Sweet Onion Mayonaise</label></div><div><input type="checkbox" class="copy" name="cntnt01fbrp__44[]" value="4"  id="fbrp__44_1_3" />
   &nbsp;<label for="fbrp__44_1_3">BBQ</label></div><div><input type="checkbox" class="copy" name="cntnt01fbrp__44[]" value="5"  id="fbrp__44_1_4" />
   &nbsp;<label for="fbrp__44_1_4">Sweet Chilli</label></div><div><input type="checkbox" class="copy" name="cntnt01fbrp__44[]" value="6"  id="fbrp__44_1_5" />
   &nbsp;<label for="fbrp__44_1_5">Knoflooksaus</label></div><div><input type="checkbox" class="copy" name="cntnt01fbrp__44[]" value="7"  id="fbrp__44_1_6" />
   &nbsp;<label for="fbrp__44_1_6">Geen</label></div></div> </fieldset> 

Answer 1

You can do it like this:

HTML

Check out my fiddle to newly added divs

id="fieldcontwrapper" and id="fieldcont"

jQuery

$(".cms_dropdown").live('change', function () {

    var howmuch = $(this).val();
    var data = $("#fieldcont").html(); // DATA TO DUPLICATE

    // IF SELECTED <= 1, THEN REMOVE ALL DUPLICATES EXCEPT 1
    if (howmuch <= 1) {
        $("#fieldcontwrapper #fieldcont").not(':first').remove();
    } else {
        for (var i = 0; i < howmuch; i++) {
            $("#fieldcontwrapper")
            .append('<div id="fieldcont"> <hr />' + data + '</div>');
        }
    }

});

jSFiddle: http://jsfiddle.net/ZACXL/1/