Modification de l'événement onchange

**seanjohn42** · 13/11/2008, 11h55

Bonjour à tous,

j'explique mon problème.

Je possède un formulaire sur une de mes pages. Certaines des listes déroulantes ont un événement onchange attribué (notamment pour le chargement de liste en boucle).

Mais à la fin de la page je lance un fonction qui attribue une nouvelle valeur à la fonction onchange (c'est une fonction qui permet de vérifier que les champs obligatoires sont saisis). J'aimerais donc savoir comment modifier le onchange sans écraser ce qu'il contenait auparavant.

Voilà brievement mon code :

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
<html>
  <head>
    ...
  </head>
  <body>
    ...
    <form ...>
      ...
      <select name="TypeOrganisme" onchange="chargerListe('Organisme');" required="1">
        <option value=""></option>
	...
      </select>
      ...
    </form>
    <script type="text/javascript">
	initFormValidation(document.form_creation);
    </script>
  </body>
</html>

Et voilà ce que fait (entre autres) la fonction javascript :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
function initFormValidation(formulaire){
	var selects = document.getElementsByTagName('SELECT');
 
	for(var no=0;no<selects.length;no++){
		selects[no].onblur = validateInput;
		selects[no].onchange = validateInput;
		selects[no].onpaste = validateInput;
		selects[no].onkeyup = validateInput;
	}	
}

C'est donc dans cette fonction que je voudrais garder l'ancien onchange pour le mettre à jour et ne pas écrire par dessus.

Merci à vous, si j'ai pas été clair dite le moi. ^^

**SpaceFrog** · 13/11/2008, 12h05

il faut attribue à une variable la fonction existante, puis attribuer une nouvelle fonction concaténant l'ancienne et la nouvelle, un exemple sera plsu parlant:

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
<script type='text/javascript'>
function addOnchange(){
 
var oldfunction=document.getElementById('one').onchange;
document.getElementById('one').onchange=function(){oldfunction();alert('hello');}
}
 
 
</script>
</head>
 
<body>
<select id='one' onchange="alert('coucou')">
<option>xxxxxxx</option>
<option>xxxxxxx</option>
<option>xxxxxxx</option>
<option>xxxxxxx</option>
<option>xxxxxxx</option>
<option>xxxxxxx</option>
</select>
<input type='button' onclick='addOnchange()' value="modifier" />

**seanjohn42** · 13/11/2008, 15h22

Merci de ta réponse plus que rapide !

Apparament je suis pas doué parce que j'arrive pas à utiliser ce que tu m'a fourni pour mon cas. Je galère à cause de passage d'éléments du formulaire en paramètre de ces fonctions.

Je vais mettre mon code complet du coup :

formulaire :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<form name="form_creation" method="post" action="...">
	<select name="TypeOrganisme" onchange="ajax_chargerElement('chargerOrganismes', 'RefTypeOrganisme=' + this.value, 'loader_FournisseurExterne', this.form.RefOrganisme);" required="1">
		<option value=""></option>
		<option value="...">...</option>
	</select>
	<select name="RefOrganisme" required="1">
		<option value=""></option>
	</select>
	<input type="submit" name="ajout" value="Ajouter" />
</form>
 
<script type="text/javascript">
	initFormValidation(document.form_creation);
</script>

Et voilà le code javascript que j'ai essayé de modifié avec tes indications :

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
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
function validateInput(e,inputObj){
	if(!inputObj)inputObj = this;		
	var inputValidates = true;
 
	if(formElementArray[inputObj.name]['required'] && inputObj.tagName=='INPUT' && inputObj.value.length==0)inputValidates = false;
	if(formElementArray[inputObj.name]['required'] && inputObj.tagName=='SELECT' && inputObj.selectedIndex==0){
		inputValidates = false;
	}
	if(formElementArray[inputObj.name]['mask'] && !inputObj.value.match(formValidationMasks[formElementArray[inputObj.name]['mask']]))inputValidates = false;
 
	if(formElementArray[inputObj.name]['freemask']){
		var tmpMask = formElementArray[inputObj.name]['freemask'];
		tmpMask = tmpMask.replace(/-/g,'\\-');
		tmpMask = tmpMask.replace(/S/g,'[A-Z]');
		tmpMask = tmpMask.replace(/N/g,'[0-9]');
		tmpMask = eval("/^" + tmpMask + "$/gi");
		if(!inputObj.value.match(tmpMask))inputValidates = false
	}	
 
	if(formElementArray[inputObj.name]['regexpPattern']){
		var tmpMask = eval(formElementArray[inputObj.name]['regexpPattern']);
		if(!inputObj.value.match(tmpMask))inputValidates = false
	}
	if(!formElementArray[inputObj.name]['required'] && inputObj.value.length==0 && inputObj.tagName=='INPUT')inputValidates = true;
 
	if(inputValidates){
		if(inputObj.type == "select-one") inputObj.className='validSelect';
		else inputObj.className='validInput';
	}else{
		if(inputObj.type == "select-one") inputObj.className='invalidSelect';
		else inputObj.className='invalidInput';
	}
 
	if(isFormValid(inputObj.form)) disableForm(false, inputObj.form);
	else disableForm(true, inputObj.form);
}
 
function initFormValidation(formulaire){
	var inputFields = document.getElementsByTagName('INPUT');
	var selectBoxes = document.getElementsByTagName('SELECT');
	var textareas = document.getElementsByTagName('TEXTAREA');
 
	var inputs = new Array();
 
 
	for(var no=0;no<inputFields.length;no++){
		if(inputFields[no].form == formulaire && inputFields[no].type != "submit" && inputFields[no].type != "button" && inputFields[no].type != "hidden")
			inputs[inputs.length] = inputFields[no];
 
	}	
	for(var no=0;no<selectBoxes.length;no++){
		if(selectBoxes[no].form == formulaire)
			inputs[inputs.length] = selectBoxes[no];
	}
	for(var no=0;no<textareas.length;no++){
		if(textareas[no].form == formulaire)
			inputs[inputs.length] = textareas[no];
	}
 
	for(var no=0;no<inputs.length;no++){
		var className = inputs[no].className;
		if(className && className.indexOf('validInput')>=0)continue;		
 
		var required = inputs[no].getAttribute('required');
		if(!required)required = inputs[no].required;
 
		var oldonchange = inputs[no].onchange;
		if(oldonchange != undefined) inputs[no].onchange = function(){ validateInput(false); oldonchange(); }
		else inputs[no].onchange = validateInput;
		inputs[no].onblur = validateInput;
		inputs[no].onpaste = validateInput;
		inputs[no].onkeyup = validateInput;
 
		formElementArray[inputs[no].name] = new Array();
		formElementArray[inputs[no].name]['mask'] = mask;
		formElementArray[inputs[no].name]['freemask'] = freemask;
		formElementArray[inputs[no].name]['required'] = required;
		formElementArray[inputs[no].name]['regexpPattern'] = regexpPattern;
 
		validateInput(false,inputs[no]);
	}
}

N'ayant pas été capable de faire marcher ça j'en suis donc revenu à laisser comme auparavant ces lignes :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
inputs[no].onchange = validateInput;
inputs[no].onblur = validateInput;
inputs[no].onpaste = validateInput;
inputs[no].onkeyup = validateInput;

et à prendre le problème par l'autre bout en mettant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<script type="text/javascript">
	initFormValidation(document.form_creation);
 
	document.form_creation.TypeOrganisme.onchange = function(){
		validateInput(false, document.form_creation.TypeOrganisme);
		ajax_chargerElement('chargerOrganismes', 'RefTypeOrganisme=' + document.form_creation.TypeOrganisme.value, 'loader_FournisseurExterne', document.form_creation.RefOrganisme);
	}
</script>

Et là tout marche sur firefox mais pas sur IE6 qui à l'air de ne pas aimer mon changement de onchange en dehors de la balise select.

Modification de l'événement onchange

JavaScript

Discussions similaires

Partager

Partager