Fonction calcul() avec bouton radio

Fermé

alexjava Messages postés 8 Date d'inscription mardi 20 novembre 2012 Statut Membre Dernière intervention 28 novembre 2012 - 20 nov. 2012 à 10:38
Heliotte Messages postés 1491 Date d'inscription vendredi 26 octobre 2012 Statut Membre Dernière intervention 28 janvier 2013 - 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

A voir également:

Fonction calcul() avec bouton radio
Fonction si et - Guide
Calcul moyenne excel - Guide
Radio française - Télécharger - Médias et Actualité
Réinitialiser chromecast sans bouton - Guide
Calcul charpente bois gratuit - Télécharger - Architecture & Déco

8 réponses

Réponse 1 / 8

Heliotte Messages postés 1491 Date d'inscription vendredi 26 octobre 2012 Statut Membre Dernière intervention 28 janvier 2013 92
20 nov. 2012 à 11:57

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 Date d'inscription mardi 20 novembre 2012 Statut Membre Dernière intervention 28 novembre 2012
20 nov. 2012 à 12:05

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 417 Date d'inscription lundi 26 novembre 2007 Statut Membre Dernière intervention 21 janvier 2013 27
20 nov. 2012 à 13:33

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 Date d'inscription mardi 20 novembre 2012 Statut Membre Dernière intervention 28 novembre 2012
20 nov. 2012 à 13:46

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 1491 Date d'inscription vendredi 26 octobre 2012 Statut Membre Dernière intervention 28 janvier 2013 92
20 nov. 2012 à 13:53

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 Date d'inscription mardi 20 novembre 2012 Statut Membre Dernière intervention 28 novembre 2012
20 nov. 2012 à 14:08

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 1491 Date d'inscription vendredi 26 octobre 2012 Statut Membre Dernière intervention 28 janvier 2013 92
20 nov. 2012 à 14:18

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 dimanche 1 juillet 2012 Statut Membre Dernière intervention 14 décembre 2012 208
Modifié par @lobotomix:~# rm -rf * le 20/11/2012 à 14:25

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 7762 Date d'inscription vendredi 15 janvier 2010 Statut Membre Dernière intervention 15 novembre 2024 1 639
20 nov. 2012 à 14:30

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 dimanche 1 juillet 2012 Statut Membre Dernière intervention 14 décembre 2012 208
20 nov. 2012 à 14:37

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 7762 Date d'inscription vendredi 15 janvier 2010 Statut Membre Dernière intervention 15 novembre 2024 1 639
Modifié par astuces72 le 20/11/2012 à 14:56

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 dimanche 1 juillet 2012 Statut Membre Dernière intervention 14 décembre 2012 208
20 nov. 2012 à 15:02

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

astuces72 Messages postés 7762 Date d'inscription vendredi 15 janvier 2010 Statut Membre Dernière intervention 15 novembre 2024 1 639
Modifié par astuces72 le 20/11/2012 à 15:04

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 Date d'inscription mardi 20 novembre 2012 Statut Membre Dernière intervention 28 novembre 2012
20 nov. 2012 à 15:09

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

Bouton ON OFF, O ou I ?

je veut créer des codes

exo pix

ou est la touche shift sur un clavier

auto radio bloqué