How to auto populate fields in a table inside a form

replied on April 30, 2018

to get the index of the current row being edited with JavaScript, the following snippet works:

//replace Table1 with your variable name, and q10 with the column number for the one you want to watch from Table1.
$('li[attr="Table1"] table.cf-table tbody').on('change','td[data-col="q10"] input[name^="Field"]',function(){
  //get the first parent table row
  var row = $(this).closest('tr');

  //get the 0-based index of the tbody that contains that row
  var idx = $(this).closest('tbody').index(row);
});

Once you have that index, it depends whether you can assume that a row exists in Table 2 or not. If yes, then the snippet above would become:

//replace Table1 with your variable name, and q10 with the column number for the one you want to watch from Table1.
//replace Table2 with your variable name, and q20 with the column number for the one you want to set from Table2.
$('li[attr="Table1"] table.cf-table tbody').on('change','td[data-col="q10"] input[name^="Field"]',function(){
  //get the first parent table row
  var row = $(this).closest('tr');

  //get the 0-based index of the tbody that contains that row
  var idx = $(this).closest('tbody').index(row);

  //set the other table's row's value
  $('li[attr="Table2"] table.cf-table tbody tr').eq(idx).find('td[data-col="q20"] input[name^="Field"]').val($(this).val());
});

This gets a bit more complicated if you want the 2 tables to always match, even if a row is added/deleted from one or the other, but it is possible in JavaScript.

0 0

replied on April 30, 2018

First of all, thank you very much. This is very thorough. I changed it and set both tables with a fixed number of rows (4) hoping to get it to work, but for some reason it isn't populating into table 2.

0 0

replied on May 1, 2018

The entire statement might need to be within a statement that waits for the page to finish loading - if the JavaScript fires before Table1 has been created, it won't have anything to attach to, and so the code will never run. It's best to always put any code that runs against something on the page (like in this example, attaching an event handler of on('change')) within the $(document).ready as seen below.

$(document).ready(function(){
  //replace Table1 with your variable name, and q10 with the column number for the one you want to watch from Table1.
  //replace Table2 with your variable name, and q20 with the column number for the one you want to set from Table2.
  $('li[attr="Table1"] table.cf-table tbody').on('change','td[data-col="q10"] input[name^="Field"]',function(){
    //get the first parent table row
    var row = $(this).closest('tr');

    //get the 0-based index of the tbody that contains that row
    var idx = $(this).closest('tbody').index(row);

    //set the other table's row's value
    $('li[attr="Table2"] table.cf-table tbody tr').eq(idx).find('td[data-col="q20"] input[name^="Field"]').val($(this).val());
  });
});

What this does, is waits for the page to finish loading all the controls before running. This guarantees that Table1 exists before trying to attach the event handler to it.

0 0

Question

Question

How to auto populate fields in a table inside a form

Replies

Sign in to reply to this post.