stop reloading the entire page after Modal from submission in razor pages - forms

Question

I have a edit page like this
i have a comment button in this page,which is a modal form ,where users can leave their comment
when i submit the Comment form,the entire page is reloading and im losing the edit page content.
Im handling edit page content and comment box in two different forms.
So when i submit the comment form,the modal should open as it is and also the edit page content should not be gone.
This is my modal
<div class="modal modal_outer right_modal fade" id="information_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2">
<div class="modal-dialog" role="document">
<div class="modal-content ">
<div class="modal-header bg-warning" style="height:50px;padding:10px 5px;font-family:'Delivery';">
<h4 class="modal-title">Comments:</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body get_quote_view_modal_body">
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex w-100">
<h5><i class="fas fa-user"></i> User 1</h5>
<small class="ml-auto">1 days ago</small>
</div>
<p>This is for testing.Please ignore this.</p>
</a>
</div>
<form asp-page-handler="SubmitChat">
<div class="form-group mt-2">
<label for="TxtAreaChatBox"><b>Leave Your Comments</b></label>
<textarea asp-for="RequestChatBox.Comments" class="form-control" id="TxtAreaChatBox" rows="4"></textarea>
<input id="hdnCommentReqID" type="hidden" asp-for="RequestChatBox.RequestID" value='#Request.Query["RequestID"]' />
</div>
<div class="modal-footer">
<button type="reset" class="btn btn-danger" data-dismiss="modal"><i class="fas fa-window-close mr-2"></i> Cancel</button>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
</div>
</div>
------------Edited-------------------
<!---COMMENT BOX STARTS HERE-->
<div class="modal modal_outer right_modal fade" id="information_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2">
<div class="modal-dialog" role="document">
<div class="modal-content ">
<div class="modal-header bg-warning" style="height:50px;padding:10px 5px;font-family:'Delivery';">
<h4 class="modal-title">Comments:</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body get_quote_view_modal_body">
<div class="list-group">
#if (Model.ShowRequestChatBox != null){
#foreach (var item in Model.ShowRequestChatBox)
{
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex w-100">
<h6><i class="fas fa-user"></i> <i>#Html.DisplayFor(modelItem => item.CommentedUser)</i></h6>
<small class="ml-auto">#Html.DisplayFor(modelItem => item.LastModifiedTimeStamp)</small>
</div>
<p>#Html.DisplayFor(modelItem => item.Comments)</p>
</a>
}
}
</div>
<form asp-page-handler="SubmitChat" data-ajax="true" data-ajax-method="post" data-ajax-complete="Completed">
<div class="form-group mt-2">
<label for="TxtAreaChatBox"><b>Leave Your Comments</b></label>
<textarea asp-for="RequestChatBox.Comments" class="form-control" id="TxtAreaChatBox" rows="4"></textarea>
<input id="hdnCommentReqID" type="hidden" asp-for="RequestChatBox.RequestID" value='#Request.Query["RequestID"]' />
</div>
<div class="modal-footer">
<button type="reset" class="btn btn-danger" data-dismiss="modal"><i class="fas fa-window-close mr-2"></i> Cancel</button>
<button type="submit" id="BtnChatSubmit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!--COMMENT BOX ENDS HERE-->
Javascript
function Completed(event) {
if (event.responseText != "") {
alert("Some Error Has Occured.Please Check Your Entered Values.");
} else {
alert("Your Comment Has Been Added Successfully");
}
}
Thanks,
Teena