0

I have a table with payment info, and I want ability to modify contents of rows by having a "modify" button on each row. Clicking on modify, goes to a form, where user can submit content, with a paymentId associated to that row. So I need paymentId to be passed when "modify" button is clicked.

the html for this is:

//payment.entry_id is passed to the ejs template from the node server.

$('.modifyButton').on('click', e => {
  console.log("data attribute passed: ", e.target.getAttribute('data-paymentId'));
});
<button class="btn btn-warning modifyButton" data-paymentId=< %=payment.entry_id%> type="button">
  <i class="fas fa-edit"></i>
</button>

I sometimes log the correct paymentId, but sometimes it returns as null. What is the reason for this behaviour?

Mara Black
  • 1,666
  • 18
  • 23
Himanshu Modi
  • 33
  • 6
  • 2
    Sometimes you click on `` and it is not `e.target` that you want, I think. Use `currentTarget` instead. And you can get the data by `e.currentTarget.dataset.paymentId`. – Leonid Nov 07 '21 at 10:42
  • 1
    You can access the button via `this` (if not => function) or `e.currentTarget`. And the attribute name has to be only small letters with `-`. So to have access with `e.currentTarget.dataset.paymentId` the attribute's name should be `data-payment-id`. – Leonid Nov 07 '21 at 12:16

0 Answers0