在表格行内创建一个文本表单，在提交和更新数据库后保留

Question

我想创建一个在每个表格行内都有一个文本框的列。用户可以在文本框中写入任何文本，然后单击“保存”按钮将其保存在数据库中。此外，文本框可以无限次编辑。我的代码如下：

index.php

<?php
...
while($row = $result->fetch_assoc()){
echo "<form action= 'search.php' method='post'>";
                echo "<form action='' method='get'>";
                echo "<tr>
                        <td><input type='checkbox' name='checkbox_id[]' value='" . $row['test_id'] . "'></td>
                        <td> ".$row['test_id']." </td>
                        

                        <td><input type='text' name='name' value='<?NOT SURE WHAT TO INCLUDE HERE ?>'/></td>
                        <td><input type='submit' value='Save' id='" . $row['test_id'] . "' class='name' /></td>
                        
                        <td> ".$row['path']." </td>
                        <td> ".$row['video1_path']." </td>
                        <td> ".$row['video2_path']." </td>
                        <td> ".$row['video3_path']." </td>
                        <td> ".$row['video4_path']." </td>";

                if(empty($row["directory"])){
                          echo "<td></td>";
                        }else {
                          echo "<td><div><button class='href' id='" . $row['test_id'] . "'  >View Report</button><div></td>";
                            }
                echo " <td style='display: none;'> ".$row['directory']." </td>
                       </tr>";
              }

           ?>

         </table> <br>
            <input id= 'select_btn' type='submit' name='submit' value='Submit' class='w3-button w3-blue'/>
        </form>
      </form>
       </div>


<!-- Opens the pdf file from the pdf_report column that is hidden -->
<script type="text/javascript">
$(document).on('click', '.href', function(){
  var result = $(this).attr('id');
  if(result) {
    var dir = $(this).closest('tr').find("td:nth-child(9)").text();
    window.open(dir);
    return false;
  }
});

</script>

<!-- Updates text input to database -->
<script type="text/javascript">
$(document).on('click', '.name', function(){
  var fcookie1= 'mycookie1';
  var fcookie2= 'mycookie2';
  var name = $(this).attr('id');
  if(name) {
    var text1 = $(this).closest('tr').find("td:nth-child(2)").text();
    var text2 = $(this).closest('tr').find("td:nth-child(3)").text();
    document.cookie='fcookie1='+text1;
    document.cookie='fcookie='+text2;

    $.ajax({
      url: "name_edit.php",
      type:"GET",
      success: function() {
        // alert("Edited Database");
      }
    });
  }
});
</script>

name_edit.php

<?php include 'dbh.php' ?>
<?php include 'search.php' ?>

<?php
if (isset($_COOKIE["fcookie1"]))
  echo $_COOKIE["fcookie1"];
    else
      echo "Cookie Not Set";

if (isset($_COOKIE["fcookie2"]))
  echo $_COOKIE["fcookie2"];
    else
      echo "Cookie Not Set";

$var1 = $_COOKIE["fcookie1"];
$var2 = $_COOKIE["fcookie2"];

$conn = mysqli_connect($servername, $username, $password, $database);
$sql = "UPDATE test_data SET name='$var2' WHERE id='$var1'";
$query_run= mysqli_query($conn,$sql);
if($query_run){
  echo '<script type="text/javascript"> alert(Data Updated)</script>';
} else {
  echo '<script type="text/javascript"> alert(Data Not Updated)</script>';
}
?>

我的想法是让用户编写任何文本。然后，当单击保存按钮时，我将“抓取”文本及其预期的 id 并将其保存到 cookie 中。然后，cookie 将在 name_edit.php 中回显，并将其插入到 sql 代码中，然后更新我的数据库。

我不确定在表单标签内的“值”中包含什么。如果数据库中有数据，则将其显示在文本框中，也可以编辑，否则显示空白以插入文本。

我是编码新手，如果我的想法是正确的还是应该以另一种方式接近它，我有点困惑。

Answer 1

我做了一些研究，发现我不必使用表单而是使用“contenteditable”。编辑我更改的特定列

<td><input type='text' name='name' value='<?NOT SURE WHAT TO INCLUDE HERE ?>'/></td>
<td><input type='submit' value='Save' id='" . $row['test_id'] . "' class='name' /></td>

到这里：

<td class='name' data-id1='" . $row['test_id'] . "' contenteditable='true'>".$row['name']."</td>

对于我的 jquery，我添加了以下内容：

<style>
.editMode{
       border: 1px solid black;
      }
</style>
<script type="text/javascript">
$(document).ready(function(){

 // Add Class
 $('.name').click(function(){
  $(this).addClass('editMode');
 });

 // Save data
 $(".name").focusout(function(){
  $(this).removeClass("editMode");
  var id = $(this).closest('tr').find("td:nth-child(2)").text();;
  var value = $(this).text();

  $.ajax({
   url: 'name_edit.php',
   type: 'post',
   data: { value:value, id:id },
   success:function(response){
    alert('Edits Saved');
    return false;
   }
  });

 });

});
</script>

在 php 方面，我只是做了以下操作：

<?php include 'dbh.php' ?>
<?php
$conn = mysqli_connect($servername, $username, $password, $database);

$field = $_POST['field'];
$value = $_POST['value'];
$id= $_POST['id'];

$sql = "UPDATE test_data SET name='".$value."' WHERE test_id='".$id."'";

mysqli_query($conn,$sql);

echo 1;

?>