Before fetching the PHP result, I want a loading GIF image to display within the div section.
<!DOCTYPE html>
<html>
<head>
<title>
CTR Calculator Tool | Free Click Through Rate Online Calculator
</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<form id="myForm" method="post">
Clicks: <input name="name" id="name" type="text" /><br />
Impressions: <input name="email" id="email" type="text" /><br />
<input
type="button"
id="submitFormData"
onclick="SubmitFormData();"
value="Submit"
/>
</form>
<br />
Your data will display below..... <br />
==============================<br />
<div id="loader" style="display: none">
<img src="ajax-loader.gif" />
<!-- All data will display here -->
</div>
<div id="results"></div>
<script>
function SubmitFormData() {
var name = $("#name").val();
var email = $("#email").val();
$.post("submit.php", { name: name, email: email }, function (data) {
$("#results").html(data);
$("#myForm")[0].reset();
});
}
</script>
</body>
</html>
I am trying to implement a loading image before making the server request to fetch results from the PHP file. However, I am facing some challenges in accomplishing this task.