Could you help me with giving a value to 4 inputs depending on the value I take from a combobox that loads the column of a table where all my data is?
For example if on my page I use the combobox and I select the value "FIELD" (as it comes in the image), that in other inputs take its corresponding value to the same row.
My code and my table are the following:
I have a database with a table called "sites" in mysql:
I have a form where I have a select which I already have the query to the table "sites" to show only the data in the column "Site", what I'm looking for is that other inputs put the value (" Reference "," Address "," Telephone "," City ") corresponding to the" Site "selected in the selection.
Here is the code:
<!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>