<?php 

<h2>[C2G]Widget de calcul de la puissance des mages élémentaires</h2>



<form name="calculPuissanceForm" id="calculPuissanceForm" method="post">

    <p class="noLabel">

        <label for="planeteCombat">Sur quelle planète se déroule le combat :</label>

        <select name="planeteCombat" id="planeteCombat">

            <option value="aquablue">Aquablue</option>

            <option value="desertica">Desertica</option>

            <option value="galactica">Galactica</option>

            <option value="vertana">Vertana</option>

            <option value="volcano">Volcano</option>

        </select>

    </p>

    

    <p>

        <label for="nbMageMetal">Nombre de mage(s) M&eacute;tal</label> : 

        <input type="text" name="nbMageMetal" id="nbMageMetal" value="0" />

    </p>

    

    <p>

        <label for="nbMageEau">Nombre de mage(s) Eau</label> : 

        <input type="text" name="nbMageEau" id="nbMageEau" value="0" />

    </p>

    

    <p>

        <label for="nbMageTerre">Nombre de mage(s) Terre</label> : 

        <input type="text" name="nbMageTerre" id="nbMageTerre" value="0" />

    </p>

    

    <p>

        <label for="nbMageFeu">Nombre de mage(s) Feu</label> : 

        <input type="text" name="nbMageFeu" id="nbMageFeu" value="0" />

    </p>

    

    <p>

        <label for="nbMageBois">Nombre de mage(s) Bois</label> : 

        <input type="text" name="nbMageBois" id="nbMageBois" value="0" />

    </p>

    

    <p>

        <label for="totalDegatsMages">D&eacute;gats des mages</label> : 

        <input type="text" name="totalDegatsMages" id="totalDegatsMages" value="0" />

    </p>

</form> 

<?php 

// Classe de calcul

CalculPuissance = function(){



    // Variables

    this.x                            = 0;

    this.y                            = 0;

    this.bonus                        = 0;

    this.niveauControleElementaire    = 0;

    this.planeteCombat                = 0;

    this.nbMageMetal                = 0;

    this.nbMageEau                    = 0;

    this.nbMageTerre                = 0;

    this.nbMageFeu                    = 0;

    this.nbMageBois                    = 0;

    this.totalDegatsMages            = 0;

    

    // Méthodes    

    CalculPuissance.setY = function(){

        if(this.x != 0){

        

            switch(this.x){

            

                case 1:

                    y = 4;

                    break;

                case 2:

                    y = 5;

                    break;

                default:

                    y = 3;

                    break;                

            }

            

            return y;

        }else{

            

            alert('Error : x not defined');

        }

    }

    

    CalculPuissance.setPlaneteCombat = function(selectPlaneteCombat){



        this.planeteCombat = selectPlaneteCombat.value;

        alert(this.planeteCombat);

    }



    CalculPuissance.getDommages = function(dommages){



        document.getElementById('totalDegatsMages').value = dommages;

    }

}



var CalculPuissance = new CalculPuissance(); 

<?php 

<input type="text" onKeyUp="CalculPuissance.getDommages(this.value)" name="nbMageMetal" id="nbMageMetal" value="0" />