Tengo un formulario que tiene dos campos:
<input type="text" name="documento" id="documento" class="col-5" autofocus maxlength="10" minlegth="2" required >
<select name="rol" id="rol" class="col-5" >
<option > - Selecccione - </option>
<?php
while ($datos = mysqli_fetch_array($consultar_rol)) { //array recorre datos
?>
<option value="<?php echo $datos['id'] ?>"> <?php echo $datos['nombre'] ?> </option>
<?php }?>
</select>
la idea es que si digito un documento de identidad el select se debe llenar automaticamente con el rol perteneciente a ese documento.
Esto es lo que alcanzo a asimilar de como debe funcionar, pero no se exactamente que debo hacer.
<?php
if ($seleccionar) {?>
<script type="text/javascript">
</script>
<?php
} else {echo "el usuario no existe";}
?>
La variable seleccionar es la consulta a la base de datos
// trae todos los datos del user
$seleccionar = $conexion->query("SELECT * FROM tblusuario WHERE documento=" . $documento);
--------MODIFICACIÓN-----
Intenté aplicar las soluciones que me dieron, pero ninguna me ha funcionado.. analicé el código y noté que cometí un error que no mencioné antes, la consulta a la base de datos es diferente a la que mostré porque necesito datos de dos tablas (una que es la tabla rol y otra la tabla usuario). La anterior consulta solo era a una tabla. Así modifique el archivo opciones_documento.php
include 'includes/conexion.php';
// Definir arreglo para devolver datos
$datos = [];
// Obtienes la variable desde $_POST, con asignación ternaria y convirtiendo a entero
$documento = (isset($_POST['documento'])) ? (int) $_POST['documento'] : 0;
// Ejecutas consulta solo si $documento no está vacío
if ($documento != '') {
// Solo necesitas ID y nombre, no todos los campos
$seleccionar = $conexion->query("SELECT tu.id , tu.nombre from tblusuario as u inner join tbltipousuario as tu on u.tipo_usuario = tu.id WHERE documento = $documento");
// Recorres resultados
while ($dato = mysqli_fetch_array($seleccionar)) {
// Agregas a variable
$datos[] = $dato;
}
}
Asi esta mi formulario
<input type="text" name="documento" id="documento" onblur="llenaSelect();" class="col-5"
autofocus maxlength="10" minlegth="2" required >
<select name="rol" id="rol" class="col-5" >
<option > - Selecccione - </option>
</select>
Asi esta mi script
function llenaSelect() {
// event.target es el elemento que disparó el evento
// Se usa .trim() para eliminar espacios al inicio y al final
let documento = event.target.value.trim();
// Solo si el valor no está vacío ni es un valor "falsey" (cero, null, etc.)
if(documento) {
// Realizas la petición AJAX usando método POST
// fetch ejecuta la petición ajax
fetch('opciones_documento.php', {
method: 'POST',
body: { documento: documento } // Agregar variable
}).then(function(respuesta) {
// Verificar que se recibió una respuesta adecuada
if(respuesta.ok) {
// Pasar JSON al .then() final
return respuesta.json();
}
// Mostrar respuesta para saber qué salió mal
console.log(respuesta);
}).then(function(datos) {
// Aquí se recibió un JSON correcto
// Obtener select para actualizar
let sel = document.querySelector('#rol');
// Primero se eliminan los elementos del select, excepto el primero
for(let i = sel.options.length - 1; i >= 1; i--) {
sel.options.remove();
}
// Ahora se recorren los datos recibidos para agregarlos
datos.forEach(dato => {
// Crear elemento nuevo
let opt = document.createElement('option');
// Asignar valor y nombre
opt.value = dato.id;
opt.text = dato.nombre;
// Agregar a opciones
sel.add(opt);
});
}).catch(function(e) {
// Hubo error, mostrarlo en consola
console.log(e);
});
}
}