PHP：在源代码中形成echo的id，但在链接中显示所有行的第一个id

Question

I'm having an issue with a pop up form that has a field where the user needs to enter some info regarding a row of data.

The stuff he/she enters needs to be inserted into the table which I will do a Update query... But my issue is that the form echo's the id from the database in the source code but it doesn't show when I hover over the button.

After I press the button it only executes the query for the first id. And the others show only the 2nd and so forth until they are removed one by one. I don't know what I'm doing wrong:

    <?php include_once('classes/profile.class.php');?>
<?php include_once('header.php');?>

<h1>

    <?php _e('Traffic Fines Adjudication'); ?>

</h1>

<br>

<div class="tabs-left">
    <?php

    $result = "SELECT * FROM login_fines_adjudicated WHERE active = 0 ORDER BY date_issued";
    $stmt = $generic->query($result);

//this function will take the above query and create an array
while($row = $stmt->fetch(PDO::FETCH_ASSOC))
  {
        //do nothing
 //with the array created above, I can create variables (left) with the outputted array (right)
    $id = $row['id'];
    $date = $row['date_added_db'];
    $date_issued = $row['date_issued'];
    $time_arrive = $row['time_arrived'];
    $time_depart = $row['time_departed'];
    $ref = $row['reference_code'];
    $reason = $row['violation_reason'];
    $location = $row['location'];
    $bay = $row['bay_number'];
    $licence = $row['licence'];
    $punit = $row['parking_unit'];
    $value = $row['value'];
    $operator = $row['operator'];
    $operator_id = $row['operator_id'];


    //If date field is empty display nothing! Or sentence...

    if(!empty($date))
    {
?>

    <table class="table">
        <thead>
        <tr>
            <th>Photo</th>
            <th>Date Added</th>
            <th>Date Issued</th>
            <th>Time Arrived</th>
            <th>Time Departed</th>
            <th>Reference Code</th>
            <th>Violation Category</th>
            <th>Location</th>
            <th>Bay Number</th>
            <th>Licence Plate</th>
            <th>Parking Unit</th>
            <th>Amount</th>
            <th>Operator Name</th>
            <th>Operator ID</th>
            <th>Action</th>
        </tr>
        </thead>
        <tr>
            <td><img class="photo" src="photos/no-available.jpg" /></td>
            <td><?php echo $date; ?><br /></td>
            <td><?php echo $date_issued; ?></td>
            <td><?php echo $time_arrive; ?></td>
            <td><?php echo $time_depart; ?></td>
            <td><?php echo $ref; ?></td>
            <td><?php echo $reason; ?></td>
            <td><?php echo $location; ?></td>
            <td><?php echo $bay; ?></td>
            <td><?php echo $licence; ?></td>
            <td><?php echo $punit; ?></td>
            <td><?php echo $value; ?></td>
            <td><?php echo $operator; ?></td>
            <td><?php echo $operator_id; ?></td>
            <td>
            <form action="approve.php" method="post">
            <input type="hidden" name="delete_id" value="<?php echo $row['id']; ?>" />
            <p><a href='approve.php?id=<?php echo $id; ?>'><button url="#" class="btn btn-primary">Approve</button></a></p>
            </form>
                    <div id="reject-form" class="modal hide fade">
                        <div class="modal-header">
                            <a class="close" data-dismiss="modal">&times;</a>
                            <h3><?php _e('Reject Reason'); ?></h3>
                        </div>
                        <div class="modal-body">
                            <div id="message"></div>
                    <form action="reject.php" method="post" name="rejectform" id="rejectform" class="form-stacked rejectform normal-label">
                        <div class="controlgroup rejectcenter">
                                <div class="control">
                                    <input id="reject" name="reject" type="text"/>
                                </div>
                        </div>
                    <input type="hidden" name="delete_id" value="<?php echo $id; ?>" />
                    </form>
                </div>
                <div class="modal-footer">
                    <a href='reject.php?id=<?php echo $id; ?>'><button data-complete-text="<?php _e('Done'); ?>" class="btn btn-primary pull-right" id="rejectsubmit"><?php _e('Submit'); ?></button></a>
                    <p class="pull-left"><?php _e('Please give a short reason for rejecting.'); ?></p>
                    </div>
                </div>
                </form>
            <p><a data-toggle="modal" href="#reject-form" id="rejectlink" tabindex=-1><button url="#" class="btn btn-primary">Reject</button></a></p>
            </td>
        </tr>
    </table>


<?php 
}
}
?>
</div>

<?php include ('footer.php'); ?>

Any help would be appreciated!

Answer 1

The problem is that you have many elements with the same id attribute. Genarally, it is a really bad practice to have more than elements with the same id, not to mention it does not conform to the HTML Spec, according to which "id = [...] This name must be unique in a document.". Therefore, you are strongly advised to fix all IDs mking sure it is unique (e.g. appending the current entry's ID).

What causes the specific problem you described in your question is this:

1. You define for every table a pop-up dialog (div), with id reject-form.
2. Then, you implement the "reject"-button as a link with href="#reject-form".
3. So, when you click on any "reject"-button, the user is taken to the first element found in the DOM with id="reject-form" (which is always the dialog for the first entry).

In order to fix that, you can append each entry's ID in the id attributes in two locations: the pop-up dialog and the "reject"-button:

// Replace that:
<div id="reject-form" class="modal hide fade">
// with this:
<div id="reject-form-<?php echo $id; ?>" class="modal hide fade">

// Replace that:
<a data-toggle="modal" href="#reject-form" id="rejectlink" tabindex=-1>
// with this:
<a data-toggle="modal" href="#reject-form-<?php echo $id; ?>" id="rejectlink" tabindex=-1>