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 : Sélectionner tout - Visualiser dans une fenêtre à part
document.getElementById("exact_workforce").addEventListener('change', function(e){ /* code de la fonction*/ }, false );
Code : Sélectionner tout - Visualiser dans une fenêtre à part
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 );
	});
}