1

Buenas, soy nuevo en la comunidad. Mi problema es el siguiente, necesito guardar las coordenadas(latitud y longitud) en mi base de datos cuando la persona haga un registro en mi Aplicación Web. Antes de realizar el nuevo ingreso el usuario acepta compartir su ubicación y esta inmediatamente se muestra en un div que tengo, lo pueden ver en la siguiente imagen:

Div que muestra latitud y longitud A continuación les muestro el código que tengo dentro del formulario:

<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 + "&nbsp;" + longitud;}   

                    function refrescarUbicacion() { 
                    navigator.geolocation.watchPosition(mostrarUbicacion);} 
                </script>

Necesito saber como puedo pasar el contenido del div a mi base de datos, teniendo en cuenta que ya tengo el PHP que ejecuta los ingresos de otros campos del formulario. Agradecería que me pudieran ayudar.

Codigo php para realizar ingresos en bd Codigo php para realizar ingresos en bd

Muchas gracias

Codigo Formulario

<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 + "&nbsp;" + longitud;}	
                    
                    function refrescarUbicacion() {	
                    navigator.geolocation.watchPosition(mostrarUbicacion);}	
                </script>
                
                <!--Fin Div que muestra ubicacion -->
                
                
                </div>
                
                
                </div>
                </div>
                </div> 
            
            
              
            </div>
            </form>

14
  • El envío lo dados lo haces por Ajax? Commented el 12 oct. 2017 a las 20:39
  • No, actualmente los otros campos los estoy enviando por metodo post. Commented el 12 oct. 2017 a las 20:43
  • Entonces debes guardar esos dos campos en dos input nuevos que sean de tipo hidden pa que no se vean y así los pueda recibir tu archivo php Commented el 12 oct. 2017 a las 20:44
  • Ya lo he intentado pero no me sale, quizas lo este haciendo mal. Me podrias ayudar? Commented el 12 oct. 2017 a las 20:47
  • Muestra el código del formulario, el php que recibe los datos Commented el 12 oct. 2017 a las 20:48

1 respuesta 1

1

Podrías hacer lo siguiente:

  1. Agrega dos campos hidden en tu formulario para guardar la longitud y la latitud que se obtienen con la ubicación

    <input type="hidden" class="form-control" id="latitud" name="latitud" required>
    <input type="hidden" class="form-control" id="longitud" name="longitud" required>
    
  2. Cuando se ejecute la función mostrarUbicacion() asignas los valores correspondientes a los 2 campos recién creados

    document.getElementById("latitud").value = latitud;
    document.getElementById("longitud").value = longitud;
    
  3. Con esto cuando des click al botón submit esos dos campos se enviarán junto con el resto de campos de tu formulario y los recibes en tu php con el valor de su atributo name respectivo

    $latitud = $_POST['latitud'];
    $longitud= $_POST['longitud'];
    

Y posteriormente agregas al INSERT y listo, debería de funcionar.

2
  • Buenos dias lo intente pero no me gurda la ubicacion, por favor me puedes dar mas detalles de como seria el codigo completo para guardar en la bd las coor Commented el 25 abr. 2019 a las 14:15
  • @SergioMunoz acabo de notar que tenía un error en el código, wow no se como nadie se percató antes nisiquiera yo, para asignar el value a los elementos se usa un = y no los (), prueba cambiando esto a ver si te da. Commented el 25 abr. 2019 a las 15:44

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.