Coder un élément d'option ( cases à cocher ) avec un nombres à répartir.

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Coder un élément d'option ( cases à cocher ) avec un nombres à répartir.

Message par Mysticals le Jeu 10 Oct 2013 - 17:20

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.


Dernière édition par Mysticals le Ven 11 Oct 2013 - 20:19, édité 1 fois

Mysticals
***

Masculin
Messages : 194
Inscrit(e) le : 25/12/2012

http://www.the-elder-scrolls-by-mysticals.com/
Mysticals a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Coder un élément d'option ( cases à cocher ) avec un nombres à répartir.

Message par Scoubifitz le Ven 11 Oct 2013 - 1:40

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

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>

Scoubifitz
+ Hyperactif +

Masculin
Messages : 3539
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Coder un élément d'option ( cases à cocher ) avec un nombres à répartir.

Message par Mysticals le Ven 11 Oct 2013 - 13:12

Parfait, et facilement adaptable, merci Scoubifitz !

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.
Pour afficher l'alerte a tout les coups, il me suffit de changer la valeur <"0", mais dans le contenu, le code si dessus n'est pas pris en compte, surement parce qu'il est externe à la balise </script>

Code:
document.post.totalcoche.value = total;
if (total<"0") {alert("Contenu");}
}
Y aurais une astuce pour intégrer une fonction du script dans le script lui même?

Mysticals
***

Masculin
Messages : 194
Inscrit(e) le : 25/12/2012

http://www.the-elder-scrolls-by-mysticals.com/
Mysticals a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Coder un élément d'option ( cases à cocher ) avec un nombres à répartir.

Message par Scoubifitz le Ven 11 Oct 2013 - 14:46

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

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>
donc , tant que le nombre sera positif (supérieur ou égal à zéro) vous aurez une alerte avec ce nombre ,
sinon vous aurez une autre alerte .

Scoubifitz
+ Hyperactif +

Masculin
Messages : 3539
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Coder un élément d'option ( cases à cocher ) avec un nombres à répartir.

Message par Mysticals le Ven 11 Oct 2013 - 14:58

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");
Une dernière question, comment personnaliser l'alerte? La taille, le background, etc. J'ai essayer avec une div et le css mais du coup le script ne fonctionne plus. Mettre les changements directement dans le Script?

Mysticals
***

Masculin
Messages : 194
Inscrit(e) le : 25/12/2012

http://www.the-elder-scrolls-by-mysticals.com/
Mysticals a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Coder un élément d'option ( cases à cocher ) avec un nombres à répartir.

Message par Scoubifitz le Ven 11 Oct 2013 - 16:59

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>

Scoubifitz
+ Hyperactif +

Masculin
Messages : 3539
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Coder un élément d'option ( cases à cocher ) avec un nombres à répartir.

Message par Mysticals le Ven 11 Oct 2013 - 17:12

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.

Mysticals
***

Masculin
Messages : 194
Inscrit(e) le : 25/12/2012

http://www.the-elder-scrolls-by-mysticals.com/
Mysticals a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Coder un élément d'option ( cases à cocher ) avec un nombres à répartir.

Message par Scoubifitz le Ven 11 Oct 2013 - 17:33

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 :

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>

Scoubifitz
+ Hyperactif +

Masculin
Messages : 3539
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Coder un élément d'option ( cases à cocher ) avec un nombres à répartir.

Message par Mysticals le Ven 11 Oct 2013 - 20:19

Parfait. Encore merci Scoubifitz !

Mysticals
***

Masculin
Messages : 194
Inscrit(e) le : 25/12/2012

http://www.the-elder-scrolls-by-mysticals.com/
Mysticals a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum