No puedes hacerlo directamente con Javascript, debes usar AJAX para enviar el documento y obtener los valores correspondientes. Deja el select vacío y, en el input agrega el evento onblur para ejecutar la petición cuando pierda el foco, aunque también podrías agregar un botón, pero eso ya es cuestión de preferencias:
<input type="text" name="documento" id="documento" class="col-5" autofocus maxlength="10" minlegth="2" required onblur="llenaSelect();">
<select name="rol" id="rol" class="col-5" >
<option > - Selecccione - </option>
</select>
Luego, en Javascript:
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('ruta/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);
});
}
}
Finalmente, debes crear un nuevo script PHP opciones_documento.php
donde obtengas el valor de documento, hagas la consulta y devuelvas las opciones en formato JSON:
<?php
// Primero incluye el script donde haces la conexión a base de datos
include 'ruta/conexion.php';
// Defines 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 id, nombre FROM tblusuario WHERE documento = $documento");
// Recorres resultados
while ($dato = mysqli_fetch_array($seleccionar)) {
// Agregas a variable
$datos[] = $dato;
}
}
// Devuelves los datos en formato JSON
echo json_encode($datos);
Cosas a tener en cuenta:
fetch()
: Ejecuta una petición AJAX
- Primer
then()
: Evalúa la respuesta del servidor, si es correcta, retorna los datos en formato JSON
- Segundo
then()
: Recibe los datos del primer then()
y llena el select
catch()
: Captura cualquier error que pudiese ocurrir en la petición AJAX o retornando el JSON
Referencia de peticiones AJAX con fetch()
: https://developer.mozilla.org/es/docs/Web/API/Fetch_API/Utilizando_Fetch