Variable champ texte

27 avr. 2007, 23:42

Bonjour,

Je voudrais réaliser ce petit script :

En gros :

Quand on entre une valeur dans un champ texte, cette valeur est multipliée par un nombre, le resultat est intantanement affiché.

J'ai cherché sur google mais sans succès.

Merci

28 avr. 2007, 00:56

Une solution peut être envisagée comme ça:

Code : Tout sélectionner

<script>
//tableau des cotes
var cotes = new Array();


//fonction qui ajoute des cotes dans le tableau "cotes"
function ajouteCote(cote){
   //nouveau rang  (le premier=0)
  var i = cotes.length; //compte la taille du tableau
  //ajout
  cotes[i] = cote;
}

//fonction qui calcule la somme des cotes du tableau "cotes"
function totalCotes(){
  var somme = 0;
  //calcule le cumul des cotes enregistrés dans le tableau
   for (i=0; i<cotes.length; i++) somme += cotes[i];
   //mettre à jour le champ du document
   document.getElementById("totalCotes").innerHTML = somme;
   //retourne la somme pour d'autres traitements
   return somme;
}

//fonction appelée au chagement du montant
function calculerPour(montant){
    //le montant est affecté au total
    document.getElementById("totalMontant").innerHTML = "(€) " + montant;
   
    //les gains possibles = montant total * total des cotes (voir fonction)
    document.getElementById("gainsPossibles").innerHTML = "(€) " + montant*totalCotes(); 
}

//Au démarrage de la page 
function initialiser(){
    //on ajoute pour l'exemple la cote "2.40"
    ajouteCote (2.40);
	//on met à jour les champs calculés
	calculerPour(0);
}

</script>

<body onLoad="initialiser()">
...
<table>
<tr><td>Total des cotes </td><td  id="totalCotes"></td></tr>
<tr><td>Montant<input id="montant" value="0" onChange="calculerPour(this.value);"></td></tr>
<tr><td>Montant total </td><td  id="totalMontant"></td></tr>
<tr><td>Possibles gains </td><td  id="gainsPossibles"></td></tr>
</table>
</body>

C'est une piste ...

28 avr. 2007, 01:23

pas mal, mais il faut appuyer sur entrer pour afficher le calcul

Edit :

J'ai trouvé le moyen pour ne plus appuyer sur entré pour le mettre à jour :

Code : Tout sélectionner

<script type="text/javascript">
  <!--
    function changecote(obj, cote)
    {
      valeur = obj.value;
      s = Math.floor(valeur*cote);
      document.getElementById('gain').innerHTML = s;
    }
  -->
  </script>

<body>
<form method="post" action="paris_validation.php" onsubmit="return checkmise(this);">
    
  <div class="PariTotalGauche"> </div>
    <div class="PariTotalDroite">1.55<br/>
    <input class="login" size="5" name="mise" value="0" onchange="changecote(this, 1.55)"/><br/>
    <span id="gain">0</span></div><br/>

<input class="bouton" type="submit" value="Parier"/>    </form>
    </body>

28 avr. 2007, 02:52

Tu peux ajouter d'autres déclencheurs pour mettre à jour le montant plus souvent. Par exemple

Code : Tout sélectionner

<input id="montant" value="0" onKeyUp="calculerPour(this.value);" onKeyDown="calculerPour(this.value);" onKeyPress="calculerPour(this.value);" onChange="calculerPour(this.value);">

Tu peux y aller plein pot avec onMouseOver, onMouseOut, onClick, etc...

28 avr. 2007, 03:29

Nickel !!!

Je place le script pour ceux qui veulent :

Code : Tout sélectionner

<script type="text/javascript">
  <!--
    function changecote(obj, cote)
    {
      valeur = obj.value;
      s = (valeur*cote).toFixed(2);
      document.getElementById('gain').innerHTML = s;
    }
  -->
  </script>
<form method="post" action="paris_validation.php" onsubmit="return checkmise(this) ;">
    
<div class="PariTotalGauche"> </div>
<div class="PariTotalDroite">1.55<br/>
<input name="varchamp" type="text" id="varchamp" size="6" maxlength="6" onKeyUp="changecote(this, cote)" onchange="changecote(this, cote)"><br/>
<span id="gain">0</span></div><br/>

<input class="bouton" type="submit" value="Parier"/>    </form>

Variable champ texte

Qui est en ligne