Me podrian ayudar con dar un valor a 4 inputs dependiendo del valor que tome de un combobox que carga la columna de una tabla donde estan todos mis datos?
Por ejemplo si en mi pagina uso el combobox y selecciono el valor "CAMPO"(como viene en la imagen), que en otros inputs tome su valor correspondiente a la misma fila.
Mi codigo y mi tabla son las siguientes:
Tengo una base de datos con una tabla llamada "sitios" en mysql:
Tengo un formulario donde tengo un select el cual ya tengo echa la consulta a la tabla "sitios" para que muestre solo los datos de la columna "Sitio", lo que busco es que en otros inputs se coloque el valor ("Referencia", "Domicilio", "Telefono", "Ciudad") respectivo al "Sitio" seleccionado en el select.
Aquí esta el código:
<!DOCTYPE html>
<!--
*
* @author Zarate
-->
<html>
<head>
<?php
$user = "root";
$pass = "";
$serv = "localhost";
$dataB = "cdv1";
$mysqli = new mysqli($serv, $user, $pass, $dataB);
mysqli_set_charset($mysqli, "utf8");
$sqlB="select titulo from completar order by titulo";
$resB= mysqli_query($mysqli, $sqlB);
$arreglo_php=array();
if(mysqli_num_rows($resB)==0)
array_push($arreglo_php, "No hay datos");
else {
while($palabras = mysqli_fetch_array($resB)) {
array_push($arreglo_php, $palabras["titulo"]);
}
}
?>
<meta charset="UTF-8">
<title>Solicita tu Cuenta</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.12.1/jquery-ui.js"></script>
<!-- <link rel="stylesheet" href="CSS/solicitud.css">-->
<!-- <script src="JS/soloLetras.js"></script>-->
<script src="js/soloLetrasv2.js"></script>
<script src="js/keyCURP.js"></script>
<script src="js/soloNumeros.js"></script>
<script src="js/letraCapital.js"></script>
<script>
$(function(){
var vec_pal = new Array();
<?php
for($p = 0;$p < count($arreglo_php); $p++){ //usamos count para saber cuantos elementos hay ?>
vec_pal.push('<?php echo $arreglo_php[$p]; ?>');
<?php } ?>
$("#titulo").autocomplete({
source: vec_pal
})
})
</script>
</head>
<body>
<form name="formSoli" action="Confirmacion.php" class="formSolicitud" method="POST">
<button type="button" onclick="location='/CuentasDominio/login/index.php'" class="btnAdmin">
<span class="glyphicon glyphicon-cog"></span>
</button>
<h1 class="formTitulo">Solicita tu Cuenta</h1>
<label for="" class="formLabel">Nombre</label>
<input type="text" name="nom" class="formInput" onselectstart="return false" autocomplete="off" title="Desactivar Bloq Mayus" maxlength="40" onpaste="return false" oncut="return false" oncopy="return false" onkeypress="return letraCapital(event,this);">
<label for="" class="formLabel">Apellido Paterno</label>
<input type="text" name="apeP" class="formInput" onselectstart="return false" autocomplete="off" title="Desactivar Bloq Mayus" maxlength="40" onpaste="return false" oncut="return false" oncopy="return false" onkeypress="return letraCapital(event,this);">
<label for="" class="formLabel">Apellido Materno</label>
<input type="text" name="apeM" class="formInput" onselectstart="return false" autocomplete="off" title="Desactivar Bloq Mayus" maxlength="40" onpaste="return false" oncut="return false" oncopy="return false" onkeypress="return letraCapital(event,this);">
<label for="" class="formLabel">Titulo</label>
<input type="text" id="titulo" name="titulo" class="formInput" autocomplete="off" placeholder="Ejemplo: Ingeniero en ..." title="Campo Opcional" maxlength="80" onpaste="return false" oncut="return false" oncopy="return false" required onKeypress="return soloLetrasv2(event);">
<label for="" class="formLabel">Puesto</label>
<input type="text" name="puesto" class="formInput" autocomplete="off" maxlength="70" onpaste="return false" oncut="return false" oncopy="return false">
<label for="" class="formLabel">Departamento</label>
<input type="text" name="depa" class="formInput" autocomplete="off" maxlength="70" onpaste="return false" oncut="return false" oncopy="return false">
<!-- sitio-->
<label for="" class="formLabel">Sitio</label>
<select name="sitio" id="sitio" class="formSelect" title="Seleccione el sitio correspondiente" onmousedown="if(this.options.length>8){this.size=6;}" onchange='this.size=0;' onblur="this.size=0;">
<?php
$query = $mysqli -> query ("SELECT * FROM Sitios");
while ($valores = mysqli_fetch_array($query)) {
echo '<option>'.$valores[Sitio].'</option>';
//mejor lo quite del option (value="'.$valores[Referencia].'")
}
?>
</select>
<!-- input hidden-->
<input type="hidden" name="ref" id="ref" value="">
<input type="hidden" name="dom" id="dom" value="">
<input type="hidden" name="tel" id="tel" value="">
<input type="hidden" name="ciudad" id="ciudad" value="">
<input type="hidden" name="email" value="">
<label for="" class="formLabel">CURP</label>
<input type="text" name="curp" class="formInput" onselectstart="return false" autocomplete="off" size="18" maxlength="18" onpaste="return false" oncut="return false" oncopy="return false" required onKeypress="return keyCURP(event);" onKeyUp="this.value = this.value.toUpperCase();">
<label for="" class="formLabel">N°Seguro Social</label>
<input type="text" name="numSS" class="formInput" autocomplete="off" maxlength="12" onpaste="return false" oncut="return false" oncopy="return false" required onKeypress="return soloNumeros(event);">
<label for="" class="formLabel">Matricula</label>
<input type="text" name="matri" class="formInput" autocomplete="off" maxlength="9" onpaste="return false" oncut="return false" oncopy="return false" required onKeypress="return soloNumeros(event);">
<input type="submit" src="Confirmacion.php" id="btnSoli" class="btn btn-success btn-lg btn-block" value="Enviar Datos">
</form>
<script>
$(document).ready(function () {
$("#titulo").typeahead({
source: function (query, resultado) {
$.ajax({
url: "buscar.php",
type: "POST",
dataType: "json",
data: {query: query},
success: function (data) {
resultado($.map(data, function (item) {
return item;
}));
}
});
}
});
});
</script>
</body>
</html>