Coder un élément d'option ( cases à cocher ) avec un nombres à répartir.
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
Coder un élément d'option ( cases à cocher ) avec un nombres à répartir.
Bonsoir tout le monde.
Je vous explique. J'ai une page html déjà bien complète pour la création d'une classe de personnage, avec des listes des compétences à choisir. Et je voudrais que le lecteur puisse simplement simuler ses choix.
En gros, nous avons :
- 15 points à répartir.
- Des choix ( donc des cases ) qui utilisent des nombres différents de points.
Je voudrais qu'en cochant ces cases, le décompte du total de 15 ce fasse et s'arrête à 0, bloquant les cochages. Le lecteur sais donc combien de points il aurais à répartir, combien il lui en reste, etc...
En html pur, je ne suis pas sur que ce soit réalisable, mais je suis preneur pour du Javascript éventuellement.
Pour exemple de codage ( je m'adapterais pour la suite ) :
[ 15 ] points restant à répartir.
Choix A [ ] 2 points
Choix B [ ] 5 points
Choix C [ ] 3 points
Si l'on coche le choix A et C, nous aurons :
[ 10 ] points restant à répartir.
Choix A [X] 2 points
Choix B [ ] 5 points
Choix C [X] 3 points
J'ai trouvé ce qu'il faut pour de simple cases à cocher, mais de la à décompter, non... J’espère que j'ai bien exprimé ma demande. Merci d'avance.
Je vous explique. J'ai une page html déjà bien complète pour la création d'une classe de personnage, avec des listes des compétences à choisir. Et je voudrais que le lecteur puisse simplement simuler ses choix.
En gros, nous avons :
- 15 points à répartir.
- Des choix ( donc des cases ) qui utilisent des nombres différents de points.
Je voudrais qu'en cochant ces cases, le décompte du total de 15 ce fasse et s'arrête à 0, bloquant les cochages. Le lecteur sais donc combien de points il aurais à répartir, combien il lui en reste, etc...
En html pur, je ne suis pas sur que ce soit réalisable, mais je suis preneur pour du Javascript éventuellement.
Pour exemple de codage ( je m'adapterais pour la suite ) :
[ 15 ] points restant à répartir.
Choix A [ ] 2 points
Choix B [ ] 5 points
Choix C [ ] 3 points
Si l'on coche le choix A et C, nous aurons :
[ 10 ] points restant à répartir.
Choix A [X] 2 points
Choix B [ ] 5 points
Choix C [X] 3 points
J'ai trouvé ce qu'il faut pour de simple cases à cocher, mais de la à décompter, non... J’espère que j'ai bien exprimé ma demande. Merci d'avance.
Dernière édition par Mysticals le Ven 11 Oct 2013 - 20:19, édité 1 fois
Invité- Invité
Re: Coder un élément d'option ( cases à cocher ) avec un nombres à répartir.
bonsoir,
en javascript c'est possible .
je vous mets un exemple , j'ai juste mis une alerte en cas de dépassement (à la place de chercher comment bloquer les cases à cocher ) :
en javascript c'est possible .
je vous mets un exemple , j'ai juste mis une alerte en cas de dépassement (à la place de chercher comment bloquer les cases à cocher ) :
- Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Formulaire de calcul</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8;" />
<script type="text/javascript">
function calcul() {
var total = 15;
// Meme nombre que la valeur du champ "totalcoche"
var nb = document.post.coche.length;
// Evalue toutes les cases cochees
for( i = 0 ; i < nb ; i++ ) {
if (document.post.coche[i].checked)
total = total - eval(document.post.coche[i].value);
}
// Calcule les cases cochees
totalcoche = total;
document.post.totalcoche.value = totalcoche;
// Affiche le calcul de toutes les cases cochees
document.post.totalcoche.value = total;
if (total<"0") {alert("vous n'avez plus assez de points");}
}
</script>
</head>
<body>
<form name="post">
choisissez les options qui vous intéressent :<br /><br />
<input name="coche" type="checkbox" value="1" onclick="calcul()"> 1 point<br />
<input name="coche" type="checkbox" value="2" onclick="calcul()"> 2 points<br />
<input name="coche" type="checkbox" value="3" onclick="calcul()"> 3 points<br />
<input name="coche" type="checkbox" value="4" onclick="calcul()"> 4 points<br />
<input name="coche" type="checkbox" value="5" onclick="calcul()"> 5 points<br />
<input name="coche" type="checkbox" value="6" onclick="calcul()"> 6 points<br />
<input name="coche" type="checkbox" value="7" onclick="calcul()"> 7 points<br />
<input name="coche" type="checkbox" value="8" onclick="calcul()"> 8 points<br />
<input name="coche" type="checkbox" value="9" onclick="calcul()"> 9 points<br />
<input name="coche" type="checkbox" value="10" onclick="calcul()"> 10 points<br /><br />
<input type="text" name="totalcoche" value="15" size="8" readonly="readonly"> nombre de points restants <br /><br />
<input type="reset" value="Effacer">
</form>
</body>
</html>
Re: Coder un élément d'option ( cases à cocher ) avec un nombres à répartir.
Parfait, et facilement adaptable, merci Scoubifitz !
Une petit requête cependant, je voudrais modifier l'alerte en mettant :
Une petit requête cependant, je voudrais modifier l'alerte en mettant :
- Code:
Il vous reste <input style="background:#0D0D0D" type="text" name="totalcoche" value="13" size="1" readonly="readonly"> points a répartir.
- Code:
document.post.totalcoche.value = total;
if (total<"0") {alert("Contenu");}
}
Invité- Invité
Re: Coder un élément d'option ( cases à cocher ) avec un nombres à répartir.
Vous voulez afficher l'alerte à tous les coups ? ça va pas être lassant pour l'utilisateur à la longue ?
Je vous remet la partie script (j'ai oté "eval" du script ) :
sinon vous aurez une autre alerte .
Je vous remet la partie script (j'ai oté "eval" du script ) :
- Code:
<script type="text/javascript">
function calcul() {
var total = 15;
// Meme nombre que la valeur du champ "totalcoche"
var nb = document.post.coche.length;
// Evalue toutes les cases cochees
for( i = 0 ; i < nb ; i++ ) {
if (document.post.coche[i].checked)
total = total - Number(document.post.coche[i].value);
}
// Calcule les cases cochees
totalcoche = total;
document.post.totalcoche.value = totalcoche;
// Affiche le calcul de toutes les cases cochees
document.post.totalcoche.value = total;
if (total>="0") {alert("Il vous reste "+total+" points a répartir.");}
else {alert("Vous avez dépassé le quota");}
}
</script>
sinon vous aurez une autre alerte .
Re: Coder un élément d'option ( cases à cocher ) avec un nombres à répartir.
Après test, j'avoue que c'est assez chiant en fait, je vais faire avec :
- Code:
if (total<"0") {alert("Vous avez utiliser trop de points ( retirez une compétence )");}
if (total<"1") {alert("Vous n'avez plus de points disponibles");
Invité- Invité
Re: Coder un élément d'option ( cases à cocher ) avec un nombres à répartir.
et en mettant le message d'alerte sous les points disponibles et sans ouvrir une popup ?
- Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Formulaire de calcul</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8;" />
<style type="text/css">
<!--
/* mettez ici le style que vous voulez pour le formulaire */
#errormsg span{
background-color:royalblue;color:yellow}
#errormsg strong{
background-color:red;color:white}
-->
</style>
<script type="text/javascript">
function calcul() {
var total = 15;
// Meme nombre que la valeur du champ "totalcoche"
var nb = document.post.coche.length;
// Evalue toutes les cases cochees
for( i = 0 ; i < nb ; i++ ) {
if (document.post.coche[i].checked)
total = total - Number(document.post.coche[i].value);
}
// Calcule les cases cochees
totalcoche = total;
document.post.totalcoche.value = totalcoche;
// Affiche le calcul de toutes les cases cochees
document.post.totalcoche.value = total;
if (total<"1") {
document.getElementById("errormsg").innerHTML = "<span>Vous n'avez plus de points disponibles</span>";}else{document.getElementById("errormsg").innerHTML = "";
return false;}
if (total<"0") {
document.getElementById("errormsg").innerHTML = "<strong>Vous avez utilisé trop de points ( retirez une compétence )</strong>";
return false;}
}
</script>
</head>
<body>
<form name="post">
choisissez les options qui vous intéressent :<br /><br />
<input name="coche" type="checkbox" value="1" onclick="calcul()"> 1 point<br />
<input name="coche" type="checkbox" value="2" onclick="calcul()"> 2 points<br />
<input name="coche" type="checkbox" value="3" onclick="calcul()"> 3 points<br />
<input name="coche" type="checkbox" value="4" onclick="calcul()"> 4 points<br />
<input name="coche" type="checkbox" value="5" onclick="calcul()"> 5 points<br />
<input name="coche" type="checkbox" value="6" onclick="calcul()"> 6 points<br />
<input name="coche" type="checkbox" value="7" onclick="calcul()"> 7 points<br />
<input name="coche" type="checkbox" value="8" onclick="calcul()"> 8 points<br />
<input name="coche" type="checkbox" value="9" onclick="calcul()"> 9 points<br />
<input name="coche" type="checkbox" value="10" onclick="calcul()"> 10 points<br /><br />
Il vous reste <input type="text" name="totalcoche" value="15" size="2" readonly="readonly"> points .
<div id="errormsg" style="height:30px;"></div>
<input type="reset" value="Effacer">
</form>
</body>
</html>
Re: Coder un élément d'option ( cases à cocher ) avec un nombres à répartir.
Non, parce qu'en faite l'idée de départ était très bonne. La popup est utile dans le fait que la personne n'as pas à remonter la page pour savoir ou elle en est au niveau de ses points. Il faut garder cette popup.
Sympa d'avoir plancher sur cette alternative quand même.
Sympa d'avoir plancher sur cette alternative quand même.
Invité- Invité
Re: Coder un élément d'option ( cases à cocher ) avec un nombres à répartir.
Le style de l'alerte dépend directement du navigateur ... donc pour y retoucher ...
on peut aussi forcer le message d'alerte à apparaitre à un endroit de l'écran , quelque soit la longueur de la page , en mettant la div en position fixée.
édit : modif du code :
on peut aussi forcer le message d'alerte à apparaitre à un endroit de l'écran , quelque soit la longueur de la page , en mettant la div en position fixée.
édit : modif du code :
- Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Formulaire de calcul</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8;" />
<style type="text/css">
<!--
/* mettez ici le style que vous voulez pour le formulaire */
#errormsg .plus,.zero,.moins{height:60px;width:300px; padding:20px;position:fixed;top:20px;right:20px;}
#errormsg .plus{
background-color:green;color:yellow}
#errormsg .zero{
background-color:royalblue;color:yellow}
#errormsg .moins{
background-color:red;color:white}
-->
</style>
<script type="text/javascript">
function calcul() {
var total = 15;
// Meme nombre que la valeur du champ "totalcoche"
var nb = document.post.coche.length;
// Evalue toutes les cases cochees
for( i = 0 ; i < nb ; i++ ) {
if (document.post.coche[i].checked)
total = total - Number(document.post.coche[i].value);
}
// Calcule les cases cochees
totalcoche = total;
document.post.totalcoche.value = totalcoche;
// Affiche le calcul de toutes les cases cochees
document.post.totalcoche.value = total;
if (total<"1") {
document.getElementById("errormsg").innerHTML = "<div class='zero'>Vous n'avez plus de points disponibles</div>";}else{document.getElementById("errormsg").innerHTML = "<div class='plus'>il vous reste "+total+" points</div>";}
if (total<"0") {
document.getElementById("errormsg").innerHTML = "<div class='moins'>Vous avez utilisé trop de points <br>( retirez une compétence )</div>";
return false;}
}
</script>
</head>
<body>
<form name="post">
choisissez les options qui vous intéressent :<br /><br />
<input name="coche" type="checkbox" value="1" onclick="calcul()"> 1 point<br />
<input name="coche" type="checkbox" value="2" onclick="calcul()"> 2 points<br />
<input name="coche" type="checkbox" value="3" onclick="calcul()"> 3 points<br />
<input name="coche" type="checkbox" value="4" onclick="calcul()"> 4 points<br />
<input name="coche" type="checkbox" value="5" onclick="calcul()"> 5 points<br />
<input name="coche" type="checkbox" value="6" onclick="calcul()"> 6 points<br />
<input name="coche" type="checkbox" value="7" onclick="calcul()"> 7 points<br />
<input name="coche" type="checkbox" value="8" onclick="calcul()"> 8 points<br />
<input name="coche" type="checkbox" value="9" onclick="calcul()"> 9 points<br />
<input name="coche" type="checkbox" value="10" onclick="calcul()"> 10 points<br /><br />
Il vous reste <input type="text" name="totalcoche" value="15" size="2" readonly="readonly"> points .<br>
<div id="errormsg"> </div>
<input type="reset" value="Effacer">
</form>
</body>
</html>
Re: Coder un élément d'option ( cases à cocher ) avec un nombres à répartir.
Parfait. Encore merci Scoubifitz !
Invité- Invité
Sujets similaires
» Problème HTML avec cases à cocher.
» Rendre obligatoire cocher 5 cases minimum
» [RESOLU] INSCRIPTION - Impossible de cocher les cases
» Souci apparence des cases à cocher lors de l'inscription
» Sélectionner les cases à cocher quand on met les sujets clos à la corbeille
» Rendre obligatoire cocher 5 cases minimum
» [RESOLU] INSCRIPTION - Impossible de cocher les cases
» Souci apparence des cases à cocher lors de l'inscription
» Sélectionner les cases à cocher quand on met les sujets clos à la corbeille
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum