Interception d'une modification d'input par le JS

**drumtof** · 12/07/2011, 18h08

Bonjour à tous,

Je me heurte au problème suivant :
J'ai deux input dont l'un (visible) est alimenté par l'autre (de type hidden). Le champ caché pouvant être mis à jour par une fonction js.
Il faut alors (chose que je n'arrive pas à faire) que je répercute cette modification dans mon champ visible.

Y a t-il un moyen d'intercepter d'une modification d'input faite par une fonction JS (ex : document.monInput.value="toto") ?

Si oui quelqu'un pourrais-il me mettre sur la piste, car je n'ai pour le moment absolument rien trouvé qui marche.

Merci d'avance à tous.
TOF

**javatwister** · 12/07/2011, 18h28

euh, c'est une blague ou quoi?

si tu fais:

Code :

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

document.monInput.value="toto"

pourquoi tu ne fais pas dans la foulée:

Code :

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

document.monInput_visible.value="toto"

?

**andry.aime** · 13/07/2011, 08h29

Bonjour,

Attention,

Code :

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

document.nomForm.nomInput.value="tata";

A+.

**javatwister** · 13/07/2011, 08h59

Oui andry, ce n'est pas faux

**SpaceFrog** · 13/07/2011, 09h02

Code :

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

document.forms['nomForm'].elements['nomInput'].value="tata";

mais on va pas chipoter

**drumtof** · 18/07/2011, 15h31

Merci à tous pour vos réponses mais c'est un peu plus compliqué sinon je n'aurais pas poser la question

En fait je ne peux pas toucher la fonction JS m'étant à jour ces champs. Il faudrait que sur le changement de mon input hidden se déclenche un appel js pour mettre à jour mon champ visible.

Ce qui me pose problème c'est que je n'arrive pas a déclencher cette événement sur mon input hidden car j'ai l'impression que son changement de valeur (effectué par le JS que je ne peut pas toucher) n'engendre aucun événement. Est-ce vrai ? si oui comment contourner le problème ?

**NoSmoking** · 18/07/2011, 22h30

Bonsoir,
il est vrai qu'il est bien dommage que l'événement onchange ne se déclenche pas lors d'une modification de la value via le javascript.

Il existe deux méthodes pour arriver à tes fins, la bourrin et la filoute

- la méthode dite du bourrin, tu fais une vérification périodique via un setInterval.

- la méthode dite du filou, tu détournes la fonction et tu la remplaces par la tienne qui fait d'abord appel à celle ci, ce qui te permet de rajouter du code perso.

exemple :

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
<!DOCTYPE html>
<html>
<head>
<title>[Version Filoutte...]</title>
</head>
<body>
<input id="cache" type="text" value="undefined" disabled>
<select onchange="changeValeur( this);">
  <option value="un">un</option>
  <option value="deux">deux</option>
  <option value="trois">trois</option>
  <option value="quatre">quatre</option>
  <option value="cinq">cinq</option>
</select>
 
<br><input id="modif" type="text" value="">
<script type="text/javascript">
 
// variable
var oSrce = document.getElementById('cache');
var oDest = document.getElementById('modif')
 
// la fonction que je ne peux pas modifier
function changeValeur( obj){
  oSrce.value = obj.value;
}
// sauvegarde la fonction
var oldChange = changeValeur;
 
// redefini la fonction
changeValeur = function(){
    // appel de l'ancienne
    oldChange.apply( null, arguments);
    // ajout mon code
    oDest.value = oSrce.value;
  };
</script>
</body>
</html>

la fonction non modifiable est simuler par le onchange sur le SELECT, et le INPUT hidden est ici en readonly

**drumtof** · 19/07/2011, 16h04

Merci pour cette réponse mais la mise en place en cette solution pour moi ne fonctionne pas car la fonction que je ne peut pas touchée fait une redirection

je crois que je suis coincé

**NoSmoking** · 19/07/2011, 19h34

Envoyé par drumtof

Merci pour cette réponse mais la mise en place en cette solution pour moi ne fonctionne pas car la fonction que je ne peut pas touchée fait une redirection

j'ai du mal à comprendre l'intérêt de modifier la valeur d'un champ si une fois la mise à jour du champ hidden une redirection est réalisée.

- Si c'est toi qui traite la redirection, je penses que oui à priori, je ne vois pas l'intérêt de 2 champs pour une même valeur.
- Demande à l'auteur du script de modifier sa fonction...

Mais je pense que quelque chose m'échappe

**Watilin** · 20/07/2011, 00h01

Cette histoire de redirection me laisse perplexe moi aussi. Sinon, j’ai pensé à la mystérieuse méthode watch mais c’est un truc spécifique à Mozilla.

En tout cas, comme la propriété value est modifiée programmatiquement, la technique watch fonctionne, je viens de tester.

Drumtof, si ça t’intéresse, tu peux essayer de mettre en œuvre la solution cross-browser proposée sur Stackoverflow, en gardant à l’esprit que, de toute façon, ça ne marchera pas sur les versions d’IE inférieures à 8.

**Bovino** · 20/07/2011, 08h14

Pour IE, tu as toujours l'événement onafterupdate

Ceci dit drumtof, pour que l'on puisse t'aider efficacement, il serait bon d'être plus précis quant au problème rencontré et l'environnement dans lequel tu te trouve...

**drumtof** · 20/07/2011, 10h10

Merci à tous pour vos réponses et dsl de mon imprécision. J'intègre un progiciel de GED avec des évolutions spécifiques du client et j'essaie de toucher un minimum le progiciel pour la portabilité dans les versions supérieures.

Mais ici dans mon cas précis je n'aurais pas le choix de toucher le progiciel.

Merci pour votre aide et votre soutiens tjrs aussi efficace.

Interception d'une modification d'input par le JS

JavaScript

Discussions similaires

Partager

Partager