Jquery Dynamic Fill In Form Fields With Table Data

I have created a form in a modal box with a table. When you click on a table row it populates a form on the parent page. This is working great but I can't get the values to change

Solution 1:

IDs must be unique, so this is not going to work:

<td id="address_street">Harambee Road</td>
...
<td id="address_street">Hutchinson Road</td>

I would give each of the rows an ID, and have all of the columns use the same class:

<trid="row1"><tdclass="address_street">Harambee Road</td><tdclass="address_suburb">Onerai </td><tdclass="address_city">Onerai Rural</td></tr><trid="row2"><tdclass="address_street">Hutchinson Road</td><tdclass="address_suburb">Onerai </td><tdclass="address_city">Onerai Rural</td></tr><trid="row3"><tdclass="address_street">Kauri Road</td><tdclass="address_suburb">Onerai </td><tdclass="address_city">Onerai Rural</td></tr>

Your JavaScript would change to be like this:

<scripttype="text/javascript">
  $(document).ready(function() {
    $('#table-data tr').click(function () {
      var curRowId = $(this).attr("id");
      $('#street_name').val( $('#' + curRowId + ' td.address_street').text() );
      $('#suburb').val( $('#' + curRowId + ' td.address_suburb').text() );
      $('#city').val( $('#' + curRowId + ' td.address_city').text() );
    });
  });
</script>