Sending values from JS to PHP using AJAX

Question

I tried to send values from JavaScript to PHP by following the code provided at

Send date from JavaScript to PHP without using Query String

and I am getting error

Notice: Undefined index: getlat in /Applications/XAMPP/xamppfiles/htdocs/test1.php on line 25

Notice: Undefined index: getlon in /Applications/XAMPP/xamppfiles/htdocs/test1.php on line 26

Can anyone help me fixing the issue, thanks.

My code is:

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
    }
}
function showPosition(position) {
    document.getElementById("getlat").value = position.coords.latitude;
    document.getElementById("getlon").value = position.coords.longitude;
}
$( document ).ready(function() {
$.ajax({url:"test1.php",type:"POST",async:false,
data:{getlat:$("#getlat").val(),getlon:$("#getlon").val()}
});
});
</script>
</head>
<body>
<input type="hidden" id="getlat" name="getlat" /> 
<input type="hidden" id="getlon" name="getlon" />
<?php 
$lat = $_POST["getlat"];
$lon = $_POST["getlon"]; 
echo $lat;
echo $lon;
?>
</body>
</html>

UPDATE 1

Following the comments I tried this way and that too didn't work

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
    }
}
function showPosition(position) {
    document.getElementById("getlat").value = position.coords.latitude;
    document.getElementById("getlon").value = position.coords.longitude;
}
</script>
</head>
<body>
<input type="hidden" id="getlat" name="getlat" /> 
<input type="hidden" id="getlon" name="getlon" />
<?php 
$lat = $_POST["getlat"];
$lon = $_POST["getlon"]; 
echo $lat;
echo $lon;
?>
<script>
$( document ).ready(function() {
getLocation();
$.ajax({url:"test1.php",type:"POST",async:false,
data:{getlat:$("#getlat").val(),getlon:$("#getlon").val()}
});
});
</script>
</body>
</html>

Are you expecting your ajax call to set the values of $_POST["getlat"] and $_POST["getlon"] further down the page? If so this wont work, that is not how ajax works — Patrick Evans
– Patrick Evans, Commented Aug 24, 2014 at 8:03
@PatrickEvans - Can you please rewrite the syntax for me, thanks. — Karthik Malla
– Karthik Malla, Commented Aug 24, 2014 at 8:18
Am I right in thinking you copied some snippets of someone elses question and expect it to work? — RST
– RST, Commented Aug 24, 2014 at 8:19
Re your edit: You have dealt with the first of the three problems described in my answer but ignored the other two. — Quentin
– Quentin, Commented Aug 24, 2014 at 9:32

Quentin · Accepted Answer · 2014-08-24 13:20:56Z

You have three different and serious problems with this.

You never call `getLocation`

The function that populates your input elements with data never gets called. You have to call it.

Put getLocation() inside your ready event handler.

`getCurrentPosition` is asynchronous

You can't be sure it will have finished running (and populating the input elements with data) by the time that you kick off your Ajax request.

You need to move the call to $.ajax inside your callback function for getLocation. i.e. just after this line: document.getElementById("getlon").value = position.coords.longitude;

Ajax is a different request

You are requesting test1.php twice.

First you request it by typing the address into your browser's address bar. (so $_POST["getlat"];) will not be set).

Then, as part of loading it, you use JavaScript to request it again (this time with some data)… but you don't do anything with the response.

Ajax will not rewrite your current request (and it would be too late for that anyway as that request has already been responded to), it will make a new one.

You need to move the block of PHP at the end into a different file, and use the URL for that in $.ajax. Then you need to add a success function to the ajax options, and use it to do something with the response you get back.

thomasreiser · Accepted Answer · 2014-08-24 08:05:27Z

0

You need to call getLocation() in your document.ready() callback first. After that, do the ajax request in the callback of your getCurrrentPosition() call.

This should do the job.

answered Aug 24, 2014 at 8:05

thomasreiser

3003 silver badges14 bronze badges

Collectives™ on Stack Overflow

Sending values from JS to PHP using AJAX

2 Answers 2

You never call `getLocation`

`getCurrentPosition` is asynchronous

Ajax is a different request

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

You never call getLocation

getCurrentPosition is asynchronous

Ajax is a different request

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related

You never call `getLocation`

`getCurrentPosition` is asynchronous