how to send a photo using telegram bot with js/jquery in html form?

previously I have some code like this to send a message to the user

<button class="notif btn btn-success"
href="https://api.telegram.org/bot/sendMessage?chat_id=&text=Halo%20%20permintaan%20anda%20dengan%20id%20%20sudah%20di%20close%20">Notif</button>

and I am using jquery&js to get URL from href and execute HTTPS post request it works perfectly for me

<script type="text/javascript">
$(".notif").unbind().click(function() {
var url = $(this).attr("href");
console.log(url);
var exe = $.post(url, function() {
alert('Success');
})
});
</script>

but now I want to send a photo to a group of telegram with reply id and the codes looks like this

<form method="POST"
action="https://api.telegram.org/bot/sendPhoto" enctype="multipart/form-data">
<input type="text" name="chat_id" value="" hidden />
<input type="text" name="reply_to_message_id" value="" hidden />
<input type="text" name="allow_sending_without_reply" value="true" hidden />
<br />
<label for="caption"> Caption</label>
<input type="text" name="caption" placeholder="caption" />
<br />
<input type="file" name="photo" />
<br />
<input type="submit" value="sendPhoto" />
</form>

the problem with this code is after I submit the form it's opening a page that contains JSON response, I just want to alert it as I do in previous code

json response tab picture

and the question is, how can I send a photo with the form with telegram bot using js/jquery with reply id in the URL ??