Remplir des champs input via une liste deroulante

Bonjour, je voudrais avoir votre. J'ai vu des problèmes similaires ont été résolus. je me suis servie de quelques solutions mais je n'ai pas trouvé de solution. Je veux que dès qu'on sélectionne un numéro matricule sur la liste déroulante, le nom et le prénom s'affichent. Voici ce que j'ai essayé mais rien ne s'affiche. Je suis débutante en javascript.

<?php
if(!empty($_SESSION['id']) || isset($_SESSION['id'])){
        session_start();
        header('location:ajout_enseignant.php');
    }

include('includes/header.php');
include('includes/topbar.php');
include('includes/sidebar.php');
include('config/cn.php');


//affichage du message d'erreur
error_reporting(E_ALL);
ini_set('display_errors', TRUE);
ini_set('display_startup_errors', TRUE);
//fin d'affichage
    
    


$re=$cn->query('SELECT * FROM employe');
//$tabRe=$re->fetch();

?>

<!DOCTYPE html>
<html>
<head>
    <title></title>
     <meta charset="utf-8"> 
    <meta name="viewport" 
     content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> 

</head>
<body>

<div class="col-md-2">
    <label for="employe">Numero matricule</label>
    <select class="form-control" name="num_mat" id="num_mat" onchange="change()">
<?php
include('config/cn.php');
$re=$cn->query('select num_mat from employe order by num_mat asc');
?>
<?php while ($sel=$re->fetch()) {?>
    <option value="<?php echo $sel['num_mat'];?>">
        <?php echo $sel['num_mat']; ?>
    </option>
<?php } ?>
</select>
</div>&emsp;&emsp;&emsp;&emsp;
<div class="col-md-2">
    <label for="nom_empl">Nom</label>

    <input type="text" name="nom_empl" class="form-control" placeholder="Entrer votre Nom" > 
</div>&emsp;&emsp;&emsp;&emsp;<!-- &emsp; (« em space ») va nous permettre de créer une espace quadruple ;-->


<div class="col-md-2">
    <label for="prenom_empl">Prenom</label>
    <input type="text" name="prenom_empl" class="form-control" placeholder="Entrer votre Nom">
</div>&emsp;&emsp;&emsp;&emsp;

<script type='text/javascript'>
      
            function getXhr(){
                            var xhr = null;
                if(window.XMLHttpRequest){ // Firefox et autres
                   xhr = new XMLHttpRequest();
                    
                }
                else if(window.ActiveXObject){ // Internet Explorer
                   try {
                            xhr = new ActiveXObject("Msxml2.XMLHTTP");
                        } catch (e) {
                            xhr = new ActiveXObject("Microsoft.XMLHTTP");
                        }
                }
                else { // XMLHttpRequest non support  par le navigateur
                   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
                   xhr = false;
                }
                            return xhr;
            }
             
             
 
            /**
            * M thode qui sera appel e sur le click du bouton
            */
            function nom_empl(){
                 
                var xhr = getXhr();
 
                // On d fini ce qu'on va faire quand on aura la r ponse
                xhr.onreadystatechange = function(){
                     
                    // On ne fait quelque chose que si on a tout re u et que le serveur est ok
                    if(xhr.readyState == 4 && xhr.status == 200){
                        di = document.getElementById('nom_empl');
                        di.innerHTML = xhr.responseText;
                    }
                }
 
                // Ici on va voir comment faire du post
                xhr.open("POST","ajax/ajaxNom_empl.php",true);
                // ne pas oublier  a pour le post
                xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
                // ne pas oublier de poster les arguments
                //getElementById c'est ce qur j'ai ecrit dans select name
                num_mat = document.getElementById('num_mat').options[document.getElementById('num_mat').selectedIndex].value;
                xhr.send("num_mat="+num_mat);  
            }
             
             
            function Prenom_empl(){
                 
                var xhr = getXhr();
 
                // On d fini ce qu'on va faire quand on aura la r ponse
                xhr.onreadystatechange = function(){
                     
                    // On ne fait quelque chose que si on a tout re u et que le serveur est ok
                    if(xhr.readyState == 4 && xhr.status == 200){
                        di = document.getElementById('prenom_empl');
                        di.innerHTML = xhr.responseText;
                    }
                }
 
                // Ici on va voir comment faire du post
                xhr.open("POST","ajax/ajaxPrenome_empl.php",true);
                // ne pas oublier  a pour le post
                xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
                // ne pas oublier de poster les arguments
                num_mat = document.getElementById('num_mat').options[document.getElementById('num_mat').selectedIndex].value;
                xhr.send("num_mat="+num_mat);      
            }
              
 
            function ajax() {
                nom_empl();
                prenom_empl();
               
                }
             
 
</script>
</body>
</html>

Si quelqu'un pourrais m'aider. Merci d'avance.

AichatouLaminouIssa

29 mai 2024 à 0:00:40

Domi65

29 mai 2024 à 11:19:32

Bonjour.

Pour qu'on comprenne ce qu'il se passe, ce n'est pas du code PHP qu'il faut nous fournir, mais du HTML (ce que produit ce code, affichable dans la page par pression sur la combinaison de touches CTRL +U.

Ensuite, on voit que les fonctions nom_empl et prenom_emp sont appelées par la fonction ajax. Mais cette fonction n'est appelée nulle part dans ce que tu nous fournis.

Le code Ajax est antédiluvien. Il y a a belle lurette que les activeX ne sont plus utilisés. Du coup, comme tu ne maitrises pas les XHR, je te conseille de t'intéresser plutôt à fetch, qui, même pour celui qui ne comprend pas trop ce qui se passe est d'une utilisation simple.

31 mai 2024 à 13:56:00 - Message modéré pour le motif suivant : Merci d’utiliser le bouton code pour insérer un code sur le forum

Remplir des champs input via une liste deroulante

Remplir des champs input via une liste deroulante

Supprimer

Modérer

Signaler le message aux modérateurs