Fonction Calcul dans la même page html

Version imprimable

20/05/2014, 15h22
W.ided123

Fonction Calcul dans la même page html

Salut tout le monde,
j'ai un petit problème au niveau de développement de mon application web dynamique, j'ai souhaite avoir un tableau avec 3 champs le premier est pour une quantité théorique qui est générée par le système (soit 0 ou 1 ) , le deuxième c'est pour la quantité physique et c'est un champ de saisie à entrer (input type="text") et le troisième champ c'est pour l'écart je souhaite que ce dernier soit rempli par l'écart entre les deux quantités (qté théorique- qté physique) et je voulais que ça se soit par un événement javascript(onFocus, onBlur..) et non pas à l'aide d'un bouton submit puisque je vous pas faire une redirection vers une autre page html.
Svp aidez moi c'est urgent!!!
Merci d'avance.
20/05/2014, 15h50
SpaceFrog

Un exercice à faire ?:aie:
20/05/2014, 15h58
W.ided123

Non c'est plutôt pour mon projet de fin d'études. J'espère bien que vous pouvez m'aider.
20/05/2014, 16h11
SpaceFrog

Tout est là
http://javascript.developpez.com/faq/javascript/

et plus précisément ici http://javascript.developpez.com/faq...age=formChamps
20/05/2014, 16h58
W.ided123

Puisque je suis encore débutante en PHP et javascript, svp est ce que vous pouvez m'aider avec un bout de code qui peut me résoudre ce problème.
21/05/2014, 07h54
NoSmoking

Bonjour,

Citation:

Puisque je suis encore débutante en PHP et javascript, svp est ce que vous pouvez m'aider avec un bout de code qui peut me résoudre ce problème.

:recherch:
- http://www.developpez.net/forums/d14...eau-dynamique/
- http://www.developpez.net/forums/d11...ue-javascript/
...et surement bien d'autres...
21/05/2014, 08h41
Bovino

Citation:

Envoyé par W.ided123

c'est plutôt pour mon projet de fin d'études

Citation:

Envoyé par W.ided123

je suis encore débutante en PHP et javascript

Tu débutes par un PFE ? :weird:

Bonjour.

Onkeyup devrait faire l'affaire, si j'ai bien compris... (un problème clairement énoncé, c'est la moitié du travail )

Dans le code ci dessous, l'écart s'affiche au fur et à mesure de la saisie :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<html><head> 
     <script type="text/javascript">
     function soustraction()
          {
     entree = document.getElementById("qtty").value ;
     if ( isNaN(entree) == true)
          alert(entree + " n'est pas numérique !") ;
     else
          document.getElementById('rslt').innerHTML = 1 - entree ;
          }
     </script>
</head>
<body onload="document.getElementById('qtty').focus()"> 
     <FORM>
          <label>Entrez une quantité (Ex: 0.45) :</label>
          <input id="qtty" type="text" maxlength="8" onkeyup="soustraction()">
          <br>
          <label>Ecart avec "1" :</label>
          <span id='rslt'></span>
     </FORM>
</body></html>

PS : Utilisez le lien "Visualisez dans une fenêtre à part" (chez moi le scrollbar de la fenêtre de code est capricieux !)

Merci pour Iakou pour votre réponse, mon problème c'est que je voulais que ça soit dans un tableau qui contient déjà des données récupérées à partir de ma base des données. Voici le code du tableau y inclus les champs que je veux qu'il ya l'appel des fonctions :

Code:

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
<table name="tbl" id="tbl">
               <tr>
                   <th>Bon d'entr&eacutee N&deg;  </th>
                   <th> Date Entr&eacutee </th><th>Code Article</th>
                   <th>Carte</th><th>Numero de S&eacuterie </th>
                   <th> Emplacement </th>
                   <th>  Famille </th>
                   <th> Designation </th>
                   <th> Destination </th>
                   <th> Date Sortie </th>
                   <th> Bon de sortie N&deg; </th> <th> Quantit&eacute th&eacuteorique </th> <th> Quantit&eacute physique</th> <th>Ecart</th>
               </tr>
           <?php
           while($donnees = mysql_fetch_array($req))
           { ?>
               <tr>
                   <td width="80">
                   <?php echo $donnees['Numero_Bon_Entree']; ?>
                   </td>
 
                   <td>
                   <?php echo $donnees['Date_Entree']; ?>
                   </td>
 
                   <td>
                   <?php echo $donnees['Code_Article']; ?>
                   </td>
                   <td>
                   <?php echo $donnees['Carte']; ?></td> <td>
                   <?php echo $donnees['Numero_Serie']; ?>
                   </td>
                   </td>
                    <td>
                   <?php echo $donnees['Emplacement']; ?>
                   </td>
                    <td>
                   <?php echo $donnees['Famille']; ?>
                   </td>
 
                    <td>
                   <?php echo $donnees['Designation']; ?>
                   </td>
       <td> <?php echo $donnees['Destination']; ?> </td>
       <td> <?php echo $donnees['Date_Sortie']; ?> </td>
       <td width="80"> <?php echo $donnees['Numero_Bon_Sortie']; ?> </td> <td> 0 </td> // quantité théorique puisque sortie donc c'est un zero et si n'est pas sortie donc c'est 1
 
 
 
<td> <input type="text" size="4" name="qte_physique[]" id="qte_physique[]"> </td> // quantité physique à saisir
<td> <input type="text" size="4" name="ecart[]" value="//appel de la fonction"> </td>
 
 
               </tr> </table>

j'ai fait ce code mais le problème qu'il marche seulement pour la première ligne:

Code:

1
2
function calcul(){
          document.getElementById('ecart').value =document.getElementById('qte_theorique').value-document.getElementById('qte_physique').value;}

et c'est dans le onfocus que j'appelle cette fonction

<input type="text" size="4" name="ecart" id="ecart" onfocus="calcul()">

Donc je pense que le problème est un problème de récupération des données

SVp Aide c'est urgent !!!!

21/05/2014, 18h42
iakou

Bonsoir.

Ce n'est plus tout a fait ce que vous demandiez au début...

J'ai ouvert votre code avec IE, et j'ai bien vu les entêtes de colonne, qui vont de "bon d'entrée" à l'extrême gauche jusque "écart" à droite.

Après requête SQL, vous allez remplir votre tableau (j'ai remarqué une instruction while), et je suppose que vous devez générez à chaque ligne un input "QTE" et un "Ecart" : C'est effectivement du Web dynamique !

Hélas mes connaissances en la matière sont pauvres, et je préfère m'abstenir que de dire des bêtises...

Cdlt

Bonsoir W.ided123,

la règle sur le forum JavaScript c'est de ne pas poster le code serveur : ça ne nous intéresse pas. Mais bon, là on comprend ce que c'est censé générer, donc ça va.

La première info qu'il te manque, c'est qu'on ne peut pas faire appel à du JavaScript directement dans l'attribut value d'un input. Il faut que tu fasses les choses en 2 temps. D'abord tu génères le code HTML+JavaScript sur ton serveur ; ensuite le code HTML arrive sur le poste client, et là le code JavaScript s'exécute.

Seconde info, tu te compliques la vie avec les id. D'abord parce qu'un id doit être unique dans la page. S'il y en a plusieurs fois le même, il n'y a aucune garantie que ton script se comporte correctement. Ensuite parce que tu n'as pas besoin d'id. En fait, ton script ne peut agir que s'il a une donnée physique à lire. Et cette donnée physique est remplie par l'utilisateur. Il faut donc attendre une action de l'utilisateur (un évènement clavier dans l'input qui va bien) pour lancer le script.

Pour surveiller les évènements clavier, tu as plusieurs stratégies :

ajouter un attribut onkeyup à chacun des champs « qte_physique », directement dans le code HTML. Mais ce n'est pas élégant, ça alourdit le code HTML et ça éparpille le code JS : mauvais pour la maintenance.
utiliser addEventListener autant de fois qu'il y a de champs : c'est déjà mieux, mais pas optimal, on peut faire encore mieux.
Utiliser une seule fois addEventListener sur le tableau entier, et regarder l'élément qui a émis l'évènement clavier. Ça s'appelle faire de la délégation d'évènement et c'est pas franchement compliqué.

Pour rendre la sélection des champs de saisie à la fois plus pratique et plus efficace, ajoutons des classes dessus :

Code:

<input type="text" size="4" class="qte_physique" />

(Note : je te donne tous ces bouts de code en HTML mais évidemment il faudra que tu les adaptes dans ton code PHP.)

Tu noteras que j'ai retiré l'attribut name : puisque tu n'as pas de formulaire dans la page, il ne sert à rien. À propos, c'est un champ pour saisir des nombres, non ? Passons-le en type number :

Code:

<input type="number" min="0" max="99" step="1" class="qte_physique" />

L'autre champ, celui qui doit recevoir le résultat, n'est pas censé être modifié par l'utilisateur. Ajoutons-lui l'attribut readonly :

Code:

<input type="text" readonly="readonly" size="4" class="ecart" />

Je lui ai également retiré son name.

Pour faire ton calcul tu as également besoin de la quantité théorique, mais d'après ton code HTML cette valeur se trouve directement dans un <td> et pas dans un <input>. Pas de problème, on n'a qu'à ajouter une classe sur le <td> :

Code:

<td class="qte_theorique">

Le seul détail c'est qu'on utilisera .textContent au lieu de .value.

Certains développeurs web sont partisans de mettre les balises <script> tout en bas du <body>. On va faire comme ça pour simplifier un peu. Sinon il faut utiliser un autre gestionnaire d'évènement pour être sûr que le DOM est prêt quand le script commence.

Au fait, tu connais la fonction document.querySelector ? Elle est vraiment magique ! Elle te permet d'utiliser des sélecteurs comme en CSS pour atteindre un élément de la page.
Code:

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 // on commence par obtenir une référence sur le tableau var tableau = document.querySelector("table"); // et là on fait notre délégation d'évènement tableau.addEventListener("keyup", function( event ){ // on examine la cible de l'évènement var cible = event.target; if (cible.className === "qte_physique") { // bingo // à présent il faut chercher le champ à remplir dans la même ligne du tableau // on commence par remonter jusqu'au <tr> var parent = cible; do { parent = parent.parentNode; } while (parent.tagName !== "TR"); // et on utilise la fonction magique var ecart = parent.querySelector(".ecart"); var qte_theorique = parent.querySelector(".qte_theorique"); // il n'y a plus qu'à calculer // on utilise parseInt pour s'assurer que les chaînes sont correctement converties en nombres // le 10 signifie qu'on veut les résultats en base décimale ecart.value = parseInt(qte_theorique.textContent, 10) - parseInt(cible.value, 10); } });

22/05/2014, 12h40
W.ided123

Merci infiniment Watilin, j'ai suivi tout les étapes que tu m'as indiqué mais ça marche pas encore et je vois pas qu'est ce qu'il faut faire?
22/05/2014, 12h42
SpaceFrog

Je vois....
Je vois....
Ha ben mince plus de boule de cristal !
22/05/2014, 14h59
Watilin

Citation:

Envoyé par W.ided123

ça marche pas encore

Tu peux nous montrer à quoi ressemble ton code à présent ? Le code généré s'il-te-plaît (Ctrl+U dans ton navigateur). Ouvre aussi ta console (F12) et regarde s'il y a des messages d'erreur.

J'ai oublié de préciser mais ça me paraissait évident : la façon de faire que je t'ai conseillée repose sur keyup alors que ta première tentative reposait sur focus. Avec ma version, pour qu'il se passe quelque chose il faut que tu tapes du texte dans le champ qte_physique. As-tu essayé comme ça ?
22/05/2014, 16h49
W.ided123

Merci pour tes conseils très judicieux.
Il y a une erreur qui m'affiche : Uncaught typeError: Cannot read proprety 'addEventListener' of NULL
22/05/2014, 20h02
Watilin

Tu as bien mis le script tout en bas du <body> ?
À tout hasard, sous quel navigateur tu développes (nom + version) ?