CODEWITHSUNDEEP
javascriptjqueryhtml
vickyian
vickyian

Reputation: 3

jQuery clone() to duplicate a form section is adding multiple sections at click

Working at a intranet application in ASP.NET MVC with the purpose to keep track of daily working activities of a specific group of employees i've designed the form using 2 columns. One for add/remove process buttons, and one for the process description witch holds the form itself with the necessary inputs for work process description.

One of the main requirements it's to add a new work process if necessary and that means duplicating entire fieldset. I mention that i can end up having 50+ work processes submitted by 1 single form. Now i've thought that .clone() method from jQuery will make it easy. But is having a weird effect.

EDIT:

The problem:

After 5 clicks the total count of fieldsets is: 9 and i should have 6(1 the original proces and the 5 clicks). After 6 clicks i'm having 17 new fieldsets in total, 7 click = 33 fieldsets in total.

After 2 days searching and a lot of googling i can't find the problem. Browser used is IE11 because is standard at company level. Any help is really appreciated.

Below is jquery event i'm using:

    var ACTIVITATEACORD = $("form[name=activitate_acord] > fieldset[data-main=1]").clone();

$('.relative.acord').on('click', function () {
        var num = $("form[name=activitate_acord] > fieldset").length;
        console.log(num);
        var newNum = new Number(num + 1);
        console.log(newNum);
        //var changeDataMainFieldset = ACTIVITATEACORD.data('main');
        //ACTIVITATEACORD.attr("data-main", newNum);
       
        //var changeNameMainFielset = ACTIVITATEACORD.attr('name', CombineStrings(ACTIVITATEACORD.attr("name"), '-', newNum));

        ACTIVITATEACORD.insertAfter('form[name=activitate_acord] > fieldset').last();      
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<!-- Lines removed for convenience-->
<fieldset name="activitati-accord-main-process-1" data-main="1">
   <fieldset name="descriere-proces-1" data-count="">
        <legend>Descriere proces</legend>

         <div class="form-group col-md-3">
         <label for="proces" class="control-label col-md-4 text-left">Proces:</label>
         <div class="col-xs-7">
          <select name="proces-1" data-id="proces-@(idCounter++)" class="form-control" required>
               <option value="">--</option>
               <option value="11">11</option>
               <option value="43">43</option>
               <option value="6423">6423</option>
           </select>
          </div>
          </div>
 <!--lines removed for conveninece-->
      </fieldset>
  </fieldset>

Thanks in advance for sharing!

Upvotes: 0

Views: 321

Answers (1)

Andreas
Andreas

Reputation: 21891

The order of operations matters :)

With:

.insertAfter('form[name=activitate_acord] > fieldset').last()

you're inserting the cloned element after each fieldset and then ask jQuery to give you the last fieldset

Change it to:

.insertAfter($('form[name=activitate_acord] > fieldset').last())

Now you're getting the last fieldset first and append the cloned element after the last fieldset only.

Upvotes: 2

Related Questions