jeudi 23 juin 2016
Latitude & Longitude retreived and added to form for database submission
I want my code to retrieve the coordinates of the person and load them into a form field to be sent to my database. Here is my index.php page.
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="leaflet/leaflet.css" />
<script src="jquery.js" type="text/javascript"></script>
</head>
<body>
<h1>A small example page to insert some data in to the MySQL database using PHP</h1>
<form action="input.php" method="post">
Name: <input type="text" name="name" /><br><br>
Age: <input type="text" name="age" /><br><br>
<input type="text" name="latitude" <?php echo $_GET["demo"]; ?><?php echo $demo ?>/>
Latitude:<input size="20" id="latitude" type="text" name="latitude" <?php echo $_GET["latitude"]; ?><?php echo $latitude ?>/>
<br />
Longitude:<input size="20" id="lngbox" type="text" name="lng" />
<br />
<input type="submit" />
</form>
<button onclick="getLocation()">Try It</button>
<p id="demo"></p>
<script>
var x = document.getElementById("demo");
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;
}
</script>
</body>
</html>
And here's the database submission page input.php
<?php
$con = mysql_connect("*******","*****","*****");
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("*****", $con);
$sql="INSERT INTO ***** (name, age, latitude)
VALUES
('$_POST[name]','$_POST[age]','$_POST[latitude]')";
if (!mysql_query($sql,$con))
{
die('Error: ' . mysql_error());
}
echo "1 record added";
mysql_close($con)
?>
</body>
</html
When the button is pressed, the geolocation is retrieved and sent into the field area, which can be submitted to my database. Thanks for the help!
Inscription à :
Publier les commentaires (Atom)
Aucun commentaire:
Enregistrer un commentaire