Select Table Row and Insert Into Form Javascript

Question

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.target || e.srcElement
    var row = td.parentNode;
    if (ishigh && ishigh != row) {
        ishigh.className = '';
    }
    row.className = row.className === "highlighted" ? "" : "highlighted";
    ishigh = row;

    populateFields(row);
}

PHP

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?

gaetanoM · Accepted Answer · 2016-07-26 21:17:45Z

2

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.target || 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
    populateFields(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>
    <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>
    <tr>
        <td>1bidlname</td>
        <td>1bidfname</td>
        <td>1bidphnum</td>
        <td>1bidaddress</td>
        <td>1bidlicense</td>
        <td>1bidtaxexempt</td>
        <td>1bidtaxid</td>
    </tr>
    <tr>
        <td>2bidlname</td>
        <td>2bidfname</td>
        <td>2bidphnum</td>
        <td>2bidaddress</td>
        <td>2bidlicense</td>
        <td>2bidtaxexempt</td>
        <td>2bidtaxid</td>
    </tr>
    <tr>
        <td>3bidlname</td>
        <td>3bidfname</td>
        <td>3bidphnum</td>
        <td>3bidaddress</td>
        <td>3bidlicense</td>
        <td>3bidtaxexempt</td>
        <td>3bidtaxid</td>
    </tr>
</table>
<br>
<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>
    Address:<br>
    <input type="text" name="address"><br>
    License:<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>
</form>

answered Jul 26, 2016 at 21:17

gaetanoM

42.1k6 gold badges45 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Deron EZ Lauver Over a year ago

This is the exact effect I'm looking for. I can't implement it, as the files are on a local server, but tomorrow I'll definitely be using this to solve my issue. Thank you.

Deron EZ Lauver Over a year ago

could you possibly have this work on jsfiddle? your code snippet works, but when implementing it, or trying to make a jsfiddle, it wont work for me

Deron EZ Lauver Over a year ago

Thank you. in the time i was working with it, my manager had the ingenious idea to just set the function to be run onload. Thank you for your answer though.

sjbennett85 · Accepted Answer · 2016-07-26 21:09:49Z

I haven't 50 rep yet so I'll have to sort of hack my approach here...

Are you using regular js or are you running a library like jQuery or underscore?

Is this specifically for touch-enabled devices or not (its okay to have both but this info would help)

My recommendation is that you use any JS library that can do batch click assignment here.

Maybe add a button to the row to trigger the action or even adjust your PHP to add properties to an and in JS preventDefault on the event then take the data from off it.

something like...

<a class="click_here_for_population" data-fisrt-name="FirstName" data-last-name="LastName" data-anything-else="foo">Add to form</a>

then...

$('click_here_for_population').click(function(e){

    e.preventDefault();

    // do the population stuff from $(this) or pass $(this) to the function
})

This way the event target holds the data you need without having to navigate parents/siblings.

Collectives™ on Stack Overflow

Select Table Row and Insert Into Form Javascript

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related