php - 想要在不提交表单的情况下在文本区域中输入评论

Question

我想收集特定用户对图像的评论。这一切都是通过单击评论链接完成的。点击链接后，我必须携带评论和图像名称。这是评论页面的代码，它都在一个表单中

echo"<tr><td colspan='2'>Your Comment: </td>";
echo" <td colspan='5'><textarea name='comment' id='comment' rows='2' cols='25'></textarea></td></tr>";
echo"<tr><td colspan='2'><a href=\"comment.php?id1=".$file."\">Comment</a></td></tr>";

在评论 .php 中，我无法获得评论。这是我的comment.php，

<?php
 session_start();
  $id=$_GET['id'];
$dsn = 'mysql:host=127.0.0.1;dbname=as1';
 $user = 'root';
 $password = '';
//$u=$_POST['comment'];
try {
  // Connect and create the PDO object
 $pdo = new PDO($dsn, $user, $password);
 $pdo->setAttribute(PDO::ATTR_ERRMODE,PDO::ERRMODE_EXCEPTION);
}
catch(PDOException $e) {
 echo 'Database connection failed - ';
 echo $e->getMessage();
 exit;
 }
echo $u."posted in".$id;
 //$sql = "INSERT  comment_table (imageId) SELECT (id) FROM photo WHERE imagename=?";
   // $q = $pdo->prepare($sql);
    //$q->execute(array($_SESSION['comment']));
    //echo $_SESSION['uname'];      

 ?>

我无法在这里获得评论

Answer 1

<div class="commentBox">
    <img src="http://icons.iconarchive.com/icons/custom-icon-design/valentine/256/heart-icon.png"/>

    <div class="commentList">
        <div class="comment" data-bind="foreach:comments">
             <h2 class="commentAuthor" data-bind="text:author">
       </h2>
 <span data-bind="html:text">
       </span>

        </div>
        <form name="commentForm" class="commentForm" data-bind="with:newComment">
            <input type="text" data-bind="value:author" required/>
            <input type="text" data-bind="value:text" required />
            <button type="button" data-bind="click:$parent.addComment">Add</button>
        </form>
    </div>
</div>

脚本文件：

 ko.validation.rules.required.message = 'Required Field.';

 ko.validation.configure({
     registerExtenders: true,
     messagesOnModified: true,
     insertMessages: true,
     parseInputAttributes: true,
     messageTemplate: null
 });

 var shayJS = (function ($, ko) {

     //A simple promise returning DAL 
     var DAL = {};
     DAL.insert = function (api, payload) {
         return $.ajax({
             url: '/echo/json/',
             type: 'POST',
             dataType: 'json',
             data: {
                 json: "{}"
             }
         });
     };

     DAL.get = function (api, payload) {
         return $.ajax({
             url: '/echo/json/',
             type: 'POST',
             dataType: 'json',
             data: {
                 json: JSON.stringify([{
                     author: '',
                     text: ''
                 }, ])
             }
         });
     };


     //Knockout Model
     function CommentViewModel() {
         var self = this;

         //Comment Class
         function Comment() {
             var self = this;
             self.author = ko.observable().extend({
                 required: true
             });
             self.text = ko.observable().extend({
                 required: true
             });
             ko.validation.group(self);
         }

         self.newComment = ko.observable(new Comment());
         self.comments = ko.observableArray([]);

         self.addComment = function () {
             if (self.newComment().errors().length === 0) {
                 //Save the comment to the server
                 DAL.insert("comment", ko.toJSON(self.newComment()))
                     .done(self.afterSave);

             } else {
                 self.newComment().errors.showAllMessages();

             }

         };

         self.afterSave = function () {
             //Add to the List
             self.comments.push(self.newComment());
             //Re Initialise the new Comment
             self.newComment(new Comment());
         };

         //get comments from server
         self.getLatestComments = function () {
             return DAL.get("comment", {});
         };

         //Initialize the comment list, call server and update comments array
         self.getLatestComments().done(self.comments);

     }

     ko.applyBindings(new CommentViewModel());

 }($, ko));

演示