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

Question

Question

Checkbox to Copy field data in a Table

asked on August 23, 2017 Show version history

I have a Table that I want to use to copy data from it to another set of fields once a checkbox is selected on the row. It only seems to work when the fir Row is checked.

 

$(document).ready(function () {
  $('.check').change(function () {
    var firstAddress = $('.addressOne').find('input');
    var secondAddress = $('.addressTwo').find('input');
    if ($(this).find('input[value="Yes"]').is(':checked')) {
      for (i = 0; i < 6; i++) {
        $(secondAddress[i]).val($(firstAddress[i]).val());
      }
    } else {
      secondAddress.val('');
    }
  });
});

 

Capture.PNG
Capture.PNG (50.64 KB)
0 0

Replies

replied on August 24, 2017

So whats happening here is your assigning the event listener at document load. The problem with this is only the first row exists on load so u only assign the listener to the first row. 

The easy way to fix this is to use event delegation. This will allow you to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future.

I generally just use the document as the parent like so:

$(document).ready(function () {
  $(document).on('change','.check', function () {
    var firstAddress = $('.addressOne').find('input');
    var secondAddress = $('.addressTwo').find('input');
    if ($(this).find('input[value="Yes"]').is(':checked')) {
      for (i = 0; i < 6; i++) {
        $(secondAddress[i]).val($(firstAddress[i]).val());
      }
    } else {
      secondAddress.val('');
    }
  });
});

Hope this works for you :)

0 0
replied on August 24, 2017

Thank Aaron,

That almost works. It does now copy values on selecting the check box from any row. However, it copies the first row field values for any row I check i.e. Brodie from my screen shot

0 0
replied on August 24, 2017
$(document).ready(function () {
  $(document).on('change','.check', function () {
     $('.addressTwo').val($(this).parents('tr').find('td[data-title="First Name"] input[type="text"]').val())
  });
});

Soz didn't look past the first bit.  So this one should in theory copy the data from the First Name field on the selected row into the field with the '.addressTwo' selector.

I'm coding a little blind here so if there is a syntax issue i apologize in advance :)

0 0
replied on September 19, 2018

Did you ever get this to work?

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

Sign in to reply to this post.