'Display coordinates value in input text after button clicked

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.

javascriptphphtml


Solution 1:[1]

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

Solution 2:[2]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Xupitan
Solution 2 DharmanBot

Related Questions