Discussion :

[gdam654]

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 html :

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

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

[Doksuri]

hello, je te propose la solution suivante

Code javascript :

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
//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();

[melka one]

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