11540 sujets

JavaScript, DOM et API Web HTML5

Bonjour a tous,

je voudrais additionner un nombre de nuits en fonction du nombre de case a cocher. Cela fonctionne normalement si je met le meme name dans les inputs.
Avec mon code je serais peut etre plus clair:
 <script language="JavaScript">
function calcul() {
var total = 0;

// Permet de ne pas declarer le nombre d'elements du formulaires
var nb;
nb = document.devis.NUIT20.length;
total = eval(document.devis.prix_base.value);

// Evalue toutes les cases cochees
for( i = 0 ; i < nb ; i++ ) {
if (document.devis.NUIT20[i].checked) total = total + eval(document.devis.NUIT20[i].value);
}


// Affiche le total de toutes les cases cochees
document.devis.prix_total.value = total;
}
</script>
	
	
</head>

<body>
<form name="devis">
<input type="hidden" name="prix_base" value="0">

<input name="NUIT20" type="checkbox" value="1" onclick="calcul()"> <br />
<input name="NUIT21" type="checkbox" value="1" onclick="calcul()">  <br />
<input name="NUIT22" type="checkbox" value="1" onclick="calcul()">  <br />
<input name="NUIT23" type="checkbox" value="1" onclick="calcul()">  <br />
<input name="NUIT24" type="checkbox" value="1" onclick="calcul()">  <br />
<input name="NUIT25" type="checkbox" value="1" onclick="calcul()">  <br />

<input type="text" disabled="disabled" name="prix_total" value="0" size="1">  <br />
<input type="reset" value="Effacer">
</form>
</body>
</html>


Je dois obligatoire ment conserver les names de mes inputs NUIT20, NUIT21 etc mais le soucis c'est que ca ne compte plus.
si je mets les memes name cela fonctionne

Est ce que quelqu'un pourrait m'aider?

Merci bcp

jeje78[/i][/i]
Conseils :
- Ce n'est pas une bonne habitude d'accéder aux éléments en descendant depuis le document. Je te conseille de mettre des attributs id à tes éléments, puis d'y accéder par document.getElementById(<id>);
- Tes eval() sont improprement utilisés, si ton but est de transformer les value en entier/flotant, utilises parseFloat() qui est fait pour ça;

Pour revenir à ton problème : il faut que tu accèdes aux éléments input, mais uniquement ceux qui t'intéresses. On va donc commencer par les encadrer par un div que je baptise "divMesNuits"
<div id="divMesNuits">
<input name="NUIT20" ...
<input name="NUIT21" ...
...
<input name="NUIT25" ...
</div>

Dans ta fonction, il ne reste plus qu'à récupérer ce div et ses inputs :
var divMesNuits = document.getElementById("divMesNuits");
var inputsMesNuits = divMesNuits.getElementsByTagName("input");

Et à les parcourir/sommer :
[i]for (var i=0; i<inputsMesNuits.length; i++) {
  if (inputsMesNuits[i].checked) total += parseFloat(inputsMesNuits[i].value);
}

Voilà Smiley smile [/i][/i][/i]
Modifié par chadom (28 May 2008 - 00:02)