Question

I have a entry form. Below it, I want to show a grid containing existing records. As the user clicks on a row of the grid, the values must get filled in the fields of the form above.

Is there any way to do this without refreshing the page?

Answer 1

If all the info the form needs is already present on the page then AJAX would be overkill and simple Javascript would do the job perfectly. This isn’t tested, but;

<form id="myform">
  <input id="name" type="text" ... />
</form>

<tr> 
   <td onclick="populateFormElement('myform', 'name', this);">Bob</td>
</tr>

in javascript;

function populateFormElement(formName, inputName, element)
{
   document.formName.inputName.value = element.firstChild.data;
}

This works on a single element but should be a reasonable starting point as the process is easy to adapt to whole rows. Simply put the onclick event on the tr element and step through the various children a bit more to extract the relevant data.