Creating Clones of Forms using jQuery

Question

using jQuery, how can you create a clone of a form without modifying the original form when a different value is selected in the clone. Currently, when selecting a value in the cloned form, the results that is returned is added to the results of the clone, as well as the original. I only want to results to appear for each unique form. Here is what i have:

 <script>
      $(document).ready(function() {

         shows / hides results based on selection

         $(".color-select").live("change" ,function(){
            if($(this).val() == 'red'){ 
              $('.red').removeClass('hide');

               // toggles sub menus
              $(this).parent('.controls').find('.submenu-select').removeClass('hide');
            }

            if($(this).val() == 'orange'){ 

              $('.orange').removeClass('hide');
              $(this).parent('.controls').find('.submenu-select').addClass('hide');
            }
            if($(this).val() == 'yellow'){ 
              $('.yellow').removeClass('hide');
              $(this).parent('.controls').find('.submenu-select').addClass('hide');
            }
            if($(this).val() == 'green'){ 
              $('.green').removeClass('hide');
              $(this).parent('.controls').find('.submenu-select').addClass('hide');
            }
          });

; 
         // Duplicates category select menu 

           $(".add-color").click(function(){
          $(".color-category").clone().removeClass('color-category').appendTo("#we-want-to").find('.submenu-select').addClass('hide');

        });


        $(".add-color-alternate").click(function(){
          $(".color-category-alternate").clone().removeClass('color-category-alternate').appendTo("#we-want-to").find('.submenu-select, .results-table').addClass('hide');

        });

Heres a fiddle with some html http://jsfiddle.net/mckenney42south/Z4yFs/

Thanks!

score 1 · Answer 1 · answered Sep 10 '12 at 06:32

The reason you're seeing dickiness between your form's original and cloned instances are twofold:

A form relies on the name attribute for correct submission. In some circumstances, submitting a form with duplicate-named fields will result in an array being sent to the server; in other cases it will overwrite.
Without seeing the rest of your form - the fiddle isn't particularly helpful, sorry - it looks to me like your jQuery selectors are likely returning elements from the clone as well. To combat this, you might give each instance of the form a unique ID and chain your form-altering logic from its own $('#form-n') object, where "n" is to be replaced with the sequential ID number of your form.

Creating Clones of Forms using jQuery

1 Answers1