Vérifier la somme de plusieurs input number en js

Version imprimable

Bonjour et merci avant tout pour la lecture de mon message. Après plusieurs recherches, je ne trouve pas de réponse c'est pourquoi je me permets de solliciter vos connaissances. Voici mon soucis:

J'ai un formulaire du type
Code:

1 2 3 4 5 6 <fom method="post ...."> <input type="number" step="1" min="0" value="0" id="qte-a" name="qte-a"> <input type="number" step="1" min="0" value="0" id="qte-b" name="qte-b"> <input type="number" step="1" min="0" value="0" id="qte-c" name="qte-c"> <input type="submit" value="go"> </form>
Je dois avoir a minima le total de 1 (si on additionne qte-a + qte-b 1+ qte-c) pour valider le formulaire.

Si le total est >= 1, alors on affiche le bouton submit.

Si le total est = 0, alors le bouton submit est 'disbled' ou pas apparent.

J'aimerai vérifier ces conditions en javascript.

J'espère que cela à été clair pour vous :)

hello, je te propose la solution suivante

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//au changement de l'un des input, on execute la function checkTotal()
document.querySelectorAll('input[type="number"]').forEach(input => {
	input.addEventListener('change', checkTotal);
});
 
function checkTotal() {
//on prend tous les inputs, et on applique une function de reduce() qui permet de reduire un tableau (ici les inputs) en une seule valeure numerique de sortie
	const total = [...document.querySelectorAll('input[type="number"]')].reduce((acc,input) => {
    return acc + parseInt(input.value);
  }, 0);
	if(total < 1) {
  document.querySelector('input[type="submit"]').setAttribute('disabled','');
  } else {
  document.querySelector('input[type="submit"]').removeAttribute('disabled');
  }
}
// on execute la verification (vu que par default, on bouton est actif
checkTotal();

24/03/2023, 10h34
melka one

dans cette configuration il y a intérêt qu'il n'y ai qu'un formulaire