Shauna Shauna - 7 months ago 7
SQL Question

JavaScript function within php to show more info on-click (Database Query)

The below code is connected to a local database that holds customer information. First, the page is supposed to display the customer name and country, but should display more information for that particular customer once the name is clicked.

The problem with this code below is that it will only always display the first customers information, no matter which name is clicked. Can anyone see where I might be going wrong? Do I need to create an ID for each button (customer name)? Bare in mind that there are a lot of customers in the database and I feel that an ID for each would be very difficult to implement, especially if the database gets modified.

<DOCTYPE html!>
<html>
<head>
<link rel="stylesheet" type="text/css" href="a3.css">
</head>
<body>
<div class="nav">
<?php include 'nav.php';
?>
</div>
<?php include 'dbconfig.php';
$sql ='SELECT * FROM `customers` ORDER BY `customers`.`country` ASC';
$q = $conn->query($sql);
$q->setFetchMode(PDO::FETCH_ASSOC);
?>
<div class = "main">
<table>
<?php while ($r = $q->fetch()): ?>
<tr>
<td><button onclick = "showCustomer();"/><?php echo ($r['customerName'])?></td>
<td><?php echo ($r['country'])?></td>
</tr>
<tr id ="extra" style="display:none">
<td><?php echo ($r['customerNumber'])?></td>
<td><?php echo ($r['contactLastName'])?></td>
<td ><?php echo ($r['contactFirstName'])?></td>
<td><?php echo ($r['phone'])?></td>
<td><?php echo ($r['addressLine1'])?></td>
<td><?php echo ($r['addressLine2'])?></td>
<td><?php echo ($r['city'])?></td>
<td><?php echo ($r['state'])?></td>
<td><?php echo ($r['postalCode'])?></td>
<td><?php echo ($r['salesRepEmployeeNumber'])?> </td>
<td><?php echo ($r['creditLimit'])?></td>
</tr>
<?php endwhile; ?>
</table>
</div>

<div class="foot">
<?php include 'foot.php'; ?>
</div>
<script>



function showCustomer() {
var showForm=document.getElementById('extra');
if (showForm.style.display="none") {

showForm.style.display ="";
alert('ok');
console.log(showForm);
}
else if (showForm.style.display=""){
showForm.style.display ="none";
}
}
</script>
</body>
</html>
</DOCTYPE>

Answer

All your <tr> have the same id="extra". As suggested, you need a different "id" for each of them, this is how : I created a variable $i (line 18), that is increased right after the while (line 20), inserted as parameter in the call for showCustomer (line 23), inserted at the end of the id "extra" (line 27), finally, on the bottom, where function showCustomer is declared, the parameter "index" is inserted at the end of the id "extra".

<DOCTYPE html!>
 <html>
    <head>
    <link rel="stylesheet" type="text/css" href="a3.css">
</head>
<body>
    <div class="nav">
        <?php include 'nav.php';
        ?>
    </div>
    <?php include 'dbconfig.php';
    $sql ='SELECT * FROM `customers` ORDER BY `customers`.`country`    ASC';
    $q = $conn->query($sql);
    $q->setFetchMode(PDO::FETCH_ASSOC); 
    ?>
    <div class = "main">
        <table>
            <?php $i = 0;
                  while ($r = $q->fetch()):
                    $i++;           // UNIQUE INDEX FOR EACH CUSTOMER.
            ?>
                 <tr>
                     <td><button onclick = "showCustomer('<?php echo $i;?>');"/>
                          <?php echo ($r['customerName'])?></td>
                     <td><?php echo ($r['country'])?></td>
                </tr>
                <tr id ="extra<?php echo $i;?>" style="display:none">
                     <td><?php echo ($r['customerNumber'])?></td>
                     <td><?php echo ($r['contactLastName'])?></td>
                     <td ><?php echo ($r['contactFirstName'])?></td>
                     <td><?php echo ($r['phone'])?></td>
                     <td><?php echo ($r['addressLine1'])?></td>
                     <td><?php echo ($r['addressLine2'])?></td>
                     <td><?php echo ($r['city'])?></td>
                     <td><?php echo ($r['state'])?></td>
                     <td><?php echo ($r['postalCode'])?></td>
                     <td><?php echo ($r['salesRepEmployeeNumber'])?>   </td>
                     <td><?php echo ($r['creditLimit'])?></td>
                 </tr>
             <?php endwhile; ?>
        </table>
       </div>

        <div class="foot">
        <?php include 'foot.php'; ?>
       </div>
       <script>



        function showCustomer( index ) { // UNIQUE INDEX AS PARAMETER.
            var showForm=document.getElementById('extra' + index); // USING INDEX.
            if (showForm.style.display="none") {

               showForm.style.display ="";
                alert('ok');
                console.log(showForm);
            }
            else if (showForm.style.display=""){
                showForm.style.display ="none";
            }
        }
    </script>
</body>
</html>
</DOCTYPE>