11540 sujets

JavaScript, DOM et API Web HTML5

Bonjour à tous,

Je n'ai pas réussi à trouvé un sujet où l'on parle de ce problème (ou alors j'ai mal cherché).

Voici ce qui se passe :
J'ai un formulaire assez complexe dans lequel plusieurs actions peuvent modifier la valeur d'un champ. J'aimerais effectuer une action lorsque le champ cible est modifié. Or l'évènement onchange ne s'exécute que lorsque c'est l'utilisateur qui change la valeur du champ. Si la valeur est modifiée en javascript l'évènement onchange n'est pas exécuté.

Voici un cas très simple qui démontre le problème en question :


<form action="">
	<input type="text" value="" id="test" /><br />
	<span id="test_value"></span><br />
	<span id="test_change">Changer</span>
</form>



document.getElementById('test').onchange = function() {
	document.getElementById('test_value').innerHTML = this.value;
};
document.getElementById('test_change').onclick = function() {
	document.getElementById('test').value += ' ha';
};


Lorsque je modifier le champ "test", le span "test_value" change bien (lorsque je quitte le champ). Mais quand je clique sur "Changer", ça modifie la valeur du champ mais pas du span... Smiley decu

Connaissez-vous une solution pour cela ?

Merci d'avance
salut...

Bn alors c'est normal puisque dans la 2° fonction tu ne fais rien sur le span Smiley smile

essaye comme ça Smiley cligne


document.getElementById('test').onchange = function() { 
    document.getElementById('test_value').innerHTML = this.value; 
}; 
document.getElementById('test_change').onclick = function() { 
    document.getElementById('test_value').innerHTML = document.getElementById('test').value + ' ha'; 
}; 

Modifié par pchlj (13 Sep 2010 - 11:06)
Merci de ta réponse.

Mais ce n'est pas si simple dans mon cas réel. J'ai volontairement donné un cas très simple pour l'exemple.
Dans mon cas, j'utilise des plugins qui peuvent modifier mon champ. Et si je commence à mettre des appels un peu partout à la même fonctions, on ne va plus s'y retrouver. Surtout que cela m'obligerais à créer des fonctions à passer en paramètre dans les plugins pour les utiliser en callback.

C'est pour cela que je cherche à utiliser plutôt un listener ce qui me permettrait d'avoir un code plus organisé et lisible.
côté navigateurs, ils évitent de lancer des event de type onchange ou onsubmit lorsqu'ils détectent que cela a été fait par un script pour éviter les boucles infinies. Par contre fais gaffe, ils ne le font pas tous de la même manière.

je crois que tu ne vas pas vraiment avoir le choix : si ton formulaire est complexe, alors le simple scripting en javascript ne te suffira plus, et il va falloir jouer avec des callbacks et un code bien construit pour y implémenter ton code métier qui est de toute façon très spécifique à ce que tu en dis
Hello...

Tu peux peux-être simplifier le tout en utilisant des événements personnalisés...

Petite doc en anglais sur ajaxian, par ici.

En espérant que ça aide...