Display coordinates value in input text after button clicked-CodePudding

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 ><input  type="text" name="business_latitude" id="" placeholder="Latitude" style="font-family: Roboto, sans-serif;" value="<?php echo $bizLat; ?>"></div>
<div ><input  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.

CodePudding user response：

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;
    });

CodePudding user response：

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 ––>