Create a text form inside table row that stays after submission and updates database

Question

I want to create a column that has a text box inside each table row. The user can write any text inside the text box and click the 'Save' button to save it in the database. Additionally, the text box can be edited unlimited times. My code is the following:

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>';
}
?>

My idea was for the user to write any text. Then i will 'grab' the text and its expected id and save it to a cookie, when the save button is clicked. The cookie will then be echoed in name_edit.php and insert it in the sql code which will then update my database.

Im not sure what to include in 'value' inside the form tag. If there is data inside the database then display it inside the text box which can also be edited, else display blank for a text to be inserted.

I am new to coding and I'm a bit confused if my idea is correct or should i approach it another way.

This question will be help you : https://stackoverflow.com/questions/1249688/html-is-it-possible-to-have-a-form-tag-in-each-table-row-in-a-xhtml-valid-way — xNoJustice, Aug 10 '20 at 17:11
**Warning:** You are wide open to [SQL Injections](https://stackoverflow.com/a/60496/1839439) and should use parameterized **prepared statements** instead of manually building your queries. They are provided by [PDO](https://php.net/manual/pdo.prepared-statements.php) or by [MySQLi](https://php.net/manual/mysqli.quickstart.prepared-statements.php). Never trust any kind of input! Even when your queries are executed only by trusted users, [you are still in risk of corrupting your data](http://bobby-tables.com/). [Escaping is not enough!](https://stackoverflow.com/q/5741187) — Dharman, Aug 10 '20 at 17:17
Thanks for your reply. I originally had a form inside already (checkbox form) before adding the text form and it works just fine. I've seen the example you provided but it made no difference since it was already working form me. Im stuck in what exactly to write inside the form tag — ian305, Aug 10 '20 at 17:20

score 0 · Accepted Answer · answered Aug 11 '20 at 18:34

I did some research and found out i did not have to use form but instead use 'contenteditable'. To edit the specific column i changed

<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>

to this:

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

and for my jquery i added the following:

<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>

and in the php side, i simply did the following:

<?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;

?>

Create a text form inside table row that stays after submission and updates database

1 Answers1