PHP AJAX提交表单与while循环。

I am making a live comment function. Here the problem is that when I am commenting the comment is successful but the data gets inserted as many times the form is present in the while loop. I think I should assign a separate status id (sts_id) to each form from table status and make changes in my ajax code so that it submits data only once rather than submitting as many times as the form is created in while loop. For example, since the form is in while loop and there are 6 status posts then when I comment on a status the comment gets inserted 6 times. Also one more problem is there i.e., commenting function is currently working only on the 1st form inside the while loop. On other forms, the form submission is not working i.e., its not submitting the comments. I think adding separate ids might solved this too. Please help.

我正在做一个实时评论函数。这里的问题是，当我进行注释时，注释是成功的，但是数据被插入的次数与表单在while循环中出现的次数相同。我认为我应该从表状态为每个表单分配一个单独的状态id (sts_id)，并在我的ajax代码中进行更改，以便它只提交一次数据，而不是提交表单在while循环中创建的次数。例如，由于表单在while循环中，并且有6个状态post，当我评论一个状态时，注释会被插入6次。还有一个问题。， comments函数目前仅在while循环中的第一个表单上工作。在其他表格上，表格提交不工作。，它没有提交评论。我认为添加单独的id也可以解决这个问题。请帮助。

HTML part

HTML的一部分

<script>
       function ajaxFunction(){
  var ajaxRequest; 
  try{
      ajaxRequest = new XMLHttpRequest();
  }catch (e){
      try{
        ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
      }catch (e) {
        try{
           ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
        }catch (e){
           // Something went wrong
           alert("Your browser broke!");
           return false;
        }
      }
  }
  $('.commentarea').keydown(function(event) {
    var id = $(this).attr('id');
    var status_id = id.replace("postcomment_", "");
    if($.trim($("#postcomment_"+status_id).val())) {
      if(event.keyCode == 13) {
        event.preventDefault();
        $("form#form_id_"+status_id).on('submit', function (e) {
          e.preventDefault();
          var comment = $('#postcomment_'+status_id).val();
          var statsid = status_id;
          var myData = {"comment": comment, "statsid": statsid};
          $.ajax({
            url: "post-comment.php",
            type: "POST",
            data: myData,
            success: function (data, status, xhr) {
              $(".showbox").html(data); // output result
              $('#postcomment').val('');
            }
          });
        });
      }
    }
  });
}
</script>

    <div class="stats-cont">
<?php 
$get_sts = "SELECT * FROM status LEFT JOIN members ON status.sts_mem = members.mem_id ORDER BY sts_time DESC";

$get_stq = $pdo->prepare($get_sts);
$get_stq->execute();

while($get_stf = $get_stq->fetch()){ extract($get_stf); 

$get_cmts = "SELECT * FROM comments WHERE cmt_status = :status ORDER BY cmt_id ASC";
$get_cmtq = $pdo->prepare($get_cmts);
$get_cmtq->bindValue(':status', $sts_id);
$get_cmtq->execute();
$total_cmts = $get_cmtq->rowCount();
?>
<div class="status-note-block status-container">
  <div class="member-name-container">
    <div class="mem-img-thumb">
      <?php if($mem_image == null){ ?>
      <img src="images/user.png" height="40" width="40">
      <?php }else{ ?>
      <img src="users/<?php echo $mem_image; ?>" height="40" width="40">
      <?php } ?>
    </div>
    <div class="member-name"><?php echo $mem_name; ?><br>
      <small>
      <?php if((date("Y-m-d", strtotime($sts_time))) == $curr_date){ echo "Today"; }else if((date("Y-m-d", strtotime($sts_time))) == $yest){ echo "Yesterday"; }else{ echo date("jS F", strtotime($sts_time)); } ?>
      <?php echo date("h:i a", strtotime($sts_time)); ?> </small> </div>
  </div>
  <div class="status-block"><?php echo $sts_status; ?></div>
</div>
<div class="comment-block">
  <div class="comment-reaction-holder"></div>
  <?php while($fetch_cmts = $get_cmtq->fetch()){ extract($fetch_cmts); ?>
  <div class="comment-flex-holder">
    <div class="comment-img-thumb">
      <?php if($mem_image == null){ ?>
      <img src="images/user.png" height="30" width="30">
      <?php }else{ ?>
      <img src="users/<?php echo $mem_image; ?>" height="30" width="30">
      <?php } ?>
    </div>
    <div class="showbox"><font color="#5B5899" style="font-size: 12px"><b><?php echo $mem_name; ?></b></font> <?php echo $cmt_comment; ?><br />
      <font style="font-size:12px">Like &middot; Reply &middot; Just now</font></div>
  </div>
  <br />
  <?php } ?>
    <div id="showbox"></div>
  <div class="commet-field-holder">
    <div class="comment-img-thumb">
      <?php if($mem_image == null){ ?>
      <img src="images/user.png" height="30" width="30">
      <?php }else{ ?>
      <img src="users/<?php echo $mem_image; ?>" height="30" width="30">
      <?php } ?>
    </div>
    <form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" class="full-width cmtform" id="form_id_<?php echo $sts_id?>">
      <input type="hidden" name="status_id" value="<?php echo $sts_id; ?>" id="statsid_<?php echo $sts_id?>" />
      <textarea name="comment" placeholder="Give a comment..." class="comment-field commentarea" id="postcomment_<?php echo $sts_id?>" onclick='ajaxFunction()'></textarea>
    </form>
  </div>
</div>
<?php } ?>

post-comment.php part:

post-comment。php部分:

    <?php
//error_reporting(0);
include('config/db.php');
$time = date('Y-m-d H:i:s');

$content   = (!empty($_POST['comment']))?$_POST['comment']:null;
$status_id = (!empty($_POST['statsid']))?$_POST['statsid']:null;

$insert = "INSERT INTO `comments`(`cmt_comment`,`cmt_status`, `cmt_time`)VALUES(:comment, :status, :time)";
$inserq = $pdo->prepare($insert);
$inserq->bindValue(':comment', $content);
$inserq->bindValue(':status', $status_id);
$inserq->bindValue(':time', $time);
$inserq->execute();
$lastid = $pdo->lastInsertId();

$sel = "SELECT * FROM comments 
        LEFT JOIN status ON comments.cmt_status = status.sts_id 
        LEFT JOIN members ON members.mem_id = status.sts_mem
        WHERE comments.cmt_id = :lastid";
$seq = $pdo->prepare($sel);
$seq->bindValue(':lastid', $lastid);
$seq->execute();
$sef = $seq->fetch();
?>

<div class="comment-flex-holder">
  <div class="comment-img-thumb">
    <?php if($sef['mem_image'] == null){ ?>
    <img src="images/user.png" height="30" width="30">
    <?php }else{ ?>
    <img src="users/<?php echo $sef['mem_image']; ?>" height="30" width="30">
    <?php } ?>
  </div>
  <div class="showbox"><font color="#5B5899" style="font-size: 12px"><b><?php echo $sef['mem_name']; ?></b></font> <?php echo $sef['cmt_comment']; ?><br />
    <font style="font-size:12px">Like &middot; Reply &middot; Just now</font></div>
</div>
<br />

2 个解决方案

#1

Since, While Loop having n numbers of form. So, each form & input values will have different IDs. In your question, same ID is declared to each and every input. So, Multiple IDs with same name are not allowed. ID can't be same.

因为，While循环有n个数的形式。因此，每个表单和输入值都有不同的id。在您的问题中，每个输入都声明相同的ID。因此，不允许有多个名称相同的id。ID不能相同。

First, you need to change each and every input ID. More simple way, Append Status ID to each ID. It will automatically get changed.

首先，您需要更改每个输入ID，更简单的方式是将状态ID添加到每个ID，它将自动被更改。

If you want to use this answer, then you need to copy my answer as it is. Rather than, modifying in your code. Because, You may leave few lines and later on outcome will come as "Not Working". So, Try this Code. If any problem, Feel free to ask.

如果你想用这个答案，那么你需要照搬我的答案。而不是修改代码。因为，你可能只留下几行，之后的结果将以“不工作”的形式出现。所以,试试这个代码。如果有什么问题，尽管问吧。

Updated Code

更新代码

<script>
function ajaxFunction(){
  var ajaxRequest; 
  try{
      ajaxRequest = new XMLHttpRequest();
  }catch (e){
      try{
        ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
      }catch (e) {
        try{
           ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
        }catch (e){
           // Something went wrong
           alert("Your browser broke!");
           return false;
        }
      }
  }
  $('.commentarea').keydown(function(event) {
    var id = $(this).attr('id');
    var status_id = id.replace("postcomment_", "");
    if ($.trim($("#postcomment_"+status_id).val())) {
      if (event.keyCode == 13) {
        event.preventDefault();
        $("form#form_id_"+status_id).on('submit', function (e) {
          e.preventDefault();
          var comment = $('#postcomment_'+status_id).val();
          var statsid = status_id;
          var myData = {"comment": comment, "statsid": statsid};
          $.ajax({
            url: "post-comment.php",
            type: "POST",
            data: myData,
            success: function (data, status, xhr) {
              $(".showbox").html(data); // output result
              $('#postcomment').val();
            }
          });
        });
      }
    }
  });
}
</script>

<div class="stats-cont">
<?php 
$get_sts = "SELECT * FROM status LEFT JOIN members ON status.sts_mem = members.mem_id ORDER BY sts_time DESC";

$get_stq = $pdo->prepare($get_sts);
$get_stq->execute();

while($get_stf = $get_stq->fetch()){ extract($get_stf); 

$get_cmts = "SELECT * FROM comments WHERE cmt_status = :status ORDER BY cmt_id ASC";
$get_cmtq = $pdo->prepare($get_cmts);
$get_cmtq->bindValue(':status', $sts_id);
$get_cmtq->execute();
$total_cmts = $get_cmtq->rowCount();
$fetch_cmts = $get_cmtq->fetch();
?>
<div class="status-note-block status-container">
  <div class="member-name-container">
    <div class="mem-img-thumb">
      <?php if($mem_image == null){ ?>
      <img src="images/user.png" height="40" width="40">
      <?php }else{ ?>
      <img src="users/<?php echo $mem_image; ?>" height="40" width="40">
      <?php } ?>
    </div>
    <div class="member-name"><?php echo $mem_name; ?><br>
      <small>
      <?php if((date("Y-m-d", strtotime($sts_time))) == $curr_date){ echo "Today"; }else if((date("Y-m-d", strtotime($sts_time))) == $yest){ echo "Yesterday"; }else{ echo date("jS F", strtotime($sts_time)); } ?>
      <?php echo date("h:i a", strtotime($sts_time)); ?> </small> </div>
  </div>
  <div class="status-block"><?php echo $sts_status; ?></div>
</div>
<div class="comment-block">
  <div class="comment-reaction-holder"></div>
  <div class="commet-field-holder">
    <div class="comment-img-thumb">
      <?php if($mem_image == null){ ?>
      <img src="images/user.png" height="30" width="30">
      <?php }else{ ?>
      <img src="users/<?php echo $mem_image; ?>" height="30" width="30">
      <?php } ?>
    </div>
    <div class="showbox"></div>
    <form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" class="full-width cmtform" id="form_id_<?=$sts_id?>">
      <input type="hidden" name="status_id" value="<?php echo $sts_id; ?>" id="statsid_<?=$sts_id?>" />
      <textarea name="comment" placeholder="Give a comment..." class="comment-field commentarea" id="postcomment_<?=$sts_id?>" onclick='ajaxFunction()'></textarea>
    </form>
  </div>
</div>
<?php } ?>

Edit 1

编辑1

<script>
    function ajaxFunction(){
      var ajaxRequest; 
      try{
          ajaxRequest = new XMLHttpRequest();
      }catch (e){
          try{
            ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
          }catch (e) {
            try{
               ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
            }catch (e){
               // Something went wrong
               alert("Your browser broke!");
               return false;
            }
          }
      }
      $('.commentarea').keydown(function(event) {
              var id = $(this).attr('id');
              var status_id = id.replace("postcomment_", "");
              if ($.trim($("#postcomment_"+status_id).val())) {
                if (event.keyCode == 13) {
                        event.preventDefault();
                        postcomment(status_id);
                }
              }
            });
            function postcomment(status_id){
                var comment = $('#postcomment_'+status_id).val();
                    var statsid = status_id;
                    var myData = {"comment": comment, "statsid": statsid};
                    $.ajax({
                        url: "post-comment.php",
                        type: "POST",
                        data: myData,
                        success: function (data, status, xhr) {
                            $(".showbox").html(data); // output result
                            $('#postcomment').val();
                        }
                    });
            }
    }
    </script>

#2

to maintain uniqueness in comment box you should use counter. that will create dynamic name and id. same you need to fetch in ajax call $(this).attr('data-counter')

要保持注释框中的唯一性，您应该使用counter。这将创建动态名称和id。同样，需要获取ajax调用$(this).attr('data-counter')

you can check below code and set according to your need.

您可以查看下面的代码并根据需要进行设置。

<script>
    function ajaxFunction(){
        var ajaxRequest; 
        try{
            ajaxRequest = new XMLHttpRequest();
        }catch (e){
            try{
              ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
            }catch (e) {
              try{
                 ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
              }catch (e){
                 // Something went wrong
                 alert("Your browser broke!");
                 return false;
              }
            }
        } 
    $('.postcomment').keydown(function(event) {
        if($.trim($(".postcomment").val())) {
            if(event.keyCode == 13) {
                event.preventDefault();
                $("form.cmtform").submit();
            }
        }   
    });
    $("form.cmtform").on('submit', function(e) {
        e.preventDefault();
        var counter_val = $(this).attr('data-counter');
        var comment = $('#postcomment_' + counter_val).val(); 
        var statsid = $('#statsid_' + counter_val).val(); 
        var myData={"comment":comment, "statsid":statsid};
        $.ajax({
            url : "post-comment.php",
            type: "POST",
            data : myData,
            success: function(data,status,xhr){
                $(".showbox").html(data); // output result
                $('#postcomment_' + counter_val).val();
            }
        }); 
    }); 
    }
</script>

<div class="stats-cont">
<?php 
    $get_sts = "SELECT * FROM status LEFT JOIN members ON status.sts_mem = members.mem_id ORDER BY sts_time DESC";

$get_stq = $pdo->prepare($get_sts);
$get_stq->execute();
    $counter = 1;
    while($get_stf = $get_stq->fetch()){ extract($get_stf); 

    $get_cmts = "SELECT * FROM comments WHERE cmt_status = :status ORDER BY cmt_id ASC";
    $get_cmtq = $pdo->prepare($get_cmts);
    $get_cmtq->bindValue(':status', $sts_id);
    $get_cmtq->execute();
    $total_cmts = $get_cmtq->rowCount();
    $fetch_cmts = $get_cmtq->fetch();
?>
<div class="status-note-block status-container">
  <div class="member-name-container">
    <div class="mem-img-thumb">
      <?php if($mem_image == null){ ?>
      <img src="images/user.png" height="40" width="40">
      <?php }else{ ?>
      <img src="users/<?php echo $mem_image; ?>" height="40" width="40">
      <?php } ?>
    </div>
    <div class="member-name"><?php echo $mem_name; ?><br>
      <small>
      <?php if((date("Y-m-d", strtotime($sts_time))) == $curr_date){ echo "Today"; }else if((date("Y-m-d", strtotime($sts_time))) == $yest){ echo "Yesterday"; }else{ echo date("jS F", strtotime($sts_time)); } ?>
      <?php echo date("h:i a", strtotime($sts_time)); ?> </small> </div>
  </div>
  <div class="status-block"><?php echo $sts_status; ?></div>
</div>
<div class="comment-block">
  <div class="comment-reaction-holder"></div>
  <div class="commet-field-holder">
    <div class="comment-img-thumb">
      <?php if($mem_image == null){ ?>
      <img src="images/user.png" height="30" width="30">
      <?php }else{ ?>
      <img src="users/<?php echo $mem_image; ?>" height="30" width="30">
      <?php } ?>
    </div>
    <div class="showbox"></div>
    <form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" class="full-width cmtform" data-counter="<?php echo $counter;?>">
       <input type="hidden" name="status_id_<?php echo $counter;?>" value="<?php echo $sts_id; ?>" id="statsid_<?php echo $counter;?>" />
      <textarea name="comment_<?php echo $counter;?>" placeholder="Give a comment..." class="postcomment comment-field commentarea" id="postcomment_<?php echo $counter;?>" onclick='ajaxFunction()'></textarea>
     </form>
  </div>
</div>
    <?php 
    $counter++;
} 
?>

Cheers !!

干杯! !