How to search By Id in js

Question

I am trying to select row from dataTable,but there is a problem occur in js code under PHP.code is given bellow.Here firstly I fetched data from my database and then added them to dataTable.The code work perfectly till here..but when I tried to select any row from the table it show an error sayin

Parse error: syntax error, unexpected 'getval' (T_STRING) in C:\xampp\htdocs\Trying\fetch.php on line 43

which is var table = document.getElementById('getval'); almost at the end of the code.

`

    <?php
            $connect = mysqli_connect("localhost","root","","ajmal");
            $output = '';

            $sql = "SELECT                                              
            medicinName,pricerPerSheet,dealerID,availAbleAt,district,place 
            FROM medicinalinfo WHERE medicinName LIKE 
            '%".$_POST["search"]."%'";
            $result = mysqli_query($connect,$sql);


            if(mysqli_num_rows($result) > 0)
            {
                $output .= '<h4 align="center" class="h4_search">Search 
                Result</h4>';
                $output .= '<div class="row">';
                $output .= '<div class="col-md-8 col-md-offset-1 well">';
                $output .= '<div class="table-responsive">
                    <table id="tbl" class="table table-bordered table- 
                    striped table-hover">
                        <tr>
                            <th>Medicin Name</th>
                            <th>Price Per Sheet</th>
                            <th>Availble At</th>
                            <th>District</th>
                            <th>Area</th>
                        </tr>';
               $output .= '</div>';
               $output .= '</div>';
               $output .= '</div>';
               while ($row = mysqli_fetch_array($result)) {
               $output .= '
               <tbody id="getval">
                    <tr>
                        <td>'.$row['medicinName'].'</td>
                        <td>'.$row['pricerPerSheet'].'</td>
                        <td>'.$row['availAbleAt'].'</td>
                        <td>'.$row['district'].'</td>
                        <td>'.$row['place'].'</td>
                    </tr>
               </tbody>
             ';
             }
             $output.='</table>';

             $output.='<script>

             var table = document.getElementById('getval');

             for(var i=0; i<table.rows.length; i++){
                table.row[i].onclick = function(){
                    alert(this.cells[0].innerHTML);
                };
             }

             </script>
          ';
          echo $output;
          }
        else
        {
           echo '<h4 align="center" class="h4_search">Data Not Found</h4>';
        }


     ?>

`

Answer 1

You are using single quotes for that string, so you must escape them in that JS bit, or change to double quotes.

So, that line should read:

var table = document.getElementById(\'getval\');

or

var table = document.getElementById("getval");

EDIT: Ok, here is yout entire code, corrected, you had several errors:

<?php

$connect = mysqli_connect("localhost", "root", "", "ajmal");
$output = '';

$sql = "SELECT                                              
            medicinName,pricerPerSheet,dealerID,availAbleAt,district,place 
            FROM medicinalinfo WHERE medicinName LIKE 
            '%" . $_POST["search"] . "%'";
$result = mysqli_query($connect, $sql);


if (mysqli_num_rows($result) > 0) {
    $output .= '<h4 align="center" class="h4_search">Search
            Result</h4>';
    $output .= '<div class="row">';
    $output .= '<div class="col-md-8 col-md-offset-1 well">';
    $output .= '<div class="table-responsive">
                <table id="tbl" class="table table-bordered table-
                striped table-hover">
                    <tr>
                        <th>Medicin Name</th>
                        <th>Price Per Sheet</th>
                        <th>Availble At</th>
                        <th>District</th>
                        <th>Area</th>
                    </tr>
                    <tbody id="getval">';
    while ($row = mysqli_fetch_array($result)) {
        $output .= '
                    <tr>
                        <td>' . $row['medicinName'] . '</td>
                        <td>' . $row['pricerPerSheet'] . '</td>
                        <td>' . $row['availAbleAt'] . '</td>
                        <td>' . $row['district'] . '</td>
                        <td>' . $row['place'] . '</td>
                    </tr>';
    }
    $output .= '</tbody></table>';
    $output .= '</div>';
    $output .= '</div>';
    $output .= '</div>';
    $output .= '<script>
             var table = document.getElementById("getval");
             for(var i=0; i<table.rows.length; i++){
                table.rows[i].onclick = function(){
                    alert(this.cells[0].innerHTML);
                };
             }

             </script>
          ';
    echo $output;
} else {
    echo '<h4 align="center" class="h4_search">Data Not Found</h4>';
}
?>

First, you had closing divs within table, which is wrong, I corrected that in your code. Then, you had multiple tbody elements with same id, that's what was making a confusion. Moved tbody segment outside of mysqli_fetch_array loop, so we only have one tbody and multiple rows within it. Also, in the javascript part, it should be

table.rows[i].onclick

and not

table.row[i].onclick