How can I transform DATA to input field - PHP

Question

I am trying to create table here where in I can pull up alll of my data from mysql.

I added two extra buttons on my field to edit and delete a specific item selected.

Right now I am not sure how I can turn the text to input fields (whenever I click on the "EDIT" button) and then edit the information and make the edit button turn to a save (on edit mode, where input is showing up) button so I can do the changes/updates. I am not sure too how can I get the ID so I can update that specific field.

So far here's my code:

  function readData(){
    global $connection;

    $query = "SELECT * FROM users";

    $result = mysqli_query($connection, $query);

   if(!$result) {
       die('Query FAILED' . mysqli_error());
    }

     while($row = mysqli_fetch_assoc($result)){ 
      $id = $row['id'];
      $username = $row['username'];
      $password = $row['password'];

      echo '<tr>';
      echo "<td>$id</td>";
      echo "<td>$username</td>";
      echo "<td>$password</td>";
      echo "<td><button id='edit' name='edit'>EDIT</button></td>";
      echo "<td><button id='delete' name='delete'>DELETE</button></td>";
      echo '</tr>';
     }
  }

  function editDate(){
    global $connection;

    $query = "UPDATE users SET ";
    $query .= "username = '$username', ";
    $query .= "password = '$password' ";
    $query .= "WHERE id='$id'";

    $result = mysqli_query($connection, $query);
    if(!$result){
      die('QUERY FAILED' . mysqli_error($connection));
    }
  }

And here's my main file...

<?php 
   include 'functions.php';
?>

<?php include 'includes/header.php' ?>


<table style="width: 200px;" border="1">
  <tr>
    <th>ID</th>
    <th>USERNAME</th> 
    <th>PASSWORD</th>
    <th>EDIT</th>
    <th>DELETE</th>
  </tr>
  <tr>
    <?php readData(); ?>
  </tr>
</table>


<?php include 'includes/footer.php' ?>

Any idea how can I implement this?

Answer 1

You have to call onclick jquery event, when click on any row's data. i think it will help you alot. https://codewithmark.com/easily-edit-html-table-rows-or-cells-with-jquery

Also fiddle code :- http://jsfiddle.net/9KEGd/

Enjoy code