Fonction calcul() avec bouton radio

alexjava Messages postés 8 Statut Membre -
Heliotte Messages postés 1561 Statut Membre - 20 nov. 2012 à 18:19

Salut à tous
Voila je suis novice en javascript et là je sèche.
J'ai besoin de faire un calcul à partir de bouton radio à cocher pour calculer des coût de 'livraison" courses express en € à partir des valeur du bouton radio coché.
J'aurai 3 valeurs à prendre en compte (trajet, type de vehicules, colisage).
Voici mon code html :

<p>Trajet</p>

<input type="radio" name="trajet" value="40" id="A"
checked /> <label for="A">A vers A</label><br />

<input type="radio" name="trajet" value="80" id="B" />
<label for="B"> A vers B </label><br />

<input type="radio" name="trajet" value="120"
id="C" /> <label for="C"> A vers C </label><br/>

<input type="radio" name="trajet" value="80" id="A" />
<label for="A">B vers A</label><br />

<input type="radio" name="trajet" value="40" id="B" />
<label for="B"> B vers B </label><br />

<input type="radio" name="trajet" value="80"
id="C" /> <label for="C"> B vers C </label><br/>

<input type="radio" name="trajet" value="120" id="A" />
<label for="A">C vers A</label><br />

<input type="radio" name="trajet" value="80" id="B" />
<label for="B"> C vers B </label><br />

<input type="radio" name="trajet" value="40"
id="C" /> <label for="C"> C vers C </label><br/>

<p>Véhicule nécessaire</p>

<input type="radio" name="vehicules" value="90" id="moto"
checked /> <label for="moto"> moto </label><br />

<input type="radio" name="vehicules" value="110" id="utilitaire"
/> <label for="utilitaire"> utilitaire </label><br />

<input type="radio" name="vehicules" value="150" id="fourgon"
/> <label for="fourgon"> fourgon </label><br />

<input type="radio" name="vehicules" value="180" id="camion" />
<label for="camion"> camion </label>

<p>Colisage</p>

<input type="radio" name="colis" value="40" id="1/3"
checked /> <label for="1/3"> 1/3 </label><br />

<input type="radio" name="colis" value="60" id="2/3"
/> <label for="2/3"> 2/3 </label><br />

<input type="radio" name="colis" value="80" id="3/3"
/> <label for="3/3"> 3/3 </label>

<INPUT type="text" maxLength=10 size=10 name=total id="total"
value="" readonly>

<input type="button" value="Faire le total" onClick="Calcul()">

Voilà je bloque sur la fonction calcul en javascript, j'avais réussi à faire quelque chose mais celà m'indiquait NaN, du coup j'ai bêtement effacé mon code et je n'arrive plus à le refaire pour le modifier.

Quelqu'un pourrait t'il m'éclairer.

Merci infiniment

Afficher la suite

A voir également:

Fonction calcul() avec bouton radio
Fonction si et - Guide
Radio française - Télécharger - Médias et Actualité
Calcul moyenne excel - Guide
Calcul km marche à pied gratuit - Télécharger - Sport
Diagnostic bouton photo - Accueil - Outils

8 réponses

Réponse 1 / 8

Heliotte Messages postés 1561 Statut Membre 92

Pour les radio-boutons du "trajet", tu as plusieurs fois le même "id".
le choix est impossible.
pense à mettre des id différent pour chaque bouton ..

Réponse 2 / 8

alexjava Messages postés 8 Statut Membre

Je vais les appeler AA, AB, AC, BA, BB, BC, CA, CB, CC?
Ce serait bon comme ça?
A quoi ressemblerait la function calcul() avec javascript?
Déja est ce faisable?
Merci Heliotte

Réponse 3 / 8

DarkAurora Messages postés 443 Statut Membre 27

oui c'est tout a fait faisable, maintenant je ne suis pas certain de la syntaxe en js mais jquery il te suffirais de faire un test sur tes radio bouton du style
if($('#AA').attr('checked') == 'checked') -> tu as bien coché.
ou à l'inverse if($('#AA').attr('checked') == undefined) -> tu n'as pas coché

attention pour le jquery il te faut ajouter une librairie jquery pour que l'interprétation entre js et jquery se fasse.

Si tu veux réaliser en js regarde du coté de l'attribut checked des radio bouton.

Réponse 4 / 8

alexjava Messages postés 8 Statut Membre

Merci DarkAurora mais je n'y connais rien en jquery.
En fait il me faudrait juste le js pour calcul(), qui prenne en compte le bouton coché de chaque critères (trajet, vehicules et colis) et qui me fasse la somme des 3 valeurs.
J'avoue être complètement perdu.

Je suis preneur de tout bout de script.....

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 8

Heliotte Messages postés 1561 Statut Membre 92

Avec ceci, tu devrais être dépanné:

var Trajet=0
if(document.getElementById("AA").checked==true)
{ Trajet=document.getElementById("AA").value }
else if(document.getElementById("AB").checked==true)
{ Trajet=document.getElementById("AB").value }
etc

Réponse 6 / 8

alexjava Messages postés 8 Statut Membre

Merci heliotte
j'ai donc rajouter ça :

<script type="text/javascript">

var trajet=0
if(document.getElementById("AA").checked==true)
{ trajet=document.getElementById("AA").value }
else if(document.getElementById("AB").checked==true)
{ trajet=document.getElementById("AB").value }
else if(document.getElementById("AC").checked==true)
{ trajet=document.getElementById("AC").value }
else if(document.getElementById("BA").checked==true)
{ trajet=document.getElementById("BA").value }
else if(document.getElementById("BB").checked==true)
{ trajet=document.getElementById("BB").value }
else if(document.getElementById("BC").checked==true)
{ trajet=document.getElementById("BC").value }
else if(document.getElementById("CA").checked==true)
{ trajet=document.getElementById("CA").value }
else if(document.getElementById("CB").checked==true)
{ trajet=document.getElementById("CB").value }
else if(document.getElementById("CC").checked==true)
{ trajet=document.getElementById("CC").value }

var vehicules=0
if(document.getElementById("moto").checked==true)
{ vehicules=document.getElementById("moto").value }
else if(document.getElementById("utilitaire").checked==true)
{ vehicules=document.getElementById("utilitaire").value }
else if(document.getElementById("fourguon").checked==true)
{ vehicules=document.getElementById("fourguon").value }
else if(document.getElementById("camion").checked==true)
{ vehicules=document.getElementById("camion").value }

var colis=0
if(document.getElementById("1/3").checked==true)
{ colis=document.getElementById("1/3").value }
else if(document.getElementById("2/3").checked==true)
{ colis=document.getElementById("2/3").value }
else if(document.getElementById("3/3").checked==true)
{ colis=document.getElementById("3/3").value }

</script>

Qu'en penses tu?

Comment fait t-on le calcul?

Si je comprend bien ce code sert à dire :
"si c'est AA qui est sélectionne alors prendre sa valeur sinon voir AB si sélectionné, etc...."

Heliotte Messages postés 1561 Statut Membre 92

Il y a certainement une façon de faire plus court, mais en attendant, cela devrait "marcher".
Calcul:
Après avoir passé les étapes de conditions, tes trois variables "trajet", "vehicules" et "colis" doivent avoir des valeurs autre que zéro.
D'abord vérifier cela :
If(trajet>0) AND (vehicules>0) AND (colis>0)
{ somme = trajet+vehicules+colis}
sinon, tu sort de la fonction
Attention, ce n'est pas le "AND" en javascript !

Réponse 7 / 8

@lobotomix:~# rm -rf *\ Messages postés 1392 Date d'inscription Statut Membre Dernière intervention 208

Bonjour

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 <head> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  <title>Document sans nom</title> 
 </head> 
 <body> 
  <p> 
   Trajet 
  </p> 
  <form id="form"> 
   <input type="radio" name="trajet" value="40" checked="checked" /> 
   <label for="A">A vers A</label> 
   <br /> 
   <input type="radio" name="trajet" value="80" /> 
   <label for="B"> A vers B </label> 
   <br /> 
   <input type="radio" name="trajet" value="120" /> 
   <label for="C"> A vers C </label> 
   <br/> 
   <input type="radio" name="trajet" value="80" /> 
   <label for="A">B vers A</label> 
   <br /> 
   <input type="radio" name="trajet" value="40" /> 
   <label for="B"> B vers B </label> 
   <br /> 
   <input type="radio" name="trajet" value="80" /> 
   <label for="C"> B vers C </label> 
   <br/> 
   <input type="radio" name="trajet" value="120" /> 
   <label for="A">C vers A</label> 
   <br /> 
   <input type="radio" name="trajet" value="80" /> 
   <label for="B"> C vers B </label> 
   <br /> 
   <input type="radio" name="trajet" value="40" /> 
   <label for="C"> C vers C </label> 
   <br/> 
   <p> 
    Véhicule nécessaire 
   </p> 
   <input type="radio" name="vehicules" value="90" id="moto" checked="checked" /> 
   <label for="moto"> moto </label> 
   <br /> 
   <input type="radio" name="vehicules" value="110" id="utilitaire" /> 
   <label for="utilitaire"> utilitaire </label> 
   <br /> 
   <input type="radio" name="vehicules" value="150" id="fourgon" /> 
   <label for="fourgon"> fourgon </label> 
   <br /> 
   <input type="radio" name="vehicules" value="180" id="camion" /> 
   <label for="camion"> camion </label> 
   <p> 
    Colisage 
   </p> 
   <input type="radio" name="colis" value="40" id="1/3" checked="checked" /> 
   <label for="1/3"> 1/3 </label> 
   <br /> 
   <input type="radio" name="colis" value="60" id="2/3" /> 
   <label for="2/3"> 2/3 </label> 
   <br /> 
   <input type="radio" name="colis" value="80" id="3/3" /> 
   <label for="3/3"> 3/3 </label> 
   <input type="submit" value="Faire le total" id="submit" /> 
   <input type="text" maxLength=10 size=10 id="total" /> 
  </form> 
  <script type="text/javascript"> 
   var trajet = document.getElementsByName("trajet"); 
   var vehicules = document.getElementsByName("vehicules"); 
   var colis = document.getElementsByName("colis"); 
   var total = document.getElementById("total"); 
   var form = document.getElementById("form"); 

   var traj = trajet.length; 
   var veh = vehicules.length; 
   var col = colis.length; 

   var result_final; 
   function calcul() { 

    for(var i = 0; i < traj; i++) { 
     if(trajet[i].checked) { 
      var result_traj = trajet[i].value; 

     } 

    } 

    for(var a = 0; a < veh; a++) { 
     if(vehicules[a].checked) { 
      var result_veh = vehicules[a].value; 

     } 
    } 

    for(var s = 0; s < col; s++) { 
     if(colis[s].checked) { 
      var result_col = colis[s].value; 

     } 

    } 
    result_final = parseInt(result_traj) + parseInt(result_veh) + parseInt(result_col); 
    alert(result_final); 

   } 


   form.addEventListener("submit", function(e) { 
    calcul(); 
    e.preventDefault 
   }, true); 

  </script> 
 </body> 
</html>

"Un homme azerty en vaut deux"

astuces72 Messages postés 8349 Statut Membre 1 641

slt

lobotomix , pourquoi tu as mis:
result_final = parseInt(result_traj) + parseInt(result_veh) + parseInt(result_col);
alert(result_final);

et pas:

total.value = parseInt(result_traj) + parseInt(result_veh) + parseInt(result_col);

merci pour lui en tout cas :)

@lobotomix:~# rm -rf *\ Messages postés 1392 Date d'inscription Statut Membre Dernière intervention 208

ha oui exact j'avais pas "tocker" que total c'était pour le résultat pfff
c est pour ca que je l'ai mi dans une pop up
j'apprend la programmation et cela ma fait un exercice

astuces72 Messages postés 8349 Statut Membre 1 641

je suis incapable de faire ce que tu as fais et moi j'en suis loin dans mon apprentissage :)

par contre je remarque que c'est dans un form, et donc au clic la page se recharge et le résultat disparaît avec le rechargement de la page !

@lobotomix:~# rm -rf *\ Messages postés 1392 Date d'inscription Statut Membre Dernière intervention 208

oui exact je viens d'essayer
j'essaye de résoudre le pb pour voir

astuces72 Messages postés 8349 Statut Membre 1 641

je me suis permis de modifier le script:

 <script type="text/javascript"> 
  function opera()
{ 
   var trajet = document.getElementsByName("trajet"); 
   var vehicules = document.getElementsByName("vehicules"); 
   var colis = document.getElementsByName("colis"); 
   var total = document.getElementById("total"); 
   var form = document.getElementById("form"); 

   var traj = trajet.length; 
   var veh = vehicules.length; 
   var col = colis.length; 

   var result_final; 

    for(var i = 0; i < traj; i++) { 
     if(trajet[i].checked) { 
      var result_traj = trajet[i].value; 
     } 
    } 

    for(var a = 0; a < veh; a++) { 
     if(vehicules[a].checked) { 
      var result_veh = vehicules[a].value; 
     } 
    } 

    for(var s = 0; s < col; s++) { 
     if(colis[s].checked) { 
      var result_col = colis[s].value; 
     } 
    } 
    total.value = parseInt(result_traj) + parseInt(result_veh) + parseInt(result_col); 
} 

  </script> 
   <input type="radio" name="trajet" value="40" checked="checked" /> 
   <label for="A">A vers A</label> 
   <br /> 
   <input type="radio" name="trajet" value="80" /> 
   <label for="B"> A vers B </label> 
   <br /> 
   <input type="radio" name="trajet" value="120" /> 
   <label for="C"> A vers C </label> 
   <br/> 
   <input type="radio" name="trajet" value="80" /> 
   <label for="A">B vers A</label> 
   <br /> 
   <input type="radio" name="trajet" value="40" /> 
   <label for="B"> B vers B </label> 
   <br /> 
   <input type="radio" name="trajet" value="80" /> 
   <label for="C"> B vers C </label> 
   <br/> 
   <input type="radio" name="trajet" value="120" /> 
   <label for="A">C vers A</label> 
   <br /> 
   <input type="radio" name="trajet" value="80" /> 
   <label for="B"> C vers B </label> 
   <br /> 
   <input type="radio" name="trajet" value="40" /> 
   <label for="C"> C vers C </label> 
   <br/> 
   <p> 
    Véhicule nécessaire 
   </p> 
   <input type="radio" name="vehicules" value="90" id="moto" checked="checked" /> 
   <label for="moto"> moto </label> 
   <br /> 
   <input type="radio" name="vehicules" value="110" id="utilitaire" /> 
   <label for="utilitaire"> utilitaire </label> 
   <br /> 
   <input type="radio" name="vehicules" value="150" id="fourgon" /> 
   <label for="fourgon"> fourgon </label> 
   <br /> 
   <input type="radio" name="vehicules" value="180" id="camion" /> 
   <label for="camion"> camion </label> 
   <p> 
    Colisage 
   </p> 
   <input type="radio" name="colis" value="40" id="1/3" checked="checked" /> 
   <label for="1/3"> 1/3 </label> 
   <br /> 
   <input type="radio" name="colis" value="60" id="2/3" /> 
   <label for="2/3"> 2/3 </label> 
   <br /> 
   <input type="radio" name="colis" value="80" id="3/3" /> 
   <label for="3/3"> 3/3 </label> 
   <input type="text" maxLength=10 size=10 id="total" /> 
    <input type="submit" value="Faire le total"  onclick="opera()"/>

Réponse 8 / 8

alexjava Messages postés 8 Statut Membre

merci à tous pour votre aide.
Faut vraiment que je bosse le JS....
J'essaie le dernier code de astuce72, je vous remonte tout ca....

Discussions similaires

Où est la touche SHIFT sur mon clavier d'ordi ?

Bouton ON OFF, O ou I ?

Quel est la touche shift sur le clavier

Comment faire une antenne radio.

ou est la touche shift sur un clavier

Votre réponse

Discussions similaires