javascriptphpjqueryajaxw3c-geolocation

Jquery ajax Post variables to php

my ajax.php script

<?php
$lat =$_POST['lat'];
$lon = $_POST['lon'];
echo $lat;
echo $lon;
?>

And my new.html page

<!DOCTYPE html>
<html><head><script src="jquery-1.12.0.min.js"></script>
</head>
<body>

<p>Click the button to get your coordinates.</p>
<input type="text" name="metin"/><br/>
<button onclick="getLocation()">Try It</button>

<p id="demo"></p>


<p id="demo1"></p>
<script>

var x = document.getElementById("demo");
var y = document.getElementById("demo1");

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 + "<br>Longitude: " + position.coords.longitude;
    var lon= position.coords.longitude;
    var lat= position.coords.longitude;
    y.innerHTML=lon;
    x.innerHTML=lat;
    $.ajax({
            type: 'POST',
            url: 'ajax.php',
            data:  { lat:lat, lon:lon}
             success: function(result) {
                $('#sonuc').html(result);
            },
            error: function() {
                alert('Some error found. Please try again!');
            }
        });
    }
}

</script>

<p id="sonuc"></p>
</body>
</html>

Firstly i know there is unused codes. But İ'm gonna use this blocks. İt's not give me any response. İt's have to work successfuly. But it's not give me lat and lon varibles in my php page. İf there is another way to send variables to php page i can try.

Solution

  • No functional issues in code. But there is some syntax errors that blocks the ajax request.

    Corrected code is given below.

    <script>

var x = document.getElementById("demo");
var y = document.getElementById("demo1");

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 + "<br>Longitude: " + position.coords.longitude;
    var lon= position.coords.longitude;
    var lat= position.coords.longitude;
    y.innerHTML=lon;
    x.innerHTML=lat;
    $.ajax({
            type: 'POST',
            url: 'ajax.php',
            data:  { lat:lat, lon:lon},
             success: function(result) {
                $('#sonuc').html(result);
            },
            error: function() {
                alert('Some error found. Please try again!');
            }
    });
}

</script>