Deron EZ Lauver Deron EZ Lauver - 1 year ago 60
Ajax Question

Select Table Row and Insert Into Form Javascript

Im making a page that has a search function. I would like to be able to click the results in the table and have it insert the information into a form below it. For Example: a page for medical records where you would search by last name, it would populate the table with the customers info, and you can click one of the results in the table for it to fill in all the information into the form below the table.

I currently have the table pulling the results and entering the data into the form but i have to click a button before it will allow me to select anything in the table. I really dont want to have to press the button. Below is the Javascript code, and php. If you need more, I can provide it.

Javascript: I have think what requires the button to be pressed is the

var row = td.parentNode
line, because when its just taken away, the selecting functionality ceases.

tbody.onclick = function (e) {
e = e || window.event;
var td = || e.srcElement
var row = td.parentNode;
if (ishigh && ishigh != row) {
ishigh.className = '';
row.className = row.className === "highlighted" ? "" : "highlighted";
ishigh = row;



echo '<input id="selectstyle" type="button" value="Select" onclick="test()"><br><table class="table-search" id="searchresulttable"><br>';
if(count($row)) {
$end_result = '';
echo "<tr><td><u>Last Name</u></td><td><u>First Name</u></td><td><u>Phone #</u></td><td><u>Address</u></td><td><u>License</u></td><td><u>Tax Exempt</u></td><td><u>Tax ID</u></td></tr>";
foreach($row as $r) {
$result = ucwords($r['bidlname']);
// we will use this to bold the search word in result
$bold = '<td>' . ucwords($r['bidlname']) . '</td>' . '<td>' . ucwords($r['bidfname']) . '</td><td>' . $r['bidphnum'] . '</td><td>' . $r['bidaddress'] . '</td><td>' . $r['bidlicense'] . '</td><td>' . $r['bidtaxexempt'] . '</td><td>' . $r['bidtaxid'] .'</td>';
$end_result .= '<tr>' . $bold . '</tr>';
echo $end_result;
} else {
echo '<li>No results found</li>';
echo '</table><br>';

I would like to be able to just click the entry i want to insert, without having to click the button first. Thoughts or ideas?

Answer Source

If I understood correctly your question my answer is the following snippet:

var ishigh;

function populateFields(row) {

  // get the form elements
  var frmElements = document.getElementById('frm');
  // for each cell in current row
  for(var i=0; i< row.cells.length; i++) {

    // copy the cell value to the input value
    frmElements[i].value = row.cells[i].textContent;

// when document is ready
window.addEventListener("DOMContentLoaded", function(event) {

  // associate the click handler for the table
  document.getElementById('searchresulttable').onclick = function (e) {
    e = e || window.event;
    var td = || e.srcElement;
    var row = td.parentNode;
    if (ishigh && ishigh != row) {
      ishigh.className = '';
    row.className = row.className === "highlighted" ? "" : "highlighted";
    ishigh = row;

    // populate the form with the content of current row

function test() {
  // do nothing.....
.highlighted {
  background-color: #ffff99;
<input id="selectstyle" type="button" value="Select" onclick="test()"><br>
<table class="table-search" id="searchresulttable"><br>
        <td><u>Last Name</u></td>
        <td><u>First Name</u></td>
        <td><u>Phone #</u></td>
        <td><u>Tax Exempt</u></td>
        <td><u>Tax ID</u></td>
<form id="frm">
    Last Name:<br>
    <input type="text" name="lastname"><br>
    First Name:<br>
    <input type="text" name="firstname"><br>
    Phone #:<br>
    <input type="text" name="phonenumber"><br>
    <input type="text" name="address"><br>
    <input type="text" name="license"><br>
    Tax Exempt:<br>
    <input type="text" name="taxexempt"><br>
    Tax Id:<br>
    <input type="text" name="taxid"><br>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download