Manipuler les listes "select" de mon formulaire

Bonjour,
Pour améliorer mon programme, je veux changer la liste d'un "select" en fonction du choix fait dans un "select" précédent.
J'ai essayé en allumant ou éteignant les "select" avec les options display du css, il y' avait des problèmes, alors maintenant j' ai essayé avec l'attribut "list" mais ça ne doit pas faire partie des attributs de "select".
Ci-dessous ma dernière tentative, mais ça envoie une valeur nulle.
Quelle est la façon de faire?

Ligne 64 dans le JS et ligne 24 dans le PHP.

Merci de votre aide.

formulaire PHP:

<!--  **********************************************************  -->
<!--  CREER: FORMULAIRE CREER UNE NOUVELLE REFERENCE              -->
<!--  **********************************************************  -->

<!--  ******   CREATION FORMULAIRE   ******  -->    
    <form id='idFormCreer' action="creer.php" method="post">
          <div class = legende >
              <p id = 'legende1'>Renseigner les informations.</p>
              <p id = 'legende2'>Les informations ombrées sont obligatoires.</p>
          </div>        
        <div class='classFCreer' id='idDIVFcreer'>
          <div class='classFCreer_P1'>    
<!--  ******   CHOIX  FAMILLE   ******  -->     
            <div class='classChoixFamille'>
                <label id='idLblCFamille' For="idSlctCFamille">FAMILLE OUTIL</label>
                <select id="idSlctCFamille" name = "familleOutil" autofocus required>  
                        <option value="">--CHOISIR UNE OPTION--</option>
                        <option value="FRAISE">FRAISE</option>
                        <option value="FORET">FORET</option>
                        <option value="TARAUD">TARAUD</option>
                </select>
            </div>
<!--  ******   CHOIX SOUS FAMILLE   ******  -->
            <div id= 'idChoix_S_Famille_' class='classChoix_S_Famille'>
                <label class='classLblC_S_Famille' For="idSlctC_S_Famille_">SOUS FAMILLE</label>
                <select id="idSlctC_S_Famille_" class="classSlct_S_Famille" 
                name="SousFamille"> 
                        <option value="">--CHOISIR UNE FAMILLE--</option>
                </select>                
            </div> 
            <div id= 'idChoix_S_FamilleFR' class='classChoix_S_Famille'>
                <label class='classLblC_S_Famille' For="idSlctC_S_FamilleFR">SOUS FAMILLE</label>
                <select id="idSlctC_S_FamilleFR" class="classSlct_S_Famille" 
                name="SousFamille" > 
                        <option value="">--CHOISIR UNE OPTION--</option>
                        <option value="2_TAILLES">2 TAILLES</option>
                        <option value="TORIQUE">TORIQUE</option>
                        <option value="A_FILETER">A FILETER</option>
                        <option value="3_TAILLES">3 TAILLES</option>
                        <option value="A_CHANFREINER">A CHANFREINER</option>
                </select>                
            </div>
            <div id= 'idChoix_S_FamilleFO' class='classChoix_S_Famille'>
                <label class='classLblC_S_Famille' For="idSlctC_S_FamilleFO">SOUS FAMILLE</label>
                <select id="idSlctC_S_FamilleFO" class="classSlct_S_Famille" 
                name="SousFamille" > 
                        <option value="">--CHOISIR UNE OPTION--</option>
                        <option value="STANDARD">STANDARD</option>
                        <option value="ETAGE">ETAGE</option>
                        <option value="A_POINTER">A_POINTER</option>
                        <option value="SPECIAL">SPECIAL</option>
                </select>                
            </div>
            <div id= 'idChoix_S_FamilleTA' class='classChoix_S_Famille'>
                <label class='classLblC_S_Famille' For="idSlctC_S_FamilleTA">SOUS FAMILLE</label>
                <select id="idSlctC_S_FamilleTA" class="classSlct_S_Famille" 
                name="SousFamille" > 
                        <option value="">--CHOISIR UNE OPTION--</option>
                        <option value="COUPANT">COUPANT</option>
                        <option value="DEFORMATION">DEFORMATION</option>
                </select>                
            </div>
            
<!--  ******   CHOIX MATIERE   ******  -->             
            <div class='classChoixMatiere'>
                <label id='idLblCMatiere' For="idSlctCMatiere">MATIERE OUTIL</label>
                <select id="idSlctCMatiere" name = "Matiere" required >                  
                        <option value="">--CHOISIR UNE OPTION--</option>
                        <option value="CARBURE">CARBURE</option>
                        <option value="ACIER_RAPIDE">ACIER RAPIDE</option>
                </select>
            </div>
 <!--  ******   NOMBRE DE DENTS OUTIL    ******  --> 
            <div class="classNbreZ">
                <label id='idLblNbreZ' For='idInputNbreZ'>NOMBRE DE DENTS OUTIL</label>
                <input id = "idInputNbreZ"  name = "NbreZ" required 
                 type = "number"  min = "0" max = "4" placeholder = 'NOMBRE DE DENTS'>      
            </div> 
 <!--  ******   DIAMETRE 1   ******  --> 
            <div class="classDia1">
                <label id='idLblCDia1' For='idInputDia1'>DIAMETRE 1</label>
                <input id = "idInputDia1"  name = "Dia1" type = "text" required
                  min = "0" max = "500" step = "0.01" placeholder = ' 1 ER DIAMETRE'>       
            </div>             
 <!--  ******   LONGUEUR 1   ******  --> 
            <div class="classLong1">
                <label id='idLblCLong1' For='idInputLong1'>LONGUEUR 1</label>
                <input id = "idInputLong1"  name = "Long1" type = "number" required 
                  min = "0" max = "200" step = "0.1" placeholder = 'LONGUEUR 1er DIAMETRE'>      
            </div>
 <!--  ******   DIAMETRE 2   ******  --> 
            <div class="classCDia2">
                <label id='idLblCDia2' For='idInputDia2'>DIAMETRE 2</label>
                <input id = "idInputCDia2" name = "Dia2" min = "0" max = "500" 
                  type = "text" pattern="[0-9]{1,3}" step = "0.01" placeholder = ' 2 EME DIAMETRE'>       
            </div>             
 <!--  ******   DIAMETRE 3   ******  --> 
            <div class="classDia3">
                <label id='idLblCDia3' For='idInputDia3'>DIAMETRE 3</label>
                <input id = "idInputDia3" name = "Dia3" type = "text" min = "0" max = "500"
                   step = "0.01" pattern="[0-9]{1,3}" placeholder = ' 3 EME DIAMETRE'>       
            </div> 
 <!--  ******  LONGUEUR UTILE   ******  --> 
            <div class="classLongUtile">
                <label id='idLblCLongUtile' For='idInputLongUtile'>LONGUEUR UTILE</label>
                <input id = "idInputLongUtile"  name = "LongUtile" type = "number" required
                  min = "0" max = "200" step = "1" placeholder = 'LONGUEUR UTILE'>       
            </div>             
 <!--  ******  LONGUEUR TOTALE   ******  --> 
            <div class="classLongTotale">
                <label id='idLblCLongTotale' For='idInputLongTotale'>LONGUEUR TOTALE</label>
                <input id = "idInputLongTotale" name = "LongTotale" type = "number" required
                  min = "0" max = "250" step = "1" placeholder = 'LONGUEUR TOTALE'>        
            </div>  
 <!--  ******  CARACTERISTIQUE 1   ******  --> 
            <div class="classCaract1">
                <label id='idLblCCaract1' For='idInputCaract1'>CARASTERISTIQUE 1</label>
                <input id = "idInputCaract1" name = "Caract1" pattern="[a-zA-Z0-9-\s\.]{0,20}"
                list = "idDataListCaract1" placeholder = 'CARACTERISTIQUE 1'>        
            </div>  
          </div>
          <div class='classFCreer_P2'>
 <!--  ******  FOURNISSEUR   ******  --> 
            <div class="classFournisseur">
                <label id='idLblCFournisseur' For='idInputFournisseur'>FOURNISSEUR</label>
                <input id = "idInputFournisseur" name = "Fournisseur" required  pattern="[a-zA-Z0-9-\s]{0,12}"
                list = "idDataListFournisseur" placeholder = 'FOURNISSEUR'>          
            </div>
 <!--  ****** REFERENCE FOURNISSEUR   ******  --> 
                <div class="classRef_Fournisseur">
                    <label id='idLblCRef_Fournisseur' For='idInputRef_Fournisseur'>REFERENCE FOURNISSEUR</label>
                    <input id = "idInputRef_Fournisseur"  name = "Ref_Fournisseur" required
                    pattern="[a-zA-Z0-9-\s\.]{0,15}" placeholder = 'REFERENCE FOURNISSEUR'>          
                </div>            
 <!--  ****** PRIX ET QUANTITE MINI   ******  --> 
                <div class="classPrix">
                    <label id='idLblCPrix_QteMini' For='idInputPrix'>PRIX & QUANTITE MINI</label>
                    <input id = "idInputPrix"  name = "Prix" type = "number" required
                     min = "0" placeholder = 'Prix HT'>                                                       
                    <input id = "idInputQteMini" name = "QteMini" type = "number" min = "0" 
                    step = "1" required>                                                                       
                </div>                     
          </div>
          <div class='classFCreer_P3'>              
 <!--  ****** CAS D'EMPLOI 1  ******  --> 
            <div class="classCasEmploi">
                <label id='idLblCCasEmploi1' For='idInputCasEmploi1'>CAS D'EMPLOI 1</label>
                <input id = "idInputCasEmploi1" name = "CasEmploi1" pattern="[A-Z0-9\s]{0,20}"
                 placeholder = 'MAJ/CHIFFRE/espace'> 
             </div>                   
 <!--  ****** CAS D'EMPLOI 2  ******  --> 
            <div class="classCasEmploi">
                <label id='idLblCCasEmploi2' For='idInputCasEmploi2'>CAS D'EMPLOI 2</label>
                <input id = "idInputCasEmploi2" name = "CasEmploi2" pattern="[A-Z0-9\s]{0,20}"
                 placeholder = 'CAS EMPLOI 2'> 
              </div>  
 <!--  ****** CAS D'EMPLOI 3  ******  --> 
            <div class="classCasEmploi">
                <label id='idLblCCasEmploi3' For='idInputCasEmploi3'>CAS D'EMPLOI 3</label>
                <input id = "idInputCasEmploi3" name = "CasEmploi3" pattern="[A-Z0-9\s]{0,20}"
                 placeholder = 'CAS EMPLOI 3'> 
            </div> 
 <!--  ****** CAS D'EMPLOI 4  ******  --> 
            <div class="classCasEmploi">
                <label id='idLblCCasEmploi4' For='idInputCasEmploi4'>CAS D'EMPLOI 4</label>
                <input id = "idInputCasEmploi4" name = "CasEmploi4" pattern="[A-Z0-9\s]{0,20}"
                 placeholder = 'CAS EMPLOI 4'> 
            </div> 
 <!--  ****** CAS D'EMPLOI 5  ******  --> 
            <div class="classCasEmploi">
                <label id='idLblCCasEmploi5' For='idInputCasEmploi5'>CAS D'EMPLOI 5</label>
                <input id = "idInputCasEmploi5" name = "CasEmploi5" pattern="[A-Z0-9\s]{0,20}"
                 placeholder = 'CAS EMPLOI 5'> 
            </div>
 <!--  ****** CAS D'EMPLOI 6  ******  --> 
            <div class="classCasEmploi">
                <label id='idLblCCasEmploi6' For='idInputCasEmploi6'>CAS D'EMPLOI 6</label>
                <input id = "idInputCasEmploi6" name = "CasEmploi6" pattern="[A-Z0-9\s]{0,20}"
                 placeholder = 'CAS EMPLOI 6'> 
            </div>             
          </div> 
        
<!--  ****** BOUTONS CREATION  ******  -->             
            <div class = "boutonsCreation"> 
<!--  ****** BOUTON VALIDER CREATION  ******  --> 
                <input id = "idboutonValiderCreation" class = 'classboutonValiderCreation' type = "submit" value = "VALIDER"> 
<!--  ****** BOUTON RESET DE CREER  ******  --> 
                <input id = "idboutonResetCreation" class = 'classboutonResetCreation' type = "reset" value = "RESET"> 
 <!-- ****** BOUTON FERMER CREATION  ******  --> 
                <input id = "idboutonFermerCreation" class = 'classboutonFermerCreation' type = "reset" value = "FERMER">
            </div>                                                                                            
        </div>
    </form>
    

    <datalist id="idDataListCaract1">
        <option value="HARD CARBON">
        <option value="DM2380">
        <option value="AFFUTAGE ANTI BAVURE">
        <option value="AUTRE">
        <option value="DIVERS">
    </datalist>
    <datalist id="idDataListFournisseur">
        <option value="CHASSET">
        <option value="GUILMAN-SECO">
        <option value="GUILMAN-LMT">
        <option value="MECACOUPE">
        <option value="DIVERS">
    </datalist>

code JS:

// TRI DU TABLEAU PAR CLICK SUR UNE ENTETE DE COLONNE
// Sources: https://www.pierre-giraud.com/trier-tableau-javascript/
// Many thanks to Pierre.

// FONCTION DE TRIAGE DES LIGNES
const compare = (ids, asc) => (row1, row2) => {
    const tdValue = (row, ids) => row.children[ids].textContent;
    const tri = (v1, v2) => v1 !== '' && v2 !== '' && !isNaN(v1) && !isNaN(v2) ? v1 - v2 : v1.toString().localeCompare(v2);
    return tri(tdValue(asc ? row1 : row2, ids), tdValue(asc ? row2 : row1, ids));
};

// RECUPERATION DES VALEURS DU TABLEAU D'OUTILS
const table_outils_originale = document.querySelector('tbody');
const entetes_colonnes_tableau = document.querySelectorAll('th');
const lignes_tableau = table_outils_originale.querySelectorAll('tr');


// ECOUTE DU CLICK SUR ENTETE DE COLONNE POUR TRI DU TABLEAU
// ci-dessous, th est une variable qui aurait pu être nommée differement.

entetes_colonnes_tableau.forEach(th => th.addEventListener('click', () => { 
     let classe = Array.from(lignes_tableau).sort(compare(Array.from(entetes_colonnes_tableau).indexOf(th), this.asc = !this.asc));
      classe.forEach(tr => table_outils_originale.appendChild(tr));
}));

//ECOUTE DU CLICK SUR BOUTON CREER
let creation = document.getElementById('creer') ;
creation.addEventListener('click',fCreation) ;

//ECOUTE DU CLICK SUR BOUTON RECHERCHE
let recherche = document.getElementById('chercher') ;
recherche.addEventListener('click',fRecherche) ;

//ECOUTE DU CLICK SUR BOUTON MODIFIER
let modification = document.getElementById('modifier') ;
modification.addEventListener('click',fModification) ;

//ECOUTE DU CLICK SUR BOUTON RESET
let raz = document.getElementById('reset') ;
raz.addEventListener('click',fReset) ;

//---------*************----------************-------------
//---------*************----------************-------------
//                     BOUTON CREER                      //
//---------*************----------************-------------
//---------*************----------************-------------

function fCreation(){
  console.log("On entre dans la fonction fCreation");
    let page = document.body ;
    let formCreation = document.getElementById('idFormCreer') ;
    let formCreationDiv = document.getElementById('idDIVFCreer') ;

    formCreation.style.display = 'block' ;

// NEUTRALISER LES 4 BOUTONS : CREER, RECHERCHER, MODIFIER, RESET.
    creation.removeEventListener('click',fCreation) ;
    recherche.removeEventListener('click',fRecherche) ;
    modification.removeEventListener('click',fModification) ;
    raz.removeEventListener('click',fReset) ;
}

// CONTROLE DU CHOIX SOUS FAMILLE
document.getElementById('idChoix_S_Famille_').style.display="block";
document.getElementById('idSlctC_S_Famille_').setAttribute("required","");
let selectFamille =  document.getElementById('idSlctCFamille');

selectFamille.onchange = function(){
let w = document.getElementById('idSlctCFamille').value;
let vide = document.getElementById('idChoix_S_Famille_');
let FR = document.getElementById('idChoix_S_FamilleFR');
let FO = document.getElementById('idChoix_S_FamilleFO');
let TA = document.getElementById('idChoix_S_FamilleTA');
let vide1 = document.getElementById('idSlctC_S_Famille_');
let FR1 = document.getElementById('idSlctC_S_FamilleFR');
let FO1 = document.getElementById('idSlctC_S_FamilleFO');
let TA1 = document.getElementById('idSlctC_S_FamilleTA');  
    
        switch(w){
            case "FRAISE" : {
                 vide.style.display = 'none';
                 FR.style.display = 'block';
                 FO.style.display = 'none';
                 TA.style.display = 'none';
                 vide1.removeAttribute("required");
                 FR1.setAttribute("required","");
                 FO1.removeAttribute("required");
                 TA1.removeAttribute("required");
            };
                break;
            case "FORET" : {
                 vide.style.display = 'none';
                 FR.style.display = 'none';
                 FO.style.display = 'block';
                 TA.style.display = 'none';
                 vide1.removeAttribute("required");
                 FR1.removeAttribute("required");
                 FO1.setAttribute("required","");
                 TA1.removeAttribute("required");                 
            };
                break;
            case "TARAUD" :  {
                 vide.style.display = 'none';
                 FR.style.display = 'none';
                 FO.style.display = 'none';
                 TA.style.display = 'block';
                 vide1.removeAttribute("required");
                 FR1.removeAttribute("required");
                 FO1.removeAttribute("required");
                 TA1.setAttribute("required","");
            };                     
                break;
            default : {
                 vide.style.display = 'block';
                 FR.style.display = 'none';
                 FO.style.display = 'none';
                 TA.style.display = 'none';
                 vide1.setAttribute("required","");
                 FR1.removeAttribute("required");
                 FO1.removeAttribute("required");
                 TA1.removeAttribute("required");
            };
        };
}

//  BOUTON FERMER CREATION
let boutonFermerCreation = document.getElementById('idboutonFermerCreation');
boutonFermerCreation.addEventListener('click',fermerCreation ) ;

//  FONCTION DU BOUTON FERMER DU FORMULAIRE CREER 
function fermerCreation (){
  console.log("On ferme la fenetre Creation");
    let formCreation2 = document.getElementById('idFormCreer') ;
    creation.addEventListener('click',fCreation) ;
    recherche.addEventListener('click',fRecherche) ;
    modification.addEventListener('click',fModification) ;
    raz.addEventListener('click',fReset) ;

    formCreation2.style.display = 'none'
}    

//---------*************----------************-------------
//                  BOUTON RECHERCHER                    //
//---------*************----------************-------------

function fRecherche(){

  console.log("On entre dans la fonction fRecherche");
    let page = document.body ;
    let formRecherche = document.getElementById('idFormRechercher') ;
    let formRechercheDiv = document.getElementById('idDIVFrechercher') ;

    formRecherche.style.display = 'block' ;

    // NEUTRALISER LES 4 BOUTONS : CREER, RECHERCHER, MODIFIER, RESET.
    creation.removeEventListener('click',fCreation) ;
    recherche.removeEventListener('click',fRecherche) ;
    modification.removeEventListener('click',fModification) ;
    raz.removeEventListener('click',fReset) ;

} // SORTIE DE LA FONCTION fRecherche

//BOUTON FERMER RECHERCHE
let boutonFermerRecherche = document.getElementById('idboutonFermerRecherche');
boutonFermerRecherche.addEventListener('click',fermerRecherche ) ;

//  FONCTION DU BOUTON FERMER DU FORMULAIRE RECHERCHE
// Revalider les quatres boutons de l'entete - voir à utiliser attribut onclick de form
function fermerRecherche (){
  console.log("On entre dans la fonction FermerRecherche");
    let formRecherche2 = document.getElementById('idFormRechercher') ;
    creation.addEventListener('click',fCreation) ;
    recherche.addEventListener('click',fRecherche) ;
    modification.addEventListener('click',fModification) ;
    raz.addEventListener('click',fReset) ;

    formRecherche2.style.display = 'none';
}

//BOUTON VALIDER RECHERCHE 
 
let boutonValiderRecherche = document.getElementById('idboutonValiderRecherche');
boutonValiderRecherche.addEventListener('click',validerRecherche);
//boutonValiderRecherche.onclick = "validerRecherche()" ;
 
// FONCTIONS AJAX	
function validerRecherche(){
  console.log("Récupération des variables");
 
// RECUPERATION DES VARIABLES DU FORMULAIRE RECHERCHE

var idSlctidR =  "";
var idSlctRef_MagR = ""; 
var idSlctFamilleR = document.getElementById('idSlctFamilleR').value;
var idSlctS_FamilleR = document.getElementById('idSlct_S_FamilleR').value;
var idSlctMatiereR = document.getElementById('idSlctMatiereR').value;
var idInputNbreZR = "";
var idInputDia1R = document.getElementById('idInputDia1R').value;
var idInputLong1R = document.getElementById('idInputLong1R').value;
var idInputDia2R = document.getElementById('idInputDia2R').value;
var idInputDia3R = document.getElementById('idInputDia3R').value;
var idInputLongUtileR = document.getElementById('idInputLongUtileR').value;
var idInputLongTotaleR = document.getElementById('idInputLongTotaleR').value;
var idInputCaract1R = document.getElementById('idInputCaract1R').value;
var idInputCaract2R = "";
var idInputFournisseurR = document.getElementById('idInputFournisseurR').value;
var idInputRef_FournisseurR = document.getElementById('idInputRef_FournisseurR').value;
var idInputPrixR = document.getElementById('idInputPrixR').value;
var idInputQteMiniR = document.getElementById('idInputQteMiniR').value;
var idInputCasEmploi1R = document.getElementById('idInputCasEmploi1R').value;
var idInputCasEmploi2R = document.getElementById('idInputCasEmploi2R').value; 
var idInputCasEmploi3R = "";
var idInputCasEmploi4R = ""; 
var idInputCasEmploi5R = "";
var idInputCasEmploi6R = "";

var filtre = { id: idSlctidR,
               RefMag: idSlctRef_MagR,
               familleOutil: idSlctFamilleR ,
               SousFamille: idSlctS_FamilleR,
               Matiere: idSlctMatiereR,
               Dia1: idInputDia1R,
               Dia2: idInputDia2R,
               LongUtile: idInputLongUtileR,
               Caract1: idInputCaract1R,
               Fournisseur: idInputFournisseurR,
               Ref_Fournisseur: idInputRef_FournisseurR,
               CasEmploi1R: idInputCasEmploi1R,
               CasEmploi2R: idInputCasEmploi2R              
               };

function creerFiltreSend(obj) {
  var resultat = "";
  for (var i in obj) {
    if (obj.hasOwnProperty(i) && obj[i]!=""  ) {
        resultat += i + "=" + obj[i] + "&";
    }
  }
  return resultat;
}
               
var filtreSend = creerFiltreSend(filtre);
filtreSend = filtreSend.slice(0, filtreSend.length-1);
//alert(filtreSend); 

  console.log("On entre dans la fonction validerRecherche");
  var xmlhttp ="", resultRecherche = "",x="", idRow ="" ;    
  xmlhttp = new XMLHttpRequest();   
 xmlhttp.onreadystatechange = function() {    
    if (this.readyState == 4 && this.status == 200) {           
      // console.log("Success",xmlhttp); 
      resultRecherche = JSON.parse(this.responseText);  
      if(typeof(resultRecherche)!='undefined' && resultRecherche!=null){ 
         var result = typeof(resultRecherche.result)!='undefined' ? resultRecherche.result : null;  
         if(result!=null){
           console.log('RESULT :',result);    
           for (x in result){
             console.log('id = ',x, result[x].id);
             var y = result[x].id;
             idRow = document.getElementById(y);                
             idRow.style.display = 'none';
           }        
        }         
      }else{
        console.log('no result !');
      }
    }else {
      console.log(xmlhttp, xmlhttp.status); 
    } 
 };
 xmlhttp.open("POST", "trouver.php", true);
 xmlhttp.onerror = function () { 
    console.log(xmlhttp, xmlhttp.status); 
	alert("Erreur ajax : Regarder la console pour plus de détails !");
 }; 
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send(filtreSend);

}  
	
//---------*************----------************-------------
//---------*************----------************-------------
//                  BOUTON MODIFIER                      //
//---------*************----------************-------------
//---------*************----------************-------------
  
function fModification(){
  console.log("On entre dans la fonction fModification");

    let formModif1 = document.getElementById('idFormModifier1') ;
    let formModif2 = document.getElementById('idFormModifier2') ;
    let formModifDiv = document.getElementById('idDIVFModifier') ;

    formModif1.style.display = 'block' ;
    formModif2.style.display = 'block' ;
    
    let validRechercheModif= document.getElementById('idboutonRechercheModif');
    validRechercheModif.addEventListener('click',validerModification1) ;
    
// NEUTRALISER LES 4 BOUTONS : CREER, RECHERCHER, MODIFIER, RESET.
    creation.removeEventListener('click',fCreation) ;
    recherche.removeEventListener('click',fRecherche) ;
    modification.removeEventListener('click',fModification) ;
    raz.removeEventListener('click',fReset) ;
}

// CONTROLE DE LA PREMIERE ENTREE.
let numIdM =  document.getElementById('idInputNumIdM');
numIdM.onchange = function(){
    if(numIdM!=""){
    document.getElementById('idInputRefMagM').setAttribute("disabled", "");  
    };
    }
let refMagM =  document.getElementById('idInputRefMagM');
refMagM.onchange = function(){
    if (refMagM!=""){
    document.getElementById('idInputNumIdM').setAttribute("disabled", "");  
    };
    }

//******************************
//  BOUTON RESET MODIFICATION  * 
//******************************
let boutonResetModif = document.getElementById('idboutonResetModification');
boutonResetModif.addEventListener('click',resetModification);

function resetModification(){
let x = document.getElementById('idInputRefMagM');
let y = document.getElementById('idInputNumIdM');
x.removeAttribute("disabled");
x.value='';

y.removeAttribute("disabled");
y.value='';   
}

//******************************
//  BOUTON FERMER MODIFICATION * 
//******************************
let boutonFermerModif = document.getElementById('idboutonFermerModification');
boutonFermerModif.addEventListener('click',resetModification);
boutonFermerModif.addEventListener('click',fermerModification);


//  FONCTION DU BOUTON FERMER DU FORMULAIRE MODIFIER 
function fermerModification(){
  console.log("On ferme la fenetre Modification");
    let formModification1 = document.getElementById('idFormModifier1') ;
    let formModification2 = document.getElementById('idFormModifier2') ;
    creation.addEventListener('click',fCreation) ;
    recherche.addEventListener('click',fRecherche) ;
    modification.addEventListener('click',fModification) ;
    raz.addEventListener('click',fReset);

    formModification1.style.display = 'none';
    formModification2.style.display = 'none';
    
    resetModification;
}


//*********************************
//BOUTON RECHERCHE OUTIL A MODIFIER
//********************************* 
function validerModification1(){
  console.log("Récupération des variables formulaires Modif 1");
 
// RECUPERATION DES VARIABLES DU FORMULAIRE MODIFIER 1
var idM = refMagM = "";
var idInputNumIdM =  document.getElementById('idInputNumIdM').value;
var idInputRefMagM = document.getElementById('idInputRefMagM').value;

var filtre = { "idM":idInputNumIdM,
               "refMagM":idInputRefMagM
               };

//alert( filtre.idM +
//      "\n" + filtre.refMagM );
      
let critere ="";
if (filtre.idM != "" && filtre.refMagM!=""){
    alert('UNE SEULE ENTREE EST DEMANDEE');
    }else if(filtre.idM=="" && filtre.refMagM==""){
    alert("AU MOINS UNE VALEUR EST DEMANDEE");
    }else if(filtre.idM==""){
    critere = 'refMagM='+idInputRefMagM;
    }else if(filtre.refMagM==""){
    critere = 'idM='+idInputNumIdM;
    }else{alert('VERIFIE TON CODE JC')};

//alert(critere);

console.log('critere =', critere );

console.log("On entre dans la fonction RechercheModif");
var xmlhttpM ="", resultModif1 = "",xM="", idRowM ="" ;    
  xmlhttpM = new XMLHttpRequest();   
 xmlhttpM.onreadystatechange = function() {    
    if (this.readyState == 4 && this.status == 200) {           
      console.log("Success",xmlhttpM); 
      resultModif1 = JSON.parse(this.responseText);  
      if(typeof(resultModif1)!='undefined' && resultModif1!=null){ 
         var resultM1 = typeof(resultModif1.result)!='undefined'? resultModif1.result : null;  
         if(resultM1!=null){
           console.log('RESULT :',resultM1);    
           for (x in resultM1){
             console.log('id = ',x, resultM1[x].id);
             var y = resultM1[x].id;
             idRow = document.getElementById(y);                
             idRow.style.display = 'none';
             document.getElementById('idSlct_S_FamilleMd').style.display = 'none' ;
             document.getElementById('idSlct_S_FamilleM').style.display = 'block';
             document.getElementById('idSlctMatiereMd').style.display = 'none' ;
             document.getElementById('idSlctMatiereM').style.display = 'block';
             document.getElementById('idInputNbreZMd').style.display = 'none' ;
             document.getElementById('idInputNbreZM').style.display = 'block';
             document.getElementById('idInputDia1Md').style.display = 'none' ;
             document.getElementById('idInputDia1M').style.display = 'block';
             document.getElementById('idInputLong1Md').style.display = 'none' ;
             document.getElementById('idInputLong1M').style.display = 'block';
             document.getElementById('idInputDia2Md').style.display = 'none' ;
             document.getElementById('idInputDia2M').style.display = 'block';
             document.getElementById('idInputDia3Md').style.display = 'none' ;
             document.getElementById('idInputDia3M').style.display = 'block';
             document.getElementById('idInputLongUtileMd').style.display = 'none' ;
             document.getElementById('idInputLongUtileM').style.display = 'block';
             document.getElementById('idInputLongTotaleMd').style.display = 'none' ;
             document.getElementById('idInputLongTotaleM').style.display = 'block';
             document.getElementById('idInputCaract1Md').style.display = 'none' ;
             document.getElementById('idInputCaract1M').style.display = 'block';
             document.getElementById('idInputFournisseurMd').style.display = 'none' ;
             document.getElementById('idInputFournisseurM').style.display = 'block';
             document.getElementById('idInputRef_FournisseurMd').style.display = 'none' ;
             document.getElementById('idInputRef_FournisseurM').style.display = 'block';
             document.getElementById('idInputPrixMd').style.display = 'none' ;
             document.getElementById('idInputPrixM').style.display = 'block';
             document.getElementById('idInputQteMiniMd').style.display = 'none' ;
             document.getElementById('idInputQteMiniM').style.display = 'block';
             document.getElementById('idInputCasEmploi1Md').style.display = 'none' ;
             document.getElementById('idInputCasEmploi1M').style.display = 'inline';
             document.getElementById('idInputCasEmploi2Md').style.display = 'none' ;
             document.getElementById('idInputCasEmploi2M').style.display = 'inline';
             document.getElementById('idInputCasEmploi3Md').style.display = 'none' ;
             document.getElementById('idInputCasEmploi3M').style.display = 'inline';
             document.getElementById('idInputCasEmploi4Md').style.display = 'none' ;
             document.getElementById('idInputCasEmploi4M').style.display = 'inline';
             document.getElementById('idInputCasEmploi5Md').style.display = 'none' ;
             document.getElementById('idInputCasEmploi5M').style.display = 'inline';
             document.getElementById('idInputCasEmploi6Md').style.display = 'none' ;
             document.getElementById('idInputCasEmploi6M').style.display = 'inline';                       
           }        
        }         
      }else{
        console.log('no result !');
      }
    }else {
      console.log(xmlhttpM, xmlhttpM.status); 
    } 
 };
 xmlhttpM.open("POST", "modifier1.php", true);
 xmlhttpM.onerror = function () { 
    console.log(xmlhttpM, xmlhttpM.status); 
	alert("Erreur ajax : Regarder la console pour plus de détails !");
 }; 
xmlhttpM.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttpM.send(critere);
} 

//*********************************
//BOUTON MODIFICATION DE L'OUTIL
//********************************* 



//---------*************----------************--------
//          BOUTON RESET                    //
//---------*************----------************--------
function fReset(){

alert('Reset tableau outils!!') ;
}