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){ 
       } 
      }) 
     } 
    }); 
});