Logo GNT
Actualités Tests & Guides Bons Plans
Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11
Entraide Développement Développement Langage JavaScript utilisation de onchange et onkeypress

utilisation de onchange et onkeypress

11 réponses
Avatar
J-F Portala
Bonjour,

dans un formulaire, j'ai 4 valeurs numériques a saisir.
Dans un 5eme champ je voudrais placer la somme des 4 valeurs automatquement
dès que l'une des valeurs saisie change.

J'ai donc pense a utiliser onchange, mais je souhaiterais que ce calcul se
fasse pour chaque frappe au clavier.

onchange a l'air de fonctionner lorsque que l'on quitte le champ.

J'utilise aussi onkeypress pour n'accepter que des valeurs numériques au
clavier.

Je ne vois pas comment intégrer les tests les deux fonctions (filtrage du
clavier et appel a une fonction)

Merci de votre aide

Jeff
Signaler un problème avec ce contenu

10 réponses

Supprimer
Cette action est irreversible, confirmez la suppression du commentaire ?
Signaler le commentaire

Veuillez sélectionner un problème

Nudité
Violence
Harcèlement
Fraude
Vente illégale
Discours haineux
Terrorisme
Autre
1 2
Avatar
YD
dans un formulaire, j'ai 4 valeurs numériques a saisir.
Dans un 5eme champ je voudrais placer la somme des 4 valeurs automatquement
dès que l'une des valeurs saisie change.

J'ai donc pense a utiliser onchange, mais je souhaiterais que ce calcul se
fasse pour chaque frappe au clavier.

onchange a l'air de fonctionner lorsque que l'on quitte le champ.


Sur un input text oui.

J'utilise aussi onkeypress pour n'accepter que des valeurs numériques au
clavier.


onkeypress pour filtrer, onkeyup pour calculer.
Un petit exemple rapide :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title></title>
<script type="text/javascript">
function addEvent(obj, evType, fn){
if (obj.addEventListener){
obj.addEventListener(evType, fn, true);
return true;}
if (obj.attachEvent){
var r = obj.attachEvent("on"+evType, fn);
return r;}
return false;
}

var Combi = function(){
_self=this;
this.t1=document.getElementById("t1");
this.t2=document.getElementById("t2");
this.t3=document.getElementById("t3");
this.t4=document.getElementById("t4");
this.res=document.getElementById("res");
setRes=function(){
_self.res.value=(+_self.t1.value)
+(+_self.t2.value)
+(+_self.t3.value)
+(+_self.t4.value);};
addEvent(this.t1,'keyup',setRes);
addEvent(this.t2,'keyup',setRes);
addEvent(this.t3,'keyup',setRes);
addEvent(this.t4,'keyup',setRes);
}

function init(){
window.combi=new Combi()}

addEvent(window,"load",init);

</script>
</head>
<body>
<form action="">
<p><input id="t1" name="t1" value="0"></p>
<p><input id="t2" name="t2" value="0"></p>
<p><input id="t3" name="t3" value="0"></p>
<p><input id="t4" name="t4" value="0"></p>
<p><input id="res" name="res" value="0" disabled="disabled"
style="font-weight:bold; color:navy; background:gold"></p>
</form>
</body>
</html>

--
Y.D.

Avatar
J-F Portala
Merci de ton aide

je n'avais pas encore vu cette façon d'insérer des evenements en dehors de
<input>
Je mettais cela directement dans le <input>.
Cela semble plus simple et plus clair de séparer.


Je pense avoir compris le fonctionnement mis à part:
où doit on placer la fonction suivante
addEvent(window,"load",init);
Je travaille en PHP et je pensais qu'il fallait utilisdr <body onload =
"init()">
pour activer du javascript au démarrage

Je ne comprends pas
windows.combi = new Combi()
combi n'est pas un membre de windows à mon avis.
Est ce que l'on aurait pu mettre windows.toto = new Combi().

On y met la fonction d'initialisation,mais il faudrait qu'elle soit appelée
apres la construction du formulaire,
puisqu'on fait reference à t1,t2... qui ne sont définis que plus tard.

Ton exemple fonctionne parfaitement

Je pense qu'il me manque quelques clés pour comprendre pouquoi cela
fonctionne
encore merci

Jeff

onkeypress pour filtrer, onkeyup pour calculer.
Un petit exemple rapide :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title></title>
<script type="text/javascript">
function addEvent(obj, evType, fn){
if (obj.addEventListener){
obj.addEventListener(evType, fn, true);
return true;}
if (obj.attachEvent){
var r = obj.attachEvent("on"+evType, fn);
return r;}
return false;
}

var Combi = function(){
_self=this;
this.t1=document.getElementById("t1");
this.t2=document.getElementById("t2");
this.t3=document.getElementById("t3");
this.t4=document.getElementById("t4");
this.res=document.getElementById("res");
setRes=function(){
_self.res.value=(+_self.t1.value)
+(+_self.t2.value)
+(+_self.t3.value)
+(+_self.t4.value);};
addEvent(this.t1,'keyup',setRes);
addEvent(this.t2,'keyup',setRes);
addEvent(this.t3,'keyup',setRes);
addEvent(this.t4,'keyup',setRes);
}

function init(){
window.combi=new Combi()}

addEvent(window,"load",init);

</script>
</head>
<body>
<form action="">
<p><input id="t1" name="t1" value="0"></p>
<p><input id="t2" name="t2" value="0"></p>
<p><input id="t3" name="t3" value="0"></p>
<p><input id="t4" name="t4" value="0"></p>
<p><input id="res" name="res" value="0" disabled="disabled"
style="font-weight:bold; color:navy; background:gold"></p>
</form>
</body>
</html>

--
Y.D.




Avatar
YD
je n'avais pas encore vu cette façon d'insérer des evenements en dehors de
<input>
Je mettais cela directement dans le <input>.
Cela semble plus simple et plus clair de séparer.


Avantages :
- Séparation structure/mise en page
- Possibilités d'attacher plusieurs gestionnaires
au même événement

Je pense avoir compris le fonctionnement mis à part:
où doit on placer la fonction suivante
addEvent(window,"load",init);
Je travaille en PHP et je pensais qu'il fallait utilisdr <body onload > "init()">
pour activer du javascript au démarrage


l'ancien <body onload.... est l'équivalent du window.onload
Je trouve personnellement plus clair de ne pas avoir les gestionnaires
mélangés au code (pour des pages un peu longues), ça facilite les
modifications de script. Le addEvent(window,"load",init) peut être
placé dans n'importe quel bloc de script.

Je ne comprends pas
windows.combi = new Combi()
combi n'est pas un membre de windows à mon avis.
Est ce que l'on aurait pu mettre windows.toto = new Combi().


Oui (enfin window.toto pas windows.toto...).
combi est une propriété de window, comme toutes les variables
globales. L'objet global du javascript c'est l'objet window.
J'utilise cette écriture car c'est une façon de créer une
variable globale depuis une fonction et surtout de le mettre
en valeur. Si j'avais écrit combi=new Combi() le résultat
aurait été identique mais à la relecture, ça saute moins aux
yeux que combi est une variable globale.

On y met la fonction d'initialisation,mais il faudrait qu'elle soit appelée
apres la construction du formulaire,
puisqu'on fait reference à t1,t2... qui ne sont définis que plus tard.


C'est le cas puisque init() est appelé par le onload de la page
(rôle de l'instruction addEvent(window,"load",init);) et que c'est
cette fonction (init) qui crée l'instance de l'objet Combi.

Ton exemple fonctionne parfaitement
Je pense qu'il me manque quelques clés pour comprendre pouquoi cela
fonctionne


S'il t'en manque encore après ce post n'hésite pas.

--
Y.D.

Avatar
J-F Portala
Encore merci de ton aide,

encore une toute pitite question.

Dans ma fonction de calcul de somme, j'avais besoin d'un parametre.
Je l'ai passé en argument de la fonction javascript.

Ensuite, je me suis paerçu qu'au premier affichage, il fallait appeler cette
fonction, puisque
l'evenement onkeyup n'etait pas active.

J'ai fait la chose suivante qui ne ma parait pas elegant du tout.
Lorsque je cree mon formulaire,, à la fin j 'ai écrit
?>
<script language="javascript">
<!--
calculsomme(<?php echo $parametre ?>) ;
//-->
</script>
<?php

Cela fonctionne mais j'avoue que mettre une vérue pareille ne me satifsait
pas.
Aurais tu une petite piste pour améliorer cela.
$parametre s'obtient à partir d'une requete à une bdd effectuée avant la
creation du formulaire.

Jeff
Avatar
YD
Dans ma fonction de calcul de somme, j'avais besoin d'un parametre.
Je l'ai passé en argument de la fonction javascript.

Ensuite, je me suis paerçu qu'au premier affichage, il fallait appeler cette
fonction, [...]
J'ai fait la chose suivante qui ne ma parait pas elegant du tout.
Lorsque je cree mon formulaire,, à la fin j 'ai écrit
?>
<script language="javascript">
<!--
calculsomme(<?php echo $parametre ?>) ;
//-->
</script>
<?php

Aurais tu une petite piste pour améliorer cela.
$parametre s'obtient à partir d'une requete à une bdd effectuée avant la
creation du formulaire.


Je ne sais pas quelle solution tu as finalement choisie (objet, gestion
des événements...). Ceci étant, si les champs doivent avoir une valeur
initiale, j'effectuerai plutôt le premier calcul côté serveur, en PHP.

Sinon, si tu as repris le addEvent de mon post précédent, tu peux ajouter
cette ligne dans ton script principal (on dans un nouveau script du head
si tu as placé le reste dans un fichier js externe) :

addEvent(window,"load",function(){calculsomme(<?php echo $parametre ?>);});

(on peut attacher plusieurs gestionnaires à un même événement via le DOM)

ou l'ajouter dans la fonction lancée à l'initialisation, pour reprendre
l'exemple donné, remplacer la fonction init par :

function init(){
window.combi=new Combi();
calculsomme(<?php echo $parametre ?>);
}

Une petite remarque sur l'élément script (mais c'est peut-être ton éditeur
HTML qui écrit comme cela), en HTML 4.x l'élément script n'a pas d'attribut
'language' mais a un attribut 'type' obligatoire. Par ailleurs les antiques
commentaires HTML ne sont plus de mise. Je ne crois pas qu'à part pour le
fun quiconque navigue avec des IE2 ou des Netscape2... Donc la syntaxe du
script devient simplement :
<script type="text/javascript">
calculsomme(<?php echo $parametre ?>) ;
</script>

En espérant t'avoir aidé.
--
Y.D.

Avatar
J-F Portala
Merci beaucoup de ton aide

Jeff
Avatar
J-F Portala
Apres avoir fait fonctionner le javascript de façon
classique en intégrant les onkeyup dans le <input>
j'ai voulu travaillé avec les addevent.

En revanche, j'ai quelques soucis d'intégration:
- habituellement, j'utilise des classes pour décrire les tables de bases de
données que j'utilise.
Dans cette classe, je définis les formulaire pour la création, la
modification, et l'affichage des données de la table.
J'ai aussi un fichier php pour gérer cette classe, en particulier, les auto
soumissions avec un

$obj = new classTable() ;

switch ($_REQUEST['mode'])
{
case FORM_NEW:
$obj->FormNew($db...)
break ;
case FORM_MODIFY:
case MODIFY:
case NEW:
case SUPPRESS:
case SELECT:
etc...
}

C'est ce fichier qui a l'entete html et qui cree un objet classTable et qui
l'utilise.

1.En fonction de 'mode', je vais afficher le formulaire de creation ou de
modification., ce qui veut dire que l'initialisation du javascript doit être
conditionnée au mode.
2. les champs du formulaire sont dans la classe classTable. Il me parait
plus judicieux pour eviter les erreurs de syntaxe d'intégrer les evenements
javascript
au sein de la création du formulaire.(le but ultime pour moi est de tout
automatiser à partir de la description de la table)

Pour faire simple, cela donne quelque chose du style:
function FormModify($db,$urlSubmit,$urlBack)
{
include_once('class.form.php') ;
$form = new Form('form-classic','formName',$urlSubmit) ;
$form->AddTitle('Form Title') ;
$param = $db->get_var("select param from parametres where 1") ;
$form->addInt($fielName,$label,"onkeyup='calcul($param)'") ;
$form->addButton('submit',$urlSubmit) ;
$form->addButton('back',$urlBack) ;
$form->Close() ;
}

Comment est ce que l'on pourrait utiliser addEvent directement dans
FormModify()
J'ai bien essayé de choses
echo '<script type="text/javascript">' ;
echo '<!--' ;
echo 'this.elt = document.getElementById("'.$fieldName.'") ;'
echo 'addEvent(this->elt,"keyup",calcul($param)) ;'
echo '//--></script>'

Mais deux choses coincent :
this->elt ne correspond pas à un objet
utliser un argument dans la fonction calcul pose probleme

Aurais tu quelques pistes

Encore merci de ton aide

Jeff
Avatar
J-F Portala
Toute petite précision,
l'objet n'était pas défini acr la variable n'était pas déclarée.
var elt = document.getElementById() ; fonctionne

Le seul probleme restant est l'utilisation d'une fonction avec parametre

Comment est ce que l'on pourrait utiliser addEvent directement dans
FormModify()
J'ai bien essayé de choses
echo '<script type="text/javascript">' ;
echo '<!--' ;
echo 'this.elt = document.getElementById("'.$fieldName.'") ;'
echo 'addEvent(this->elt,"keyup",calcul($param)) ;'
echo '//--></script>'

Mais deux choses coincent :
this->elt ne correspond pas à un objet
utliser un argument dans la fonction calcul pose probleme

Aurais tu quelques pistes

Encore merci de ton aide

Jeff



Avatar
J-F Portala
Tout est ok maintenant,
il fallait mettre
addEvent(elt,"keyup",function(){calcul($param)}) ;
Tout fonctionne.

La seule chose qui ne fonctionne pas, c'est lorsque j'ai voulu remplacer ma
fonciton
loadAll(oneMore)
qui charge plusieurs fonctions au demarrage (chargement du menu déroulant -
timer...)

par des addEvent(window,"load",function);

Cela ne fonctionne plus avec le chargement du menu.
Je pense que certains elements ne sont pas encore definis, ou alors que la
fonciton window.load agit différemment qu'avec addEvent(window,"load"

Jeff
Avatar
YD
Tout est ok maintenant,
il fallait mettre
addEvent(elt,"keyup",function(){calcul($param)}) ;
Tout fonctionne.


C'est l'essentiel ;-)

La seule chose qui ne fonctionne pas, c'est lorsque j'ai voulu remplacer ma
fonciton
loadAll(oneMore)
qui charge plusieurs fonctions au demarrage (chargement du menu déroulant -
timer...)

par des addEvent(window,"load",function);

Cela ne fonctionne plus avec le chargement du menu.
Je pense que certains elements ne sont pas encore definis, ou alors que la
fonciton window.load agit différemment qu'avec addEvent(window,"load"


Les deux fonctions loadAll et addEvent sont exécutées au chargement
de la page, donc quand les éléments HTML sont définis (sauf ceux ajoutés
par script après bien sûr). Si tu utilisais la fonction loadAll (qui a
fait l'objet d'un fil il y a pas mal de temps ici-même, n'est-ce pas ?) tu
dois pouvoir la remplacer partout par addEvent. La différence entre les
deux approches est que loadAll surchargeait une unique fonction
window.onload alors que addEvent ajoute des gestionnaires différents au
même événement (comme si coexistent alors plusieurs onload sur le même
objet). Autre différence, addEvent suppose un navigateur (relativement)
récent.

--
Y.D.

1 2