This is the code I'm working with:
<html>
<body>
<?php
include('header.php');
?>
<div class="page_rank">
<form name="search" id="searchForm" method="post">
<span class="my_up_text">ENTER THE WEBSITE TO CHECK GOOGLE PAGE RANK:</span>
<br /><br />
<input type="text" name="my_site"/></form></div>
<div class="p_ity">
<a href="#" class="btn" onclick="sub_form();">PAGE RANK</a></div>
<div id="my_pass"></div>
<script>
function sub_form()
{
document.forms["search"].submit();
}
$(function () {
$('form#searchForm').on('submit', function(e) {
$.ajax({
type: 'post',
url: 'check-google-page-rank.php',
data: $('form').serialize(),
success: function (data) {
$('#my_pass').html(data);
}
});
e.preventDefault();
});
});
</script>
</body>
</html>
The issue I'm facing is that the AJAX post works perfectly fine when using a submit button in the form. However, it does not work when using the sub_form() method to submit the form after an onclick event. I am unsure whether the JavaScript sub_form() method will trigger the jQuery AJAX function or not.
Just a note to mention:
The data returned by the post URL is
echo "<img width=\"165\" height=\"55\" src=\"./images/page-rank/pr".$rank.".gif\" />"