This page that I have developed is designed for entering Latitude and Longitude values.
<div class="container ">
<form class="entry">
<div class="aligncenter">
<h5 style="color:MediumTurquoise; font-weight:100; font-family:'Oswald', sans-serif; letter-spacing: 0.1em;">Please input the coordinates</h5>
<div>
<input type="number" min="0.0000000" max="999.9999999" id="lat" placeholder="Latitude">
<input type="number" min="0.0000000" max="999.9999999" id="long" placeholder="Longitude">
<button class="btn-rounded btn-normal btn-medium btn-primary" id="search" value="get Info">Submit</button>
</div>
</div>
</form>
</div>
Upon providing the input, a script using Jquery gets triggered to fetch information from a REST API.
<script>
var data;
$(document).ready(function () {
$("#search").click(function () {
let lat = $("#lat").val();
let long =$("#long").val();
if (lat == "" || long == "") {
alert("Kindly provide both latitude and longitude values");
return;
}
else {
document.getElementById('message').style.visibility = 'hidden';
document.getElementById('note').style.visibility = 'visible';
$('#note').show();
$('.show-onclick').show();
$.ajax({
type: "GET",
url: `https://rest.soilgrids.org/query?lon=${long}&lat=${lat}&attributes=ORCDRC,PHIHOX,PHIKCL,BLDFIE,CLYPPT,SLTPPT,SNDPPT,WWP`,
dataType: "json",
success: function (response) {
console.log(response);
// Retrieving and displaying specific properties from the response
},
error: function (error) {
console.log(error);
alert("No data found");
}
})
}
})
})
</script>
Despite the successful display of information on initial search, I encounter difficulties in refreshing the page to show new data after subsequent inputs. The issue doesn't seem to be related to the input type as initially thought. While the console displays the information, it fails to reflect on the page.