Récupérer et comparer les valeurs saisies dans deux INPUT

**demcoul** · 26/07/2019, 13h51

Bonjour tout le monde,

Je dois saisir dans un formulaire deux valeurs d'un intervalle. Je voulais faire un test de comparaison des deux valeurs afin de contrôler si la valeur de la borne supérieure de l'intervalle n'est pas inférieure à celle de la borne inférieure et afficher un message.
Après avoir fait des recherches, j'ai fait ce-ci :

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
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Gestion</title>
<script type="text/javascript" src="ordeP.js"></script>
<script src="js/ajax.js" type="text/javascript"></script>
<link rel="stylesheet" media="screen" type="text/css" href="style.css" />
</head>
<body>
.........
<td><input type="text" name="borneinf" id="borneinf" size="20" placeholder="borne inférieure" /></td>
<td><input type="text" name="bornesup" id="borneinf" size="20" placeholder="borne supérieure" /></td>
...................
<p id="answer"></p>
.................
 
<%@ include file="/WEB-INF/piedpage.jsp"%>
<script>
//ajout du 26/07/2019
        var valeur1=document.getElementById("borneinf");
        var valeur2=document.getElementById("bornesup");
        valeur2.addEventListener("input", verifier_valeur);
        function verifier_valeurs(){
                var v1=parseFloat(valeur1.value);
                var v2=parseFloat(valeur2.value);
                if(v2<=v1) 
                         document.getElementById("answer").innerHTML="La borne supérieure doit être plus grande que la borne inférieure !";
}
</script>
</body>
</html>

Le message ne s'affiche pas après la saisie des valeurs dans les deux INPUT.

Guidez moi, s'il vous plait.

**ProgElecT** · 26/07/2019, 22h54

Salut
<td><input type="text" name="bornesup" id="borneinf" size="20" placeholder="borne supérieure" /></td> l'id n'est pas bon
<td><input type="text" name="bornesup" id="bornesup" size="20" placeholder="borne supérieure" /></td> là c'est mieux

Code :

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

1
2
        valeur2.addEventListener("input", verifier_valeur);
        function verifier_valeurs(){// <***********  le s du nom de la fonction

Code :

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

1
2
        valeur2.addEventListener("input", verifier_valeurs);// <********** là c'est mieux
        function verifier_valeurs(){

Invité · 27/07/2019, 11h09

Bonjour,

On peut ici utiliser des <input type="number" />.
On peut :

régler le pas (step) en fonction du nombre de décimale voulu
définir des valeurs min et max

Code HTML :

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

1
2
3
<input type="number" name="borneinf" id="borneinf" size="20" placeholder="borne inférieure" step="0.01" min="" max="" />
<input type="number" name="bornesup" id="bornesup" size="20" placeholder="borne supérieure" step="0.01" min="" max="" />
<p id="answer"></p>

Il faut aussi activer la fonction sur la borne inf, qui peut être remplie ou modifiée APRES la borne sup.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
"use strict";
const valeur1 = document.getElementById("borneinf");
const valeur2 = document.getElementById("bornesup");
const answer = document.getElementById("answer");
valeur1.addEventListener("input", verif_infsup);
valeur2.addEventListener("input", verif_infsup);
 
function verif_infsup()
{
  let v1 = parseFloat(valeur1.value);
  let v2 = parseFloat(valeur2.value);
  answer.innerHTML = (v1!='' && v2!='' && v2<=v1)? "La borne supérieure doit être plus grande que la borne inférieure" : "";    
}

**demcoul** · 30/07/2019, 12h13

Merci à vous.

Je testerai votre proposition, car entre temps, j'avais eu une solution en passant par onClick() sur un bouton.
Est ce nécessaire encore de la mettre ici ?

**demcoul** · 30/07/2019, 12h46

Ma solution trouvée :

Code HTML :

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

1
2
3
4
5
6
7
<td><input type="text" name="borneinf" id="borneinf" size="20" placeholder="borne inférieure" /></td>
<td><input type="text" name="bornesup" id="bornesup" size="20" placeholder="borne supérieure" /></td>
 
<td align="center" colspan="2">
<input type="button" name= "listerStats1" id="listerStats1" value="Stats Intervalles Superficies" 
onclick ="check();"/>
</td>

JS :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
		//ajout du 26/07/2019
	function check(){
		var v2=parseFloat(document.getElementById("bornesup").value);
		var v1=parseFloat(document.getElementById("borneinf").value);
		if(v2<=v1) alert("La borne supérieure doit être plus grande que la borne inférieure !");
		else {
			window.location.href='StatsParcellesIntervalesSurface?param1=' + document.getElementById("idlot").value +
			'&param2=' + document.getElementById("borneinf").value + '&param3='+ document.getElementById("bornesup").value +
			'&param4=' + document.getElementById("positionparcelle").value + '&param5=' + document.getElementById("refusage").value;
		}
			 //document.getElementById("answer").innerHTML="La borne supérieure doit être plus grande que la borne inférieure !";
	}
</script>

Récupérer et comparer les valeurs saisies dans deux INPUT

JavaScript

Discussions similaires

Partager

Partager