Good, I'm new to the community. My problem is the following, I need to save the coordinates (latitude and longitude) in my database when the person makes a record in my Web Application . Before making the new entry the user agrees to share their location and this is immediately displayed in a div that I have, you can see in the following image:
Below I show you the code that I have inside the form:
<script type="text/javascript">
if (navigator.geolocation) {
alert("¡Permitenos saber tu ubicación!");
navigator.geolocation.getCurrentPosition(mostrarUbicacion);
} else {alert("¡Error! Este navegador no soporta la
Geolocalización.");}
function mostrarUbicacion(position) {
var latitud = position.coords.latitude;
var longitud = position.coords.longitude;
var div = document.getElementById("ubicacion");
div.innerHTML = "Ubicación actual:" + latitud + " " + longitud;}
function refrescarUbicacion() {
navigator.geolocation.watchPosition(mostrarUbicacion);}
</script>
I need to know how I can pass the content of the div to my database, taking into account that I already have the PHP that executes the income of other fields of the form. I would appreciate if you could help me.
PHP php code to make bd income
Thank you very much
Code Form
<form method="post" action="guardar_ingresofinal.php" enctype="multipart/form-data">
<div class="row" style: aria-hidden="true">
<div class="col-xs-6" >
<div class="row" style: aria-hidden="true">
<div class="col-xs-12" align=left>
Estado:
<select class="selectpicker form-control" id="regestado" name="regestado" required>
<option value="">Seleccionar...</option>
<?php
$query = "SELECT estado FROM estados";
$resultado = $mysqli->query($query);
WHILE($row = $resultado->fetch_assoc()){ ?>
<option value="<?php echo $row['estado']?>"><?php echo $row['estado']?></option>
<?php } ?>
</select>
</div>
</div>
</div>
<div class="col-xs-6" >
<div class="row" style: aria-hidden="true">
<div class="col-xs-12" align=left>
Municipio:
<select class="selectpicker form-control" id="regmunicipio" name="regmunicipio" data-live-search="true" required>
<option value="">Seleccionar...</option>
<?php
$query = "SELECT idmunicipio, municipio FROM municipios ORDER BY municipio ASC";
$resultado = $mysqli->query($query);
WHILE($row = $resultado->fetch_assoc()){ ?>
<option value="<?php echo $row['municipio']?>"><?php echo $row['municipio']?></option>
<?php } ?>
</select>
</div>
</div>
</div>
<div class="col-xs-12" >
<div class="row" style: aria-hidden="true">
<div class="col-xs-12" align=left>
<p></p>
Institución Educativa:
<select class="selectpicker form-control" id="regcolegio" name="regcolegio" data-live-search="true" required>
<option value="">Seleccionar...</option>
<?php
$query = "SELECT idcolegio, colegio FROM colegios ORDER BY colegio ASC";
$resultado = $mysqli->query($query);
WHILE($row = $resultado->fetch_assoc()){ ?>
<option value="<?php echo $row['colegio']?>"><?php echo $row['colegio']?></option>
<?php } ?>
</select>
<p></p>
<div class="col-xs-12" align=center>
<b>Comentario de la actividad</b> <br>
</div>
<textarea name="regdes" rows="4" cols="40" class="col-xs-12" required></textarea>
<p></p>
<div class="row" style: aria-hidden="true">
<div class="col-xs-12" align=center>
<p></p>
<b>Evidencia de la actividad *</b> <br>
<input id="file-1" type="file" class="file" multiple=true data-preview-file-type="any" name="imagen">
<!--<button type="button" class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-cloud-upload" aria-hidden="true"></span> Subir archivo
</button>-->
</div>
</div>
<p></p>
<div class="row" style: aria-hidden="true">
<div class="col-xs-12" align=center>
<input type="submit" class="btn btn-success" name="enviar" value="Enviar Registro" />
<!--Desactivado
<input id="btn_listar" type="button" class="btn btn-primary" value="Listar">
-->
</div>
<hr>
<!--Div que muestra ubicacion-->
<div class="col-xs-12" align=center id="ubicacion"></div>
<!--<input id="latitud" name="latitud" type="" value="" />-->
<script type="text/javascript">
if (navigator.geolocation) {
alert("¡Permitenos saber tu ubicación!");
navigator.geolocation.getCurrentPosition(mostrarUbicacion);
} else {alert("¡Error! Este navegador no soporta la Geolocalización.");}
function mostrarUbicacion(position) {
var latitud = position.coords.latitude;
var longitud = position.coords.longitude;
var div = document.getElementById("ubicacion");
div.innerHTML = "Ubicación actual:" + latitud + " " + longitud;}
function refrescarUbicacion() {
navigator.geolocation.watchPosition(mostrarUbicacion);}
</script>
<!--Fin Div que muestra ubicacion -->
</div>
</div>
</div>
</div>
</div>
</form>