Gestion de deux écouteurs, bonne pratique
Bonjour,
Dans le deuxième code ci-dessous, l'écouteur sur tabForms permet de sauvegarder les modifications sur n'importe quel champ. Dans un formulaire, sur un champ particulier appelé 'exact_workforce' (effectif exact), je souhaite modifier simultanément (ou plutôt juste après) un champ 'workforce_slice' (tranche d'effectif) en fonction de la valeur définie dans 'exact_workforce'.
Afin de mieux maîtriser le déroulement, de ne pas tout mélanger et d'éviter les conflits, vaut-il mieux traiter ce cas particulier à l'intérieur de l'écouteur existant ou est-il préférable de créer un autre écouteur comme ceci:
Code:
document.getElementById("exact_workforce").addEventListener('change', function(e){ /* code de la fonction*/ }, false );
Code:
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
| const
tabForms = document.querySelectorAll("[name='tabForm'], [name='actForm']")
,dates = document.querySelectorAll("[id*='date_']")
,dateLabels = document.querySelectorAll("[for*='date_']")
,delElems = document.querySelectorAll("[name*='delElem']")
,calSpan = document.querySelector("#calSpan")
,delImgs = document.querySelectorAll("[src*='del.png']")
// Elements of trading form
,mainLevel = document.querySelector("#mainLevel")
,offerLevel = document.querySelector("#offerLevel")
,mainLevel5 = document.getElementById("5")
;
// automatic saving on input change
// Doesn't work with dates, for dates see callBack function of calendar script below
if(tabForms.length){
tabForms.forEach(function(curForm, index){
curForm.addEventListener('change', function(e) {
if ((e.target.nodeName === 'INPUT' || e.target.nodeName === 'SELECT' || e.target.nodeName === 'TEXTAREA') && curForm.name != 'actForm') {
let idId = 'id'+index;
if (document.getElementById(idId).value != 0) { // value=0 means a new element
this.submit();
}
}
}, false );
});
} |
