Manipuler les listes "select" de mon formulaire [Résolu]

Signaler
Messages postés
40
Date d'inscription
jeudi 19 mars 2020
Statut
Membre
Dernière intervention
30 avril 2020
-
Messages postés
40
Date d'inscription
jeudi 19 mars 2020
Statut
Membre
Dernière intervention
30 avril 2020
-
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!!') ;
}

5 réponses

Salut,
JQuery est une bibliothèque JavaScript(un fichier écrit en JavaScript de fonctions) donc il s’intègre à une page de la même manière que n'importe quel fichier JavaScript.

Votre question suivante me semble plutôt concerner la façon dont vous faites les choses.
N'est ce pas ce que vous cherchez à faire modifier les éléments depuis le début?

Je serais vous(sans savoir exactement vos besoins exacts) je ne chercherais pas à modifier des éléments existants hypothétiques mais plutôt de les afficher quand on en a besoin.
Exemple de script:


<div id='selection'>
<SELECT name='choixA' id='choix1'>
<option value='a'>a</option>
<option value='b'>b</option>
<!-- etc-->
</select>


</div>



let listeItemsA=['A1','A2','A3'];
let listeItemsB=['B1','B2','B3'];

function creationSelect(name,id,itemValues,itemsList){
let sel=document.createElement('select');
sel.setAttribute('name',name);
sel.setAttribute('id',id);
/* une boucle pour ajouter tout les choix OPTION à partir des 2 listes*/
for(let i=0;i<listItems.length;i++){
  let opt=document.createElement('option');
   opt.setAttribute('value',itemValues[i]);
   opt.innerHtml=itemsList[i];
   sel.appendChild(opt);//-- ajoute chaque option au select
}
return sel;

}

/* j'utilise createElement car ça permet de manipuler directement des éléments HTML(balises) en tant que tel mais on peut très bien écrire la même chose avec du texte HTML sous forme de chaîne de caractères:
let selecteur='<select name='+name+' >;
selecteur+='<option value...
...
et à la fin
selecteur+='</select>';

Cela revient pratiquement au même sauf qu'une des façons de faire utilise une chaîne de caractère l'autre la programmation objet, les 2 méthodes peuvent avoir des avantages/inconvénients.
*/


document.getElementByid('choix1').addEventListener('change',function(){
   if(document.getElementById('choix1').name==="a"){/** il y a clairement plus élégant comme façon de faire*/
  let ajout=creationSelect('selectA','ItemA',listeItemsA,listeItemsA);
  document.getElementById('selection').appenChild(ajout);
   }
/* faire de même pour les autres choix B, C etc...on peut aussi faire mieux en associant chaque "liste d'items" dans un objet JSON et sa valeur(ou avec l'objet Map)*/

});



Bien sûr tout n'est pas complet mais c'est un piste pour obtenir un meilleur code: plus simple à écrire et utiliser/réutiliser.
Dans cet exemple il faudra par exemple supprimer les anciens select au changement, ça peut être facilement pallié en attribuant un container vide pour chaque menu sous forme de liste déroulante et en 'écrasant' l'ancienne via innerHTML par exemple(ou en utilisant removeElement).
Messages postés
91
Date d'inscription
vendredi 13 mai 2005
Statut
Membre
Dernière intervention
4 mai 2020
22
Hello

Regarde du côté de ce script (il te faut jQuery...):
http://jsfiddle.net/YPsqQ/
ou encore celui-ci https://jsfiddle.net/pramod4g/9htsLjw4/
Cela peut peut être te donner une piste?

@+

_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
Ma réponse t'a un peu aidé ? Si oui, un petit merci... Merci.
Messages postés
40
Date d'inscription
jeudi 19 mars 2020
Statut
Membre
Dernière intervention
30 avril 2020

Merci,
par contre je suis un grand débutant, c'est mon premier projet.
Je n'ai pas encore regardé comment on intègre le JQuery dans un projet.
J'ai prévu de le faire quand je fini ce projet.
Cette semaine j'espère.
Peux tu me dire, le JQuery se met dans le JS?

Cordialement.
JC
Messages postés
40
Date d'inscription
jeudi 19 mars 2020
Statut
Membre
Dernière intervention
30 avril 2020

Bonsoir Lugdanum,

Je me demande si je laisse un seul élément "select", et modifie ses éléments avec le JS, est ce que cela va marcher mieux?

Bonne soirée.
JC
Messages postés
40
Date d'inscription
jeudi 19 mars 2020
Statut
Membre
Dernière intervention
30 avril 2020

Bonsoir,

Au final, j'ai donc fait comme ça , sans JQuery.
J'essayerai le JQuery pour mon second projet.


<!--  ******   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> 




// CONTROLE DU CHOIX SOUS FAMILLE
// Merci à Narwaoui du Forum Comment ça marche.

let listeItemsA=['2 TAILLES','TORIQUE','A FILETER','3 TAILLES','A CHANFREINER'];
let listeItemsB=['STANDARD','ETAGE','A POINTER','SPECIAL'];
let listeItemsC=['COUPANT','DEFORMATION'];

function creationSelect(name,id,itemValues,itemsList){
let sel=document.createElement("select");
sel.setAttribute('name',name);
sel.setAttribute('id',id);
sel.setAttribute('class',"classSlct_S_Famille");
sel.setAttribute("required","");
for(let i=0;i<itemsList.length;i++){
   let opt=document.createElement('option');
   opt.setAttribute('value',itemValues[i]);
   //alert(itemsList[i]);
   let textOption = document.createTextNode(itemsList[i]);
   //opt.innerHtml=itemsList[i];
   opt.appendChild(textOption);
   sel.appendChild(opt);
}
return sel;
}

let w = document.getElementById('idSlctCFamille');
w.addEventListener('change',function(){
  let choixFamille = document.getElementById('idSlctCFamille');
  let choix_S_Famille = document.getElementById("idChoix_S_Famille_").querySelector('select');
  //alert(choixFamille.value);           
   if(choixFamille.value=="FRAISE"){
  let ajout=creationSelect('SousFamille','idSlctC_S_Famille',listeItemsA,listeItemsA);
  document.getElementById("idChoix_S_Famille_").replaceChild(ajout,choix_S_Famille);
   }else if (choixFamille.value=="FORET"){
  let ajout=creationSelect('SousFamille','idSlctC_S_Famille',listeItemsB,listeItemsB);
  document.getElementById("idChoix_S_Famille_").replaceChild(ajout,choix_S_Famille);
   }else if (choixFamille.value=="TARAUD"){
  let ajout=creationSelect('SousFamille','idSlctC_S_Famille',listeItemsC,listeItemsC);
  document.getElementById("idChoix_S_Famille_").replaceChild(ajout,choix_S_Famille);
   }else {
  alert( "REVOIE TON CODE JC: CHOIX SOUS FAMILLE" )}
});
}