Add Asyncrhonous Update

On index.php, change the functionality of your update button's click event so that:

when the user clicks on update button it "changes comment text to a textbox with the same value". This requires you to write a javascript to first hide your <div id="comment_1">the first comment</div> and then dynamically write <input type="text" name="comment" value="the first comment"></input> after the hidden div. We need to hide the <div> to have a way to restore the original content if the user cancels the process.

another two buttons appear on the same row AFTER the newly converted textbox field. The first one says "save" and the second one says "cancel".

   <?php
   session_start();
   if (!isset($_SESSION['login']) || $_SESSION['login'] != 1) {
      header('Location: login.php');
      exit();
   }
   ?>

   <html>
   <head>
   <title>
   My Guestbook - Alek Hein
   </title>
   </head>
   <body>
   <h1>My Guestbook</h1>
   <h2>Recent Comments</h2>
   <h3>Welcome <?php echo $_SESSION['name']?>! <a href="http://students.cpcc.edu/~ahein001/web250/lab8/logout.php">Logout</a></h3>
 <script type="text/javascript">
 function update_me(obj) {
  var selected_form = obj.form;
  var id = selected_form.id.value;
  selected_form.action = 'updatecomment.php';
  selected_form.submit();
 }

 function delete_me(obj) {
  var selected_form = obj.form;
  var id = selected_form.id.value;
  selected_form.action = 'deletecomment.php';
  selected_form.submit();
 }
 </script>
 <?php

require('dbconnect.inc.php');
    $entriesq = mysql_query("SELECT id, body, post_date, author_name FROM `Posts` LIMIT 0, 10 ") or die(mysql_error());  

        while($entriesr = mysql_fetch_array($entriesq)){
            $id = $entriesr["id"];
            $post_date = $entriesr["post_date"]; 
            $author_name = $entriesr["author_name"];
            $post_body = $entriesr["body"];

          ?>
          <form method="post" >
            <table>
                <tr>
                    <td>
                        <input type="hidden" name="id" value=<?php echo $id; ?> />
                        <input type="button" name="Update" onClick="update_me(this)" value="Update" />
                        <input type="button" name="Delete" onClick="delete_me(this)" value="Delete" />
                        On <?php echo htmlspecialchars($post_date); ?> <?php echo htmlspecialchars($author_name); ?> said: <?php echo htmlspecialchars($post_body); ?>
                    </td>
                </tr>
            </table>
        </form>
        <?php
          }

require('dbdisconnect.inc.php');
?>

<br>
<a href="addcomment.php">Add a comment</a>
</body>
</html>

Edited 5 Years Ago by diafol: fix code tags again

I don't see why you need to write the original message to a hidden div - this can be stored in a js variable. A reset or restore button can just take that value from the var and overwrite the textbox value. Or am I missing something?