Display coordinates value in input text after button clicked

Question

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.

https://stackoverflow.com/questions/23744605/javascript-get-x-and-y-coordinates-on-mouse-click, https://stackoverflow.com/questions/9979224/insert-mouse-click-coordinates-into-text-input-box-with-javascript, ... — Don't Panic, May 06 '22 at 06:10
Where, specifically, are you stuck? Is something not working as you expect? If so, please state your expectation/desire, and what you actually get. Please read "[ask]" for tips & guidelines. — outis, May 06 '22 at 06:14
Duplicate of "[Using an HTML button to call a JavaScript function](https://stackoverflow.com/q/1947263/90527)" and likely many others. — outis, May 06 '22 at 08:46

score 1 · Accepted Answer · answered May 06 '22 at 06:00

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

score 0 · Answer 2 · edited May 06 '22 at 06:19

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

Display coordinates value in input text after button clicked

2 Answers2