You are viewing limited content. For full access, please sign in.

Question

Question

Forms Table - Replicating data from the above row

asked on November 23, 2015

Hi all,

I'm looking to use javascript to add functionality to a form. I'd like the user to be able to add a row in a table, but for javascript to replicate the values from some of the columns from the row above if a checkbox is ticked. Unfortunately I'm finding this more challenging than first anticipated!

Any pointers would be much appreciated.

 

0 0

Answer

SELECTED ANSWER
replied on November 23, 2015 Show version history

First you would want to key off an event such as the "Add" button click event so you would start with:

$(document).on('click', 'a.cf-table-add-row', function(e) {
   
});

(note: this works with one table on the form. If you have more you will need to add a class to the table and reference it before the anchor tag in the above query)

Now this is usually a matter of preference, but I always add a class to my table so I can query it in code.

$(document).on('click', 'a.cf-table-add-row', function(e) {
   var _this = $('li[attr=tableclassassigned] tbody tr:last'),
       _prev = _this.prev(),
});

That next line gives you access to the row previous to the row that was just added. At this point, you can then reference each of the table row fields. Again, you will want to give each field a class name so you can reference it in a query.

$(document).on('click', 'a.cf-table-add-row', function(e) {
   if (!$('#idofcheckbox').prop('checked')) return;
   var _this = $('li[attr=tableclassassigned] tbody tr:last'),
         _prev = _this.prev(),
         _field1 = _prev.find('td.classassignedtofield input.singleline').val(),
         _field2 = _prev.find('td.classassignedtofield2 input.singleline').val();
   _this.find('td.classassignedtofield input.singleline').val(_field1);
   _this.find('td.classassignedtofield2 input.singleline').val(_field2);
});

The above code should get you what you are after once you assign the class names to the table and fields.

1 0
replied on November 24, 2015

Thank you for the help above Chris. The 'if' statement didn't seem to work but the rest of the code did the job perfectly. I was able to edit it to get the functionality I needed. Thanks again!

0 0
replied on November 24, 2015

Awesome! Glad I could help. Yes, the first "if" statement was a toss up as I was not sure if your checkboxes were inline with the table or off to the side someplace.

0 0

Replies

replied on November 23, 2015

Hi there,

I'm interested in your use case. What does that table used for? And what kind of process it is?

0 0
replied on November 24, 2015

Hi Abby,

The user would like this feature as there is often repetition in the field values they are entering in the table. So they may have multiple rows where a number of the columns values do not change. They would like a check box which would allow them to keep the values from the above row, for a fixed set of columns, to remain the same. So for an travel expenses form for example, they may have completed the same journey many times during a month. And so starting point, destination, distance etc will all remain the same.

I hope this makes sense to you. I'm in the process of trying to test out Chris' code, which has been very helpful!

0 0
replied on November 24, 2015

Thanks for your use case!

0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.