Calcul automatique de deux champs liés

Version imprimable

08/07/2021, 18h29
madinadiouf

Calcul automatique de deux champs liés

Bonjour,

Je dispose de deux champ input nommé quantité et prix unitaire. je veux quand le user saisit ou change sur l'un de ses champ, je déclenche un événement qui met calcule leur produit dans un autre champ input nommé montant.

Quel évènement le mieux choisir ?

Merci d'avance
08/07/2021, 19h05
ProgElecT

Salut

onchange n'est pas déclenché si l'utilisateur fait un coller, onkeypress non plus, donc moi je préfèrerais plutôt oninput.

Re

Je viens de retrouver un programme d'étude des évènements

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
<!DOCTYPE html>
<html lang="fr"> <!-- oninput.html -->
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
		<title>OnInput mieux que OnChange ?</title>
	</head>
	<body>
		<input id="InText" placeholder="5 caractères minimum" oninput="VerifEnter(this)"> Avec oninput<br />
		<input id="ChangeText" placeholder="5 caractères minimum" onchange="VerifEnter(this)"> Avec onchange<br />
		<input id="KeypressText" placeholder="5 caractères minimum" onkeypress="VerifEnter(this)"> Avec onkeypress<br />
    Evenement:<br />
    <div id="result">
    </div>
		<script>
                        let ElemReponse = document.getElementById("result");
                        function VerifEnter(Elem){
                                //console.log(Elem.id);
                                //console.log("LeText.length = "+Elem.value.length);
                                ElemReponse.textContent = "Element conserné: " + Elem.id + ", Nbr. de caractères: " + Elem.value.length;
                                (Elem.value.length <=4) ? Elem.style.backgroundColor='Pink' : Elem.style.backgroundColor='white';
                        }
                </script>
	</body>
</html>

09/07/2021, 17h35
madinadiouf

Bonjour,

Merci pour vos réponses.

En effet, j'opte finalement pour l'évènement oninput().
mais là, je peine pour avoir les valeurs des champs à calculer. En fait c'est un tableau html avec les colonnes article, quantité, prix_unitaire et montant.
Je veux que sur une ligne, quand l'utilisateur saisit une quantité et un prix unitaire, le champ montant se calcule automatiquement.
je sais que ça se fait dans une fonction javascript sur l'évènement oninput() sur les champs quantité et prix unitaire, mais je sais pas comment avoir la valeur du champ prix_unitaire courante et le mettre le résultat dans le champ montant courant sur la même ligne.