Toggle display / hide and Button to new page to show certain field of record in php

Question

I wish not to display all fields of records from query. I wish either a button in the query records to a new page to display the field. And a button toggle display a field.

I can't figure out the action code for the button to new page. And I can only toggle display / hide only the first record.

After reading some answers here, I think the problem should be the id of the record, which my code dont assign a unique id for each record. Seems I can't figure how to solve it. As for the button to new page, I stuck.

Below is to button to new page to echo $row['contact']

    <?php

    $data = mysqli_query($conn, $query) or die('error');
if(mysqli_num_rows($data) > 0){
while($row = mysqli_fetch_assoc($data)){

    $status = $row['status'];
    $area = $row['area'];
$address = $row['address'];
?>

<tr>
<td><form method="post" name="dataid" value="'.$row->new_id.'"><input 
    type="submit" name="submit1"></form></td>
<td><?php echo $row['status'];?></td>
<td><?php echo $row['area'];?></td>
<td><?php echo $row['address'];?></td>
</tr>   

Below is meant to toggle display / hide $row['contact']

     <?php 
     $data = mysqli_query($conn, $query) or die('error');
 if(mysqli_num_rows($data) > 0){
 while($row = mysqli_fetch_assoc($data)){

$status = $row['status'];
    $area = $row['area'];
$address = $row['address'];
?>

    <tr>
<td>
<div id=1 onclick="document.getElementById('body_1').style.display= 
    (document.getElementById('body_1').style.display=='none'? 'block':'none')">Click</div>
<div id="body_1" style="display:none; border:2px solid green;"><?php echo $row['contact'];?></div>

    </td>
<td><?php echo $row['status'];?></td>
    <td><?php echo $row['area'];?></td>
<td><?php echo $row['address'];?></td>                                   
    </tr>   

My button not working yet. And only toggle display / hide only the first record

I try this code to button / link to certain field of my record :

a href="detail.php?new_id=">Click

In detail.php :

     <?php
     if(isset($_GET['new_id']) && $_GET['new_id'] !== ''){
     $new_id = $_GET['new_id'];
     echo $new_id;
     echo $contact;
     } else {
     echo "failed";
     }
     ?>                                                                                                                                                                    
                                                                                                                             Result : I can display the $new_id, but unable to display $contact

Answer 1

There are two reasons why this code isn't working for multiple div elements with the id "body_1":

• An id in HTML is unique. Which means, you may only have one HTML element with that specific id in your DOM .

• The JS selector getElementById() will only return one element with the specified id . That is because an id is supposed to be unique.

If your $row array contains an id element (if you have a column in your database table with an unique identifier (id)) you could use this value to give your HTML elements its unique ID.

I am personally not a huge fan of using in-line JS code like this. I prefer to keep it in a separate .js file for readability and caching purposes, but the following code may help you out if your rows contain an id which can be accessed by $row['id'] :

$data = mysqli_query($conn, $query) or die('error');

if (mysqli_num_rows($data) > 0) {
while ($row = mysqli_fetch_assoc($data)) {

$status = $row['status'];
$area = $row['area'];
$address = $row['address'];
?>

<tr>
    <td>
        <div onclick="document.getElementById('<?= 'body_' . $row['id'] ?>').style.display= 
    (document.getElementById('<?= 'body_' . $row['id'] ?>').style.display==='none'? 'block':'none')">Click
        </div>
        <div id="<?= 'body_' . $row['id'] ?>" style="display:none; border:2px solid green;"><?php echo $row['contact']; ?></div>

    </td>
    <td><?php echo $row['status']; ?></td>
    <td><?php echo $row['area']; ?></td>
    <td><?php echo $row['address']; ?></td>
</tr>

<?= 'text' ?> is a shorthand for <?php echo 'text' ?> . I have also used the the triple equals === instead of == to compare if the style property display has 'none' as its value because of Test Equality