ajax多个表单提交输入按

Question

我想通过ajax和php做一个评论系统。此代码只提交第一篇文章评论。其他人发表评论无效。当其他评论发布并进入其重新加载页面时。只有第一篇文章评论完美。请帮我解决这个问题。

我的HTML：

$data = $con->query($sql); 
    if($data->num_rows>0){ 
    while($row = $data->fetch_array(MYSQLI_ASSOC)) 
    {   
     echo '<div class="box-footer">'; 
     echo '<form id="comment_form" name="comment_form" method="post">'; 
     echo '<img class="img-responsive img-circle img-sm" src="http://localhost/admin/dist/img/user1-128x128.jpg" alt="Alt Text">'; 
     echo '<div class="img-push">'; 
     echo '<input type="hidden" name="post_id" id="post_id" value="'.$id.'">'; 
     echo '<input type="text" class="form-control input-sm" name="comment" id="comment" placeholder="Press enter to post comment">'; 
     echo '</div>'; 
     echo '</form>'; 
     echo '</div>'; 
    } 
} 

提交功能是：

$(document).ready(function(){ 
     $("#comment_form").submit(function(e){ 
      e.preventDefault(); 

      if (document.getElementById("comment").value == "") { 
      swal("ERROR", "Please write a comment first", "error"); 
      } else { 
       var user_id = <?php echo $user_id; ?>; 
       var post_id = document.getElementById("post_id").value; 
       var comment = document.getElementById("comment").value; 

       var dataString = 'userid=' + user_id + '&post_id=' + post_id + '&comment=' + comment; 
       $.ajax({ 
       type: "POST", 
       url: "commentupload.php", 
       data: dataString, 
       cache: false, 
       success: function(html) { 
        var status = html; 
        if(status == 0){ 
        swal("Success", "Comment Added!", "success"); 
        post_id = ""; 
        comment = ""; 
        document.getElementById("post_id").value = ""; 
        document.getElementById("comment").value = ""; 
        } 
        else if(status == 1) { 
        swal("ERROR", "Something went wrong!", "error"); location.reload(); 
        } 
        else { 
        swal("ERROR", status, "error");    
        } 
       } 
       }); 
       return false; 
      } 
     }); 
     }); 

Answer 1

我建议这个解决方案
在HTML中。类似的东西

<form action="url" method="POST" class="my-form"> 
    <input type="hidden" name="post_id" value="x"> 
    <input type="text" name="comment"> 
    <input type="submit"> 
</form> 

<form action="url" method="POST" class="my-form"> 
    <input type="hidden" name="post_id" value="y"> 
    <input type="text" name="comment"> 
    <input type="submit"> 
</form> 

在JS

$(".my-form").submit(function(event){ 
    // Stop all form submit event 
    event.preventDefault(); 

    $(".my-form").each(function (key, form){ 
     // Check not empty form 
     if ($(form).find('input[name="comment"]').val() != ''){ 
      // Do ajax 
      $.ajax({ 
       url: url, 
       method: 'POST', 
       data: $(form).serialize(), 
       success: function(response){ 
       } 
      }) 
     } 
    }); 
});