Calcul automatique de deux champs liés

**madinadiouf** · 08/07/2021, 18h29

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

**ProgElecT** · 08/07/2021, 19h05

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.

**ProgElecT** · 08/07/2021, 22h37

Re

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

Code html :

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
<!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>

**madinadiouf** · 09/07/2021, 17h35

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.

Calcul automatique de deux champs liés

JavaScript

Vue hybride

Discussions similaires

Partager

Partager