Jquery ajax Post variables to php

Question

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.

Your ajax call is never made, because you have syntax errors. You have an extra closing `}` and you're missing the comma after `data: { lat:lat, lon:lon}`, which you would have noticed had you opened the browser console. — adeneo, Apr 03 '16 at 19:03
@adeneo thank you so much.İ'm very grateful. İt's working now. Thank you again. İ dealt it since 1 week. — Furkan Penbegül, Apr 03 '16 at 19:51

score 3 · Accepted Answer · answered Apr 03 '16 at 19:51

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

Avoid the extra closing brace below the function showPosition().
Add comma after the data section in 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>

Jquery ajax Post variables to php

1 Answers1