read geolocation and use jquery ajax to post back
<html> | |
<head> | |
<title>Tracker by Ψ [PSI]</title> | |
<style type="text/css"> | |
<!-- | |
input[type=text] { margin-bottom: 8px; display: block; clear: right; width: 150px; } | |
label { float: left; display: block; width: 50px; text-align: right; padding-right: 8px; } | |
.buttons { padding-left: 58px; margin-bottom: 8px; } | |
//--> | |
</style> | |
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> | |
<script type="text/javascript"> | |
$(document).ready(function() { | |
$name = myCookie('name', null); | |
if ($name) $('#name').val($name); | |
}); | |
function getLocation() { | |
if (navigator.geolocation) { | |
navigator.geolocation.getCurrentPosition(showPosition); | |
} else { | |
$("#latitude").val("not supported."); | |
$("#longitude").val("not supported."); | |
} | |
} | |
function showPosition(position) { | |
$("#latitude").val(position.coords.latitude); | |
$("#longitude").val(position.coords.longitude); | |
} | |
function saveLocation() | |
{ | |
if ($('#name').val() == '') | |
{ | |
alert('Please enter your name'); | |
$('#name').focus(); | |
return; | |
} | |
getLocation(); | |
myCookie('name', $('#name').val()); | |
$.ajax({ | |
url: "data.php", | |
type: 'POST', | |
data: $('form').serialize() | |
}).success(function(response) { | |
$('#saved').val(response); | |
}).error(function(response) { | |
$('#saved').val("an error occurred"); | |
}); | |
} | |
function myCookie(key, val) | |
{ | |
if (val != null) | |
{ | |
document.cookie = key + "=" + val; | |
return; | |
} | |
val = document.cookie; | |
if (val == null) return false; | |
return val.replace(key + '=', '').split('; ')[0]; | |
} | |
</script> | |
</head> | |
<body> | |
<form method="post"> | |
<label for="name">Name:</label> | |
<input type="text" name="name" id="name" /> | |
<label for="latitude">Lat:</label> | |
<input type="text" name="latitude" id="latitude" /> | |
<label for="longitude">Long:</label> | |
<input type="text" name="longitude" id="longitude" /> | |
<div class="buttons"> | |
<input type="button" onclick="javascript:saveLocation();" value="save" /> | |
</div> | |
<label for="saved">Saved:</label> | |
<input type="text" name="saved" id="saved" readonly="readonly" /> | |
</form> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment