1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
| <body>
<form method="post" name="actForm">
<h3 class="formTitle">Sélection progressive d'une activité</h3>
<input type="hidden" name="id" value="3011">
<input type="hidden" name="token" value="edf97fba5e3bfeb83aa4d46639426568f3093c490304a996">
<div class="formFlex">
<fieldset><legend>Activités répertoriées</legend>
<p class="note">
Ici vous pouvez sélectionner des activités selon la nomenclature NAF de l'INSEE (rév. 2)
ce qui peut vous permettre de rechercher les entreprises qui ont la même activité.<br>
Ces codes sont indépendants de celui du registre du commerce. Mettez ici les activités qui correpondent
le mieux à celles du client en sélectionnant d'abord la section et enfin l'activité.
</p>
<fieldset class="activity"><legend>Zone d'édition : Sélection d'une activité</legend>
<label><span>Section</span><select name='naf[]'><option value='' label='< ---- >'></option><option value='1'>SECTION A - AGRICULTURE, SYLVICULTURE ET PÊCHE</option><option value='2'>SECTION B - INDUSTRIES EXTRACTIVES</option><option value='3'>SECTION C - INDUSTRIE MANUFACTURIÈRE</option></select></label><br>
<label><span>Division</span><select name='naf[]'><option value='' label='< ---- >'></option></select></label><br> <!-- ajouter disabled après mise au point JS -->
<label><span>Groupe</span><select name='naf[]'><option value='' label='< ---- >'></option></select></label><br> <!-- ajouter disabled après mise au point JS -->
<label><span>Activité</span><select name='naf[]'><option value='' label='< ---- >'></option></select></label><br> <!-- ajouter disabled après mise au point JS -->
</fieldset>
</fieldset>
</div>
</form>
<div id="resultat"></div>
<script>
const
form = document.querySelector("form[name=actForm]")
,nafs = form.querySelectorAll("select[name='naf[]']")
,root = window.location.origin
,resultat = document.getElementById("resultat")
;
//console.log(emptyOption); // Créé en PHP, retourne "<option value='' label='< ---- >'></option>"
function handleChange(idx,cible) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if (xhr.readyState == 4 && xhr.status == 200){
//console.log(xhr.responseText);
if (cible.tagName == 'SELECT') {
cible.disabled = false;
}
cible.innerHTML = xhr.responseText;
}
}
xhr.open('POST', root+'/frontend/customerActivityAjax.php', true);
var data = new FormData(form);
//data.append('changed', idx); // inutilisé pour l'instant
xhr.send(data);
}
if (nafs.length){
nafs.forEach(function(curNaf, index){
curNaf.addEventListener('change', function(e){
// Vide le div des résultats
resultat.innerHTML = '';
var cible
,nextselect;
nafs.forEach(function(sel, i){
// console.log(curNaf.isSameNode(sel));
/* Si le select (sel) contenu dans la liste des sélecteurs correspond au sélecteur utilisé (curNaf),
trouve le prochain sélecteur et si c'est le dernier on change de cible pour afficher le contenu au retour de la requête ajax
*/
nextselect = nafs[i+1];
if(curNaf.isSameNode(sel)) {
cible = nextselect != undefined ? nextselect : resultat;
}
//console.log(cible);
/* Si cible est défini c'est que l'on est (ou que l'on a passé) le select en cours, on selectionne la première option pour les
sélecteurs suivants pour avoir une valeur vide et on les met en disable sinon on aurait des affichages ou des résultas incohérents
en cas de sélections successives.
*/
if (cible && nextselect != undefined) {
nextselect.getElementsByTagName('option')[0].selected = 'selected';
nextselect.disabled = true;
}
})
handleChange(index, cible);
}, false );
});
}
</script>
</body> |
Question complémentaires par rapport au sujet PHP "Recharger page après exécution code"
Répondre avec citation
Envoyé par ABCIWEB
.
) un retour Ajax avec des options remplies correspondant au sélect à renseigner, et ce serait bien que je puisse voir un échantillon de ce retour ajax.
Partager