CODEWITHSUNDEEP
javascriptjqueryfrontend
CodeForGood
CodeForGood

Reputation: 749

Copy content from <td> into a text box using jQuery

With the code below, I don't seem to be able to just set the textbox to the value of an TD element. What I need to achieve is to populate Enter Refund Amount box with the already present value of Grand Total field above. Nothing else is needed except copying the content from one element to the other.

window.onload = function() {
    var src = document.getElementById("grand_total").innerHTML;
    dst = document.getElementById("refund_amount").innerHTML;
    src.addEventListener('#refund_amount', function() {
        dst = src;
    });
};

enter image description here

Upvotes: 1

Views: 211

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337626

Firstly, #refund_amount isn't a valid event name. Given the context of the code and your goal I would assume that should be click instead. You also need to bind the event handler on the Element reference, not the a string variable containing its innerHTML value. In addition, to set the value of an input element you need to use the value property of the Element directly. Try this:

var src = document.getElementById("grand_total");
var dst = document.getElementById("refund_amount");

src.addEventListener('click', function() {
  dst.value = src.textContent;
});
<table>
  <tbody>
    <tr>
      <td>Grand total:</td>
      <td id="grand_total">26.58</td>
    </tr>
    <tr>
      <td>Refund amount:</td>
      <td><input type="text" id="refund_amount" /></td>
    </tr>
  </tbody>
</table>

Upvotes: 2

Related Questions