Skip to main content
Corrección en comentario y cambio de mysqli_fetch_array por mysqli_fetch_assoc
Origen Enlace
Triby
  • 25.2k
  • 3
  • 18
  • 36
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" (cadena vacía, 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);
        });
    }
}
<?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_arraymysqli_fetch_assoc($seleccionar)) {
        // Agregas a variable
        $datos[] = $dato;
    }
}
// Devuelves los datos en formato JSON
echo json_encode($datos);
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);
        });
    }
}
<?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);
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 es "falsey" (cadena vacía, 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);
        });
    }
}
<?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_assoc($seleccionar)) {
        // Agregas a variable
        $datos[] = $dato;
    }
}
// Devuelves los datos en formato JSON
echo json_encode($datos);
Origen Enlace
Triby
  • 25.2k
  • 3
  • 18
  • 36

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