0

En un formulario hecho con PHP he incluído un Select, el select muestra todos los valores de un vector y POSTea según la selección un ID que está incluído en otro vector, del siguiente modo:

<label for="trabajador">Trabajador*:</label>
        <select name="trabajador" id="trabajador" style="width: 100%" required>
      <?php
        for($j = 0; $j <= count($trabajadores)-1; $j++){
          echo '<option value="'.$id_trabajadores[$j].'">'.$trabajadores[$j].'</option>';
        }
      ?>
    </select>

Esto me muestra una lista de trabajadores y según el que escoja me manda su id correspondiente.

Pongamos que tengo un tercer vector con el año de nacimiento de cada trabajador, de modo que el índice $j introducido en los tres vectores me aporta su nombre, su id y su año de nacimiento.

¿Puedo de algún modo mostrar en vivo en la web el año de nacimiento del empleado seleccionado? Es decir, que mientras estoy completando el formulario, al seleccionar un empleado al lado me muestre su año de nacimiento y al seleccionar otro cambie, eso sin enviar el formulario, sino durante el proceso de rellenar los campos.

Gracias!

1 respuesta 1

0

Hay varias formas de abordar este tema. Una de ellas podría ser la siguiente. Supongamos que tu fichero php es el siguiente

<html lang="es">
<body>

    <label for="trabajador">Trabajador*:</label> (<span id="id_anno"></span>)
        <select name="trabajador" id="trabajador" style="width: 100%" required>
      <?php
        for($j = 0; $j <= count($trabajadores)-1; $j++){
          echo "<option value='$id_trabajadores[$j]' anno='$anno[$j]'>$trabajadores[$j]</option>";
        }
      ?>
    </select>

    <script type="text/javascript" src="script.js"></script>

</body>

</html>

He puesto un span después del label para mostrar el año entre paréntesis.

A cada option le he añadido un atributo anno al que le asigno el año de vector anno

Por último, incluyo una llamada en el html generado para que se cargue un script llamado script.js

Adicionalmente, tendremos que crear ese fichero script.js. Yo lo he hecho con el siguiente código

script.js

document.getElementById('trabajador').addEventListener('change', (event) => {
    var anno = document.getElementById("id_anno");
    anno.innerHTML = event.target.options[event.target.selectedIndex].getAttribute('anno');
});

Como ves, cada vez que cambia el valor del select se llama al Listener, que obtiene la referencia al span con id id_anno y en su interior meto el valor del atributo anno del option seleccionado

NOTAS

  1. He modificado un poquito el echo para que sea más legible

  2. He supuesto que el vector en el que están los años se llama anno

  3. Tampoco he tenido en cuenta que al cargar la página, el primer año no se lee. Lo he hecho para que el código quede más simple y se entienda mejor. Te dejo a ti la tarea de arreglar esto (es fácil)

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.