Differentiate between multiple buttons on a table. html php

Question

I am creating an edit edit/delete user table and have created an 'edit' button for each record populated in the table. I want to do several things. 1. when an edit button is pressed for a specific user, open a new page called "EDIT." 2. populate form controls in the "EDIT" page with the corresponding user information for the specific 'edit' button that was pressed.

My question is, how do I differentiate between which button is pressed on the users table?

this is what my table looks like:

And this is the code for generating the table and buttons.

if (!$_REQUEST['search']) {

  $sql = "SELECT * FROM users_table ORDER BY lname ASC";

  $retvalues = mysqli_query($conn, $sql);

  $counter = 1;

  while ($row = mysqli_fetch_array($retvalues, MYSQL_ASSOC)) {

    $lname = capword($row['lname']);
    $fname = capword($row['fname']);

    if ($row['admin'] != 1) {
      $stringAdmin = "No";
      $admincolor = "<td>";

    } else {
      $stringAdmin = "Yes";
      $admincolor = "<td style='color:red;'>";
    }
    echo "<tr>";
    echo "<td>".$counter.".</td>";
    echo "<td>".$lname." , ".$fname."</td>";
    echo "<td>".$row['email']."</td>";
    echo "<td>".$row['password']."</td>";
    echo $admincolor.$stringAdmin."</td>";
    echo "<td><input type='checkbox' name='user[]' value='{$row['id']}'></td>";
    echo "<td><input type='submit' name='edit' value='edit'></td>";
    echo "</tr>";

    $counter++;
  }
}

Answer 1

You can differentiate the each edit button by using unique id

<button class='edit' data-id="<?php echo $_GET["id"];?>"> EDIT</button>.

While click on the edit button, read the data-id by using the following code

$(document).on('click', '.edit', function(){
  var id = $(this).attr('data-id');
 //code - you need to do
})

Better to show the data on next page, use bootstrap model box and AJAX request which will interact lot of the users.

 $(document).on('click', '.edit', function(){
    var id = $(this).attr('data-id');
    if(id) {
        $.ajax({
            url : your url("profile/edit/"+id)
            type : 'post',
            success: function(response){
                if (response.success) {
                    $('#modal').modal('show');
                }
            }
        }):
    }
});     

Answer 2

If you change the value attribute of "Edit" submit button to the row id you can use this value to know what record id will be edited and populate it.

"<input type='submit' name='edit' value='edit'>"

change to

"<button name='edit' value='{$row['id']}'>Edit</button>"

Note that if the whole table is the form container, all inputs in table will be posted, not only the current row.

Answer 3

I would make the edit button into a hyperlink instead. Then there's no need to have form code. I'm assuming you don't need to pass the "delete" parameter to your edit page (as that's a different operation).

Instead of

echo "<td><input type='submit' name='edit' value='edit'></td>";

write

echo "<td><a href='edit.php?id=".$row['id']."'>Edit</a></td>";

Then in edit.php look for the variable

$_GET["id"]

and use that to search the database and display the appropriate record for editing.

PS If you still want your "Edit" hyperlink to look like a button it's quite easy to do that with CSS.

Answer 4

I did this by creating and calling a javaScript function that passes the id of the row as an argument.

echo"<tr>";
                                    echo"<td>".$counter. ".</td>";
                                    echo"<td>".$lname. " , " .$fname."</td>";
                                    echo"<td>".$row['email']."</td>";
                                    echo"<td>".$row['password']."</td>";
                                    echo $admincolor . $stringAdmin ."</td>";
                                    echo"<td><input type='checkbox' name='user[]' value='{$row['id']}'></td>";
                                    echo"<td><input type='button' name='edit' value='edit' onclick='javascript:editUser(". $row['id'].");'></td>";
                                echo"</tr>";

the function redirects the user to an 'edit' page while passing the value of the id in the url.

function editUser(id){

                window.location = "edituser.php?id="+id;

            }

once on the edit page, i used $_GET to retrieve the id value and edit my entry.

Answer 5

You can change and add a form to your table like this:

echo "<tr>";
echo "<td>".$counter.".</td>";
echo "<td>".$lname." , ".$fname."</td>";
echo "<td>".$row['email']."</td>";
echo "<td>".$row['password']."</td>";
echo $admincolor.$stringAdmin."</td>";
<form action="edit.php" method="post">
  echo "<input type="text" name="id" value="$row['id']" style="visibilty: hidden;">";
  echo "<td><input type="checkbox" name="delete"></td>";
  echo "<td><input type="submit" name="edit" value="edit"></td>";
</form>
echo "</tr>"

First we have defined a form with POST method: <form action="edit.php" method="post"> and let's say edit.php will handle the request.

Then we have added a hidden form element to store and pass the user's ID: <input type="text" name="id" value="$row['id']" style="visibilty: hidden;"> It was possible to use value="..." of "edit" button but if you are dealing with passing more than one variables with POST or GET method, the trick is using an extra form element with visibility: hidden; CSS property.

Eventually, it will pass the value of $row['id'] to edit.php when the form has been submitted.

and we can handle the request in edit.php like this:

<html>
  <body>

    User with this ID number: <?php echo $_POST["id"]; ?> will be edited.

  </body>
</html>

Official guide: http://php.net/manual/en/tutorial.forms.php

You can either use POST or GET method to pass the variables. For a detailed comparison: https://stackoverflow.com/a/504993/2104879