-1

Please have a look at this question I try to explain more and added the bounty: How to make the div editable to textarea and upload/delete existing images

UPDATED: My question was too broad, so I updated it and asking only one part first (You can click on edit to see my question before if you'd like) I have a php code that has some html divs. I want to pass the value of those html divs (that are in the loop) to the javascript. My code is basically getting the user details. E.g. user has entered some information such as name and description on the website and it gets stored in mysql and I fetch that information and show it on the website. Now I want to make those information be editable, so if user click on edit button that div changes into textarea and user should be able to edit that text and click on save button to save it (so it update that on mysql) and it shows the new information on website. And delete button can be use to delete it.

My code:

<?php
 
require "database.php";

session_start();

global $username;
$username = $_SESSION['userUsername'].$_SESSION['userId'];


function listFolderFiles($username){


    $username = $_SESSION['userUsername'].$_SESSION['userId'];
    
    $sql = "SELECT * FROM `_desc` WHERE `username` = '$username' AND `id` = '$string_arr[2]';";
    
    $result = mysqli_query($conn, $sql);
    $resultCheck = mysqli_num_rows($result);
    

    if($resultCheck > 0) {
        echo '</br>';
    
        while($row = mysqli_fetch_assoc($result) ) {
       
            echo '<div class="grid">' . '<h2>' .  $row["_name"] . '</h2>' . '</div>';
          
            echo '<div class="grid2">' . '<p>' .  $row["_desc"] . '</p>' . '</div>';
          
            echo '<hr/>';
            
        }

    echo '<button onClick="editName()" class="btn btn-info"> Edit</button>';
    echo '<a href="deleteUserInfo.php?edit= '. $row["id"].'"class="btn btn-danger ">Delete</a>';

    }
    echo '</div>';
}
listFolderFiles($username);

   
<script>

function editName() {
    console.log("calling");
    var divName = $("grid").html();
    console.log(divName);
    var editableName = $("<textarea />");
    editableName.val(divName);
    $("grid").replaceWith(editableName);
    editableName.focus();
    editableName.blur(saveName);

}

function saveName() {
    var htmlName = $(editableName).html();
    var viewableText = $("<div>");
    viewableText.html(htmlName);
    $(editableName).replaceWith(viewableText);

    $(viewableText).click(editName);
}
</script>

</body>

The error: it says the value is undefined of divName. How can I get the value of _name div that is inside my php to javascript?

Also, is there a better way to edit my div, so user can edit the information such as name and description same way as I explained above?

iachi
  • 115
  • 2
  • 11
  • Some sensible code indentation would be a good idea. It helps us read the code and more importantly it will help you ***debug your own code***. Take a quick look at a [coding standard](https://www.php-fig.org/psr/psr-2/) for your own benefit. – IncredibleHat Aug 17 '20 at 20:42
  • @IncredibleHat Thank you. I have edited my code. – iachi Aug 17 '20 at 20:58
  • **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 17 '20 at 21:21

1 Answers1

1

As i can conclude from your code you are switching from div element to textarea when edit button is clicked, in order to change text. I have easier solution for you, and that is with using readonly attribute on textarea. You can attach readonly attribute on your textarea by default, and then when edit button is clicked you can remove that attribute with element.removeAttribute('readonly') When save button is clicked you can add again readonly element.setAttribute('readonly','readonly'), get content of textarea with element.innerText and process it into the database.

You can also attach some classes to textarea when it is in editable or readonly state in order to change for example background,cursor,font... In order for that use element.classList.add('class') and element.classList.remove('class')

Bane2000
  • 187
  • 1
  • 9