Manipuler les listes "select" de mon formulaire Résolu/Fermé

Question

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:

Renseigner les informations.

Les informations ombrées sont obligatoires.

FAMILLE OUTIL

SOUS FAMILLE

MATIERE OUTIL

NOMBRE DE DENTS OUTIL

DIAMETRE 1

LONGUEUR 1

DIAMETRE 2

DIAMETRE 3

LONGUEUR UTILE

LONGUEUR TOTALE

CARASTERISTIQUE 1

FOURNISSEUR

REFERENCE FOURNISSEUR

PRIX & QUANTITE MINI

CAS D'EMPLOI 1

CAS D'EMPLOI 2

CAS D'EMPLOI 3

CAS D'EMPLOI 4

CAS D'EMPLOI 5

CAS D'EMPLOI 6

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 + // " " + 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!!') ; }

Narwaoui · Accepted Answer

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:

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; selecteur+='

lugdanum · Answer

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.

JC_8280 · Answer

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

JC_8280 · Answer

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

JC_8280 · Answer

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

FAMILLE OUTIL

SOUS FAMILLE

// 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

Manipuler les listes "select" de mon formulaire

5 réponses

Discussions similaires