Question

Duplicate Button in Forms

Forms

Updated July 13, 2017

asked on August 14, 2014

HI is there a possible way to add a duplicate button for tables?

in the picture above is a table for labour the detail for ex. SRN, Date, Rate and sometimes Technician would be the same for multiple rows. is there a way to add a duplicate button instead of an add button or next to the add button?

0 0

Answer

APPROVED ANSWER

replied on September 4, 2014 • Show version history

Here's a good start. It duplicates the entire row, including the row label.

CSS

.dup {
  cursor:pointer;
  padding-left:5px;
}
.dup:hover {text-decoration:underline;}

JavaScript

$(document).ready(function () {
  
  $('<span class="dup">Copy</span>').appendTo('td.action');
  $('.cf-table-add-row').click(addDuplicateButton);
  
  
  $(document).on('click','.dup', function(event) {
   $(event.target).closest('tr').clone().appendTo($(event.target).closest('tbody'));
   return;    
  });
  
  function addDuplicateButton() {
    $('<span class="dup">Copy</span>').appendTo('td.action:last');
    } 
});

Update: Using a span instead of a button. The button was doing some weird stuff with the submit button.

1 0

Replies

replied on August 14, 2014

To clarify, you'd like a button that adds a row and copies the info from one row into the new row?

0 0

View 1 previous reply

replied on August 26, 2014

Hi Eric,

Any ideas on how to achieve this? I think this would be a very useful feature if it was built into the base product.

Thanks

Sheldon

0 0

APPROVED ANSWER

replied on September 4, 2014 • Show version history

Here's a good start. It duplicates the entire row, including the row label.

CSS

.dup {
  cursor:pointer;
  padding-left:5px;
}
.dup:hover {text-decoration:underline;}

JavaScript

$(document).ready(function () {
  
  $('<span class="dup">Copy</span>').appendTo('td.action');
  $('.cf-table-add-row').click(addDuplicateButton);
  
  
  $(document).on('click','.dup', function(event) {
   $(event.target).closest('tr').clone().appendTo($(event.target).closest('tbody'));
   return;    
  });
  
  function addDuplicateButton() {
    $('<span class="dup">Copy</span>').appendTo('td.action:last');
    } 
});

Update: Using a span instead of a button. The button was doing some weird stuff with the submit button.

1 0

replied on December 19, 2014

The only problem I've found with this, and don't know how to fix, is that when you duplicate a row, it doesn't add the X to delete any of the rows if the user wants to. In order to get them to appear, the user has to select the Add link, then remove the blank row that was added and any other rows they want to remove. Any ideas for a fix for that?

Thanks!

0 0

replied on May 28, 2017 • Show version history

Hello Everybody,

Just found this thread - is it possible to update it for collection? Saw the thread about copy fields from one row of the collection to another, however this answer has a clone() action, can we do it on collection?

Thank you,

Update:

after some digging around put pieces together, looks like it works for collections, can anybody validate?

    function addDuplicateButton() {
        $('<span class="dup">Copy</span>').appendTo('ul.rpx');
    }
      addDuplicateButton()
      $(document).on('click','.dup', function(event) {
      // jQuery does not clone dynamic state of select
      var selectedValue = $(event.target).closest('div.form-q').find('.selectField').find($('select[id^=Field20]')).val()
      $('.cf-collection-delete').show();
      $(event.target).closest('div.form-q').clone().appendTo($(event.target).closest('.cf-collection'));
      $('.selectField select').val(selectedValue);
           return;    
      });

Update two:

The code is working in general however it breaks Forms Field rules and formulas - they don't work on a copied row. Changed the code to use Add button instead. Again, calling for the experts to validate.

Thank you,

  	$(document).on('click','.dup', function(event) {	// Copy row

    	var currIndex = $(event.target).closest('div.form-q').find('.lineID').find($('input[id^=Field156]')).val()-1;
      	var rowFields = new Array();
      // return current row  
        $('#q16 .kx-repeatable > div').filter( function (ind) {
        	return ind === currIndex; 
        }).find("[vo]").each( function (ind) { // save	each field
          	rowFields[ind] = $(this).val();
        });
		$('.cf-collection-append').click();
        // get last row
      	currIndex = $('#q16 .kx-repeatable > div').length - 1;
      	$('#q16 .kx-repeatable > div').filter( function (ind) {
        	return ind === currIndex;
        }).find("[vo]").each( function (ind) { //	copy each field with value but first
          if ((rowFields[ind]!=null) && (ind != 0))  {
            $(this).val(rowFields[ind]).change();
          }
        });

   		return;    
  	});

0 0

You are not allowed to follow up in this post.

Question

Question

Duplicate Button in Forms

Answer

Replies

Sign in to reply to this post.