2

He estado investigando cómo llenar un <input> con información de una base de datos al cambiar los valores de un <select>.

Entiendo que se debe hacer por ajax, pero he tenido problemas a la hora de devolver los datos al <input>. ¿Podrían iluminarme?

Adjunto encontrarán las partes de código que he estado utilizando para poder trabajar. Si tienen observaciones son bienvenidas.

getViajes.php

<?php
include '../conexion/conexion.php';

//el dato que enviamos a traves de ajax

$valor= $_POST['valor'];
 echo $valor;
//esta variable es para retornar los datos
$jsondata = array();

//la consulta que necesites para trer el codigo y el nombre del cliente

//$query="SELECT clave, precio, km FROM ttj.centro_viajes  where clave=$valor";

//$r= mysql_query($query);
//$resultados= mysqli_fetch_array($r);

$sel_cat = $conn->prepare("SELECT precio, km FROM ttj.centro_viajes  where clave='$valor'");
$sel_cat->execute();
$resultados=  mysqli_fetch_array($sel_cat);

$precio = $resultados['precio'];
$km = $resultados['km'];

//agregamos nuestros datos al array para retornarlos
$jsondata['precio'] = $precio;
$jsondata['km'] = $km;

//este header es para el retorno correcto de datos con json
 header('Content-type: application/json; charset=utf-8');
 echo json_encode($jsondata);


?>

La functión jQuery

<script  type="text/javascript" >
    function mifuncion(valor){
        $.ajax({
            // la URL para la petición
            url : 'getViajes.php',

            // la información a enviar en este caso el valor de lo que seleccionaste en el select
            data : { valor : valor },

            // especifica si será una petición POST o GET
            type : 'POST',

            // el tipo de información que se espera de respuesta
            dataType : 'json',

            // código a ejecutar si la petición es satisfactoria;
            success : function(json) {

      alert('Precio: '+json.precio);

                //aqui recibimos el "echo" del php(ajax.php)
                //y ahora solo colocas el valor en los campos
                $("#cantidad").val(json.precio);
                $("#km").val(json.km);
            },

            // código a ejecutar si la petición falla;
            error : function(xhr, status,json) {
                alert('Disculpe, ocurrio un problema '+valor+' error: '+json.km);
            }
});
    }

</script>

La estructura de la página

<select class="btn-outline-dark form-control" name="nombre" id="nombre" required onchange='mifuncion(this.value)'>
                       <?php $sel_cat = $conn->prepare("SELECT * FROM ttj.centro_viajes  ORDER BY id DESC");
                        $sel_cat->execute();


                        $row=$sel_cat->rowCount();
                        if($row==0){
                          ?>
                          <option value="No" name="nombre" selected="true" >No hay Tipos de Viajes Ingresados</option>
                        <?php  }else{
                            while ($f_cat = $sel_cat->fetch()) { 
                                    ?> 
                            <option  value="<?php echo $f_cat['clave'] ?>" ><?php echo $f_cat['nombre'] ?></a>
                            <?php } 
                            }
                           $sel_moda = null;
                            ?>                
                          </select>           
                          </div>


                                  <input type="text" id="destino" name="destino" class="form-control form-contro-lg" value="">
                      <div class="form-group">
                            <label for="valor">Cantidad</label>
                             <input type="number" id="cantidad" name="cantidad" class="form-control form-contro-lg">
                        </div>
                        <div class="form-group">
                            <label for="valor">Km</label>
                             <input type="number" id="km" name="km" class="form-control form-contro-lg">
                        </div>
                        <div class="form-group">
                            <label for="valor">fecha</label>
                             <input type="date" id="fecha" name="fecha" class="form-control form-contro-lg datepicker"  >
                        </div>

La verdad no sé en qué parte estoy fallando. He estado haciendo cambios en el query y otras cosas y siempre me arroja la alerta de error el script.

2
  • Hola, bienvenido a la comunidad. Te invito a hacer el recorrido y leer ¿cómo preguntar? para que tu pregunta sea bien recibida por parte de la comunidad. Dicho esto, ¿qué te aparece en el inspector de red del navegador? ¿Qué te devuelve la llamada al PHP? Y en cuanto a la consola de javascript, ¿qué mensaje te aparece exactamente? el 8 jun. 2020 a las 5:56
  • ¿Pudiste probar lo que te propuse en mi respuesta? el 9 jun. 2020 a las 11:25

2 respuestas 2

0

Debe hacer un parseo del Json que recibe, los Json normalmente llegan como string, mas no como objeto, por lo tanto debe agregar antes de la linea alert, json = JSON.parse(json);

2
  • Quizá no conozcas jQuery, pero tanto si las cabeceras de la respuesta devuelven que es un JSON, como si se indica explícitamente dataType : 'json', jQuery hará una conversión automática sin necesidad de usar JSON.parse(). el 8 jun. 2020 a las 5:55
  • David Gracias por la respuesta estuve intentando con tu comentario e igual no funciona. el 8 jun. 2020 a las 6:13
0

Explicación del problema:

Estás sufriendo corrupción del JSON generado por tu script PHP. Está siendo provocado por una salida de depuración del contenido de la variable $valor en la siguiente línea:

$valor= $_POST['valor'];
echo $valor; // <-- CULPABLE

Al agregar una cadena de caracteres a un JSON con formato válido es muy probable que el JSON resultante no tenga un formato válido.

Ejemplo:

Si el valor de $_POST['valor'] es 30, el valor de precio es 20.3 y km vale 23, esto es lo que devolverá la ejecución del script PHP:

30{precio:20.3,km:23}

Como puedes observar, el valor 30 impreso desde el echo se ha agregado al comienzo del JSON corrompiendo el contenido y provocando que ese resultado no sea un formato válido de JSON.


Puedes ver tu código funcionando correctamente en este repositorio github:

Y también puedes verlo funcionando en este gitpod:

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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