How to submit a form data using Jquery ajax and php - php

Question

This Jquery code isn't displaying my error message atleast... Each time i submit the form i expect a success or error message but it doesn't seem like it is responding...
<form method="POST" id="comment_form">
<div class="form-group">
<input type="text" name="comment_name" id="comment_name" class="form-control" placeholder="Enter Name">
</div>
<div class="form-group">
<textarea name="comment_content" id="comment_content" class="form-control" placeholder="Enter your comment" cols="30" rows="5"></textarea>
</div>
<div class="form-group">
<input type="hidden" name="comment_id" id="comment_id" value="0">
<input type="submit" name="submit" id="submit" class="btn btn-info" value="submit">
</div>
</form>
<span id="comment_message"></span>
//add_comment.php page
<?php require_once("../include/database.php"); ?>
<?php
$error = $comment_name = $comment_content = "";
if(empty($_POST["comment_name"])){
$error .= '<p class="text-danger">Name is required</p>';
}else{
$comment_name = $_POST["comment_name"];
}
if(empty($_POST["comment_content"])){
$error .= '<p class="text-danger">Comment is required</p>';
}else{
$comment_content = $_POST["comment_content"];
}
if($error == ''){
// $comments = new Comment();
// $comments->parent_comment_id = $_POST["comment_id"];
// $comments->comment = $comments;
// $comments->comment_sender_name = $comment_name;
// $comments->save();
$sql = "INSERT INTO comments (parent_comment_id, comment, comment_sender_name)
VALUES (:parent_comment_id, :comment, :comment_sender_name)";
$statement = $database->query($sql = array(
':parent_comment_id' => $_POST["comment_id"],
':comment' => $comment_content,
':comment_sender_name' => $comment_name
)
);
$error = '<label class="text-success">Comment Added</label>';
}
$data = array(
'error' => $error
);
echo json_encode($data);
?>
//Jquery code
$(document).ready(function(){
$('#comment_form').on('submit', function(event){
event.preventDefault();
var form_data = $(this).serialize();
$.ajax({
url:"add_comment.php",
method:"POST",
data:{form_data:form_data},
dataType:"json",
success:function(data){
if(data.error != ''){
$('#comment_form')[0].reset();
$('#comment_message').html(data.error);
}
}
});
});
});
Please i need to know why the submit button isn't responding...
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
The necessary bootstrap and jquery libraries were added...