2

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);
        });
    }
}
1
  • Edita nuevamente la pregunta y agrega el código completo que usas para devolver los datos, ni la consulta, ni la línea 79 son útiles por sí mismas para saber lo que está pasando.
    – Triby
    Commented el 10 sept. 2020 a las 17:34

2 respuestas 2

2

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 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);
        });
    }
}

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_assoc($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

0

Tu select debe llamar a una función cada que su valor es cambiado

<select name="rol" id="rol" class="col-5" onchange="getRol();">

Esa función es una función Javascript, te comparto una solución utilizando jQuery.

function getRol(){
    let dropdown = $('#rol');

    dropdown.empty();
    dropdown.append('<option selected="true" disabled>--Selecciona una opcion--</option>');
    dropdown.prop('selectedIndex', 0);
    
    // necesitas crear una ruta con php que te retorne un json con los valores a consultar
    let url =  'ruta/documentos.php?documento='+$('#rol').val();
    $.getJSON(url, function(data) {
        $.each(data, function(key, entry) {
        // aqui tomarias los valores
            dropdown.append($('<option></option>').attr('value', entry.documento).text(entry.documento));
        });
    });
}

Para que funcione debes hacer una ruta que realice la consulta y devuelva los valores que buscas. Sé que me faltan muchas validaciones, espero esto pueda darte una idea. Aplique el mismo procedimiento en Laravel, intente adaptarlo a tu problema.

<?php 
$documento= $_GET["documento"];
// aqui haces tu consulta con el rol
$sth= $conexion->query("SELECT * FROM tblusuario WHERE documento=" . $documento);
$rows = array();
// añades los resultados a tu array
while($r = mysqli_fetch_assoc($sth)) {
    $rows[] = $r;
}
// imprimes los resultados para ser consultados por tu función
print json_encode($rows);
?>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.