Formulaire --> Calcul automatique à partir de valeurs récupérées

Formulaire --> Calcul automatique à partir de valeurs récupérées - HTML/CSS - Programmation

Marsh Posté le 09-04-2008 à 10:50:01    

Salut à Tous
 
C'est mon premier post ici, Alors soyez indulgent avec moi si il y post ne respect pas le regles du forum.
 
Je suis en train de faire un formulaire d'inscription qui doit calculer un prix TOTAL en récupérant différentes valeurs de champs texte, des listes déroulantes et des boutonsradio.
 
Le problème c'est qu'il ne veut pas calculer mon Total il met NaN quand je met parseInt pour la somme de me variables dan ma fonction et pour tant tous les valeur n'ont pas un seul bot de texte. C'est peut être une autre chose qui pose problème, je ne sais pas. En Tout cas j'espère que vous pussiez m'aider  SVP!!!
 
JE vous remercie d'avance
 
 
Ma function JS:
 

[spoiler]function fPrix1(vpersonnes){  
if (document.getElementById('4lits').checked==true){
 document.forms['inscription'].ctPrix2.value = "";
 document.forms['inscription'].ctPrix3.value = "";
 document.forms['inscription'].ctPrix4.value = "";
 document.forms['inscription'].ctPrix5.value = "";
 document.forms['inscription'].liste2.value = 0;  
 document.forms['inscription'].liste3.value = 0;
 document.forms['inscription'].liste4.value = 0;
 var vtotal=vpersonnes * 170;
 document.forms['inscription'].ctPrix1.value = vtotal;
 // Calcul et envoi du nombre de personnes inscrites  à la retraite
 var vnbr_personnes=parseInt(document.getElementById('liste1').value);
 vnbr_personnes=vnbr_personnes*50;
 document.forms['inscription'].ctPrix7.value = vnbr_personnes;
 //Recuperation du contenu du champs  prix repas peronnes externe
 var vprix_repas=parseInt(document.getElementById('ctPrix6').value);
 //Calcul big total
 var vBigTotal= (vtotal) + (vprix_repas) + (vnbr_personnes);
 document.forms['inscription'].ctBigTotal.value = vBigTotal;
   }else{
 document.getElementById('4lits').checked=true;
 document.forms['inscription'].ctPrix2.value = "";
 document.forms['inscription'].ctPrix3.value = "";
 document.forms['inscription'].ctPrix4.value = "";
 document.forms['inscription'].ctPrix5.value = "";
 var vtotal=vpersonnes * 170;
 document.forms['inscription'].ctPrix1.value = vtotal;
 // Calcul et envoi du nombre de personnes inscrites  à la retraite
 var vnbr_personnes=parseInt(document.getElementById('liste1').value);
 vnbr_personnes=vnbr_personnes*50;
 document.forms['inscription'].ctPrix7.value = vnbr_personnes;
 //Recuperation du contenu du champ  prix repas peronnes externe
 var vprix_repas=parseInt(document.getElementById('ctPrix6').value);
 //Calcul big total
 var vBigTotal= (vtotal) + (vprix_repas) + (vnbr_personnes);
 document.forms['inscription'].ctBigTotal.value = vBigTotal;
    }
}
[/spoiler]


 
 
Mon code HTML --> form
 

[spoiler]<table width="464" border="0" bordercolor="#000000" cellpadding="0" cellspacing="1" >
    <tr>
      <td width="133" class="t1_form"><span class="txt_form">*</span>Nom</td>
      <td colspan="2"><input name="nom" type="text"  size="20"/></td>
      <td width="57">&nbsp;</td>
      <td width="136">&nbsp;</td>
    </tr>
    <tr>
      <td class="t1_form"><span class="txt_form">*</span>Pr&eacute;nom</td>
      <td colspan="2"><input name="prenom" type="text"  size="20"/></td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td class="t1_form">Pr&eacute;nom du conjoint<br />
        (si il/elle participe)</td>
      <td colspan="2" align="right"><input name="prenom_c" type="text" size="20"/></td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td class="t1_form"><span class="txt_form">*</span>Rue et n&deg;</td>
      <td colspan="2"><input name="rue" type="text"  size="20"/></td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td class="t1_form"><span class="txt_form">*</span>NPA</td>
      <td colspan="2"><input name="npa" type="text" size="10"/></td>
      <td class="t1_form"><span class="txt_form">*</span>Localit&eacute;</td>
      <td><input name="localite" type="text"  size="20"/></td>
    </tr>
    <tr>
      <td class="t1_form">T&eacute;l.</td>
      <td colspan="2"><input name="tel" type="text"  size="20"/></td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td class="t1_form"><span class="txt_form">*</span>E-mail</td>
      <td colspan="2"><input name="email" type="text"  size="20" /></td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td class="t1_form">Paroisse</td>
      <td colspan="2"><input name="paroisse" type="text"  size="20"/></td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td colspan="2">&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td class="txt_form">* champs obligatoires</td>
      <td colspan="2">&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td colspan="3" class="t2_form">veuillez joindre les noms des personnes:</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td colspan="2">&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td class="t1_form">Nom</td>
      <td colspan="2"><input name="nom1" type="text"  size="20"/></td>
      <td class="t1_form">Nom</td>
      <td><input name="nom3" type="text"  size="20"  /></td>
    </tr>
    <tr>
      <td class="t1_form">Pr&eacute;nom</td>
      <td colspan="2"><input name="prenom1" type="text"  size="20"/></td>
      <td class="t1_form">Pr&eacute;nom</td>
      <td><input name="prenom3" type="text"  size="20"  /></td>
    </tr>
    <tr>
      <td class="t1_form">&nbsp;</td>
      <td colspan="2">&nbsp;</td>
      <td class="t1_form">&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td class="t1_form">Nom</td>
      <td colspan="2"><input name="nom2" type="text"  size="20"/></td>
      <td class="t1_form">Nom</td>
      <td><input name="nom4" type="text"  size="20"  /></td>
    </tr>
    <tr>
      <td class="t1_form">Pr&eacute;nom</td>
      <td colspan="2"><input name="prenom2" type="text"  size="20"  /></td>
      <td class="t1_form">Pr&eacute;nom</td>
      <td><input name="prenom4" type="text"  size="20"  /></td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td colspan="2">&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td colspan="4" class="t2_form">Je/nous d&eacute;sire/ons loger dans une chambre &agrave;:</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td colspan="2">&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td class="t2_form"><input name="selection" type="radio" id="4lits" value="4 lits">        
      4lits </td>
      <td colspan="2" class="t1_form"><select name="liste1" class="t2_form" id="liste1" onChange="fPrix1(this.form.elements['liste1'].options[this.form.elements['liste1'].selectedIndex].value)">
        <option value="0">&nbsp;</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
      </select>        
      pers. x 170.- = </td>
      <td class="result_form"><input name="ctPrix1" id="ctPrix1" type="text"  size="5" class="result_form" disabled="disabled" /></td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td class="t2_form"><input type="radio" name="selection" id="2litsd" value="2 lits double">      
      2 lits dble</td>
      <td colspan="2" class="t1_form"><select name="liste2" class="t2_form" id="liste2" onChange="fPrix2(this.form.elements['liste2'].options[this.form.elements['liste2'].selectedIndex].value)">
        <option value="0">&nbsp;</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
      </select>        
      pers. x 170.- = </td>
      <td class="txt_form"><span class="result_form">
        <input name="ctPrix2" id="ctPrix2" type="text"  size="5" class="result_form" disabled="disabled" />
      </span></td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td class="t2_form"><input type="radio" name="selection" id="3lits" value="3 lits"/>      
      3 lits</td>
      <td colspan="2" class="t1_form"><select name="liste3" class="t2_form" id="liste3" onChange="fPrix3(this.form.elements['liste3'].options[this.form.elements['liste3'].selectedIndex].value)">
          <option value="0">&nbsp;</option>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>
        pers. x 195.- = </td>
      <td class="txt_form"><span class="result_form">
        <input name="ctPrix3" id="ctPrix3" type="text"  size="5" class="result_form" disabled="disabled" />
      </span></td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td class="t2_form"><input type="radio" name="selection" id="2lits" value="2 lits"/>
        2 lits</td>
      <td colspan="2" class="t1_form"><select name="liste4" class="t2_form" id="liste4" onChange="fPrix4(this.form.elements['liste4'].options[this.form.elements['liste4'].selectedIndex].value)">
         <option value="0">&nbsp;</option>
         <option value="1">1</option>
         <option value="2">2</option>
        </select>
        pers. x 220.- = </td>
      <td class="txt_form"><span class="result_form">
        <input name="ctPrix4" id="ctPrix4" type="text"  size="5" class="result_form" disabled="disabled" />
      </span></td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td class="t2_form"><input name="selection" type="radio" id="1lit" value="1 lit" onClick="fPrix5(1)"/>
        1 lit</td>
      <td width="42" class="t1_form">&nbsp;</td>
      <td width="90" class="t1_form">&nbsp;pers. x 270.- =</td>
      <td class="txt_form"><span class="result_form">
        <input name="ctPrix5" type="text"  size="5" class="result_form" disabled="disabled" />
      </span></td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td colspan="2">&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td colspan="3" class="t2_form">participant «externe» (repas + infrastr.)</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td colspan="2" class="t1_form"><select name="liste5" class="t2_form" id="liste5" onChange="fPrix6(this.form.elements['liste5'].options[this.form.elements['liste5'].selectedIndex].value)">
        <option value="0">&nbsp;</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
      </select>        
      pers. x 125.- = </td>
      <td><span class="result_form">
        <input name="ctPrix6" id="ctPrix6" type="text"  size="5" class="result_form" disabled="disabled" />
      </span></td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td colspan="2">&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td colspan="3"><span style="font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 12px;font-weight: bold; color: #CC6600;">Prix de la retraite</span></td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td class="txt_form">total de personnes</td>
      <td colspan="2" class="t1_form"> pers. x 50.- = </td>
      <td class="txt_form"><span class="result_form">
        <input name="ctPrix7" type="text"  size="5" class="result_form" disabled="disabled" />
      </span></td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td colspan="2">&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td colspan="2" align="right"><span style="font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 13px;font-weight: bold; color: #2c5372;">TOTAL</span></td>
      <td style="font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 12px;font-weight: bold; color: #CC6600; text-align:right;"><span class="result_form">
        <input name="ctBigTotal" type="text"  size="5" class="result_form" disabled="disabled" />
      </span></td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td colspan="2">&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td colspan="2">&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td colspan="2"><input name="valider" type="submit" class="t2_form" id="valider" value="Valider"/>
          <input name="reset" type="reset" class="t2_form" id="reset" value="Réinitialiser" />       </td>
          <input name="go" type="hidden" value="1"/>  
    </tr>
  </table>[/spoiler]


Message édité par Elmoricq le 09-04-2008 à 11:20:08
Reply

Marsh Posté le 09-04-2008 à 10:50:01   

Reply

Marsh Posté le 09-04-2008 à 10:54:27    

J'ai édité le titre de ton post, les titres tout en majuscules étant hors-charte.

Reply

Marsh Posté le 09-04-2008 à 11:15:40    

"NaN" veut dire "Not a Number".
Je n'ai pas regardé le code en détail, mais il est très probable que la résolution du problème se fasse en ajoutant "Number(....)" pour convertir une variable en un nombre avant de faire un calcul. Par exemple :
au lieu de

var vBigTotal= (vtotal) + (vprix_repas) + (vnbr_personnes);

écrire

var vBigTotal= Number(vtotal) + Number(vprix_repas) + Number(vnbr_personnes);

Reply

Marsh Posté le 09-04-2008 à 11:19:40    

Non mais si j'édite le titre de ton post parce que le titre est en majuscules, c'est pas la peine de repasser derrière pour remettre le titre en majuscules, hein !

 

Merci de lire les règles de la catégorie Programmation : http://forum.hardware.fr/forum2.ph [...] 544&cat=10
Prochaine fois c'est lock + tt.


Message édité par Elmoricq le 09-04-2008 à 11:20:53
Reply

Marsh Posté le 09-04-2008 à 13:04:20    

Je suis désolé, pour etre franc j'ai pas regardé le règles du forum. mais je serais plus attentif la prochain fois

Reply

Marsh Posté le 09-04-2008 à 20:35:22    

Merci bcp olivthill  Number a marché nickel
 
 :)  


Message édité par beheadoth le 09-04-2008 à 20:47:02
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed