help me with this. I have a javascript to get current user coordinates (latitude & Longitude) by using a botton. So, what I want is when clicked the button, it will get the coordinates and display in the two input text which is one for latitude and one for longitude. Before this, I just display it in <p> element.
HTML & PHP:
<div class="mb-3"><input class="border rounded-0 form-control" type="text" name="business_latitude" id="" placeholder="Latitude" style="font-family: Roboto, sans-serif;" value="<?php echo $bizLat; ?>"></div>
<div class="mb-3"><input class="border rounded-0 form-control" type="text" name="business_longitude" id="" placeholder="Longitude" style="font-family: Roboto, sans-serif;" value="<?php echo $bizLong; ?>"></div>
<p id="lati"></p>
<p id="longi"></p>
Javascript:
var x = document.getElementById("lati");
var y = document.getElementById("longi");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude;
y.innerHTML ="Longitude: " + position.coords.longitude;
}
<?php echo $bizLat; ?>, <?php echo $bizLong; ?> here is where they get saved coordinates in database. I just want to edit the latitude and longitude by pressing the button.
you can add event listener for a button
const btn = document.getElementById("yourButton");
const x = document.getElementById("lati");
const y = document.getElementById("longi");
btn.addEventListener("click", function onClick(event) {
document.getElementById("input_latitude").value = x.innerHTML;
document.getElementById("input_longitude").value = y.innerHTML;
});
You cannot change the values of php variables using javascript since it run on client side.
You can use document.cookie to store values of coordinates and then access them in your php script. To store your values in cookie update your js script as:
//declare two variables to store your values
var latitude;
var longitude;
//now assign coordiates to these var in showPosition function or where it is possible.
var x = document.getElementById("lati");
var y = document.getElementById("longi");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude;
y.innerHTML ="Longitude: " + position.coords.longitude;
//assigning coordinates
latitude=position.coords.latitude;
longitude=position.coords.longitude;
}
//add a cookie with these variables as
document.cookie="latitude="+latitude;
document.cookie="longitude="+longitude;
//to ensure cookies are set
console.log(document.cookie);Then in php script
$latitude = $_COOKIE['latitude'];
$longitude = $_COOKIE['longitude'];
<!--you can use these values to update your database table as well ––>