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.