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:

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

Your JavaScript would change to be like this:

<script type="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>