Récupérer valeurs de boutons radios et les additioner

Signaler
Messages postés
1
Date d'inscription
lundi 25 août 2014
Statut
Membre
Dernière intervention
25 août 2014
-
Messages postés
224
Date d'inscription
mercredi 23 mai 2007
Statut
Membre
Dernière intervention
8 septembre 2014
-
Bonjour
je suis obligé de fabriquer un formulaire (qui existe au format PDF interactif) en javascript et php.
j'ai besoin de récupérer les valeurs d'un questionnaire de 10 questions et de faire un simple addition de ces valeurs.
chaque question (Q01) contient 4 valeurs (0,1,2,3)
je dois extraire la valeur de chaque question et faire un total
il faut ensuite pouvoir envoyer ce formulaire via email

avec nom, date et email (cela j'ai pu le faire)
n'étant pas une bête en javascript je bloque un peu sur la syntaxe...
en fait je souhaite avoir un affichage plus moderne qui puisse afficher le résultat sans passer
par des pages de résultat en php.

l'usage final sera consultable sur IPAD on a pas besoin de valider tous les navigateurs.
mais mes connaissances en formulaires pur HTML5 sont récentes.


HTML
<div id="BQ01">
<input type="radio" name="Q01" value="0" id="Q10"></input>
<input type="radio" name="Q01" value="1" id="Q11"></input>
<input type="radio" name="Q01" value="2" id="Q12"></input>
<input type="radio" name="Q01" value="3" id="Q13"></input>
</div>div id="Q02" ></div>

<div id="BQ02">
<input type="radio" name="Q02" value="0" id="Q20"></input>
<input type="radio" name="Q02" value="1" id="Q21"></input>
<input type="radio" name="Q02" value="2" id="Q22"></input>
<input type="radio" name="Q02" value="3" id="Q23"></input>
</div><div id="Q02" ></div>

<div id="BQ03">
<input type="radio" name="Q03" value="0" id="Q30"></input>
<input type="radio" name="Q03" value="1" id="Q31"></input>
<input type="radio" name="Q03" value="2" id="Q32"></input>
<input type="radio" name="Q03" value="3" id="Q33"></input>
</div><div id="Q02" ></div>
.../...
<div id="BQ10">
<input type="radio" name="Q10" value="0" id="Q100"></input>
<input type="radio" name="Q10" value="1" id="Q101"></input>
<input type="radio" name="Q10" value="2" id="Q102"></input>
<input type="radio" name="Q10" value="3" id="Q103"></input>
</div><div id="Q18" ></div>


<input type="text" name="totalrq" id="totalRQ"><br/>
<input type="submit" value="Calculer" id="calcul"/>


j'ai essayé ces trois codes pour tester mais ils semblent incorrects
si quelqu'un peut m'éclairer, je suis preneur


Version A
------------------------------
<script type="text/javascript">
  $(document).ready(function(){
    $("#Q10").click(function () {
 $('input:radio[name=Q01]:nth(0)').attr('checked',true);
 $("#Q10").html( $(":checked").val() + " pts");  
    });
 
    $("#Q11").click(function () {
 $('input:radio[name=Q01]:nth(1)').attr('checked',true);
 $("#Q11").html( $(":checked").val() + " pts");  
    });
 
    $("#Q12").click(function () {
 $('input:radio[name=Q01]:nth(2)').attr('checked',true);
 $("#Q12").html( $(":checked").val() + " pts");  
    });
 
    $("#Q13").click(function () {
 $('input:radio[name=Q01]:nth(2)').attr('checked',true);
 $("#Q13").html( $(":checked").val() + " pts");  

 $('input:radio[name=Q01]').attr('checked',false);
    }); 
  });
</script>

version B
----------------------------
<script type="text/javascript">
 $(function() { 
 document.getElementById('BQ01');              
 $("input[id^=Q01]").attr('checked', false);
 $("#Q01").html( $(":checked").val() + " pts");  
});
</script> 


Version C (marche mais avec un seul bouton radio au delà cela bloque )
------------------------------------------------
<script type="text/javascript">
 $(function() { 
  $("#BQ01").click(function() {
  $("#RQ01").html( $(":checked").val() + " pts");  
 });
});
</script>


merci
Alexandre

2 réponses

Messages postés
31193
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
25 janvier 2021
342
Bonjour,

Le plus simple est ( je pense ) d'assigner une "class" à tes inputs à additionner puis à boucler dessus à l'aide d'un .each

Un truc du genre :
function majVal(){
var a =0;
$(".MaClass").each(function() {
    // ...ici le code d'addition
    a += parseInt( $(this).value());
});

// Ici le code pour afficher le résultat
 $("#RQ01").html(a + " pts");
}


Et tes inputs ... avec la class

<input class="MaClass" type="radio" name="Q02" value="0" id="Q20"></input>
<input class="MaClass" type="radio" name="Q02" value="1" id="Q21"></input>

etc....



Avant de poser une question, merci de lire la charte du site.
Cordialement, Jordane

Bonsoir Jordane

merci j'ai testé mais je n'affiche rien


function majVal(){
var a =0;
$(".MaClass").each(function() {
// ...ici le code d'addition
a += parseInt( $(this).value());
});

// Ici le code pour afficher le résultat
$("#RQ01").html(a + " pts");
}



<div id="BQ01">
<input class="MaClass" type="radio" name="Q01" value="0" id="Q10"></input>
<input class="MaClass" type="radio" name="Q01" value="1" id="Q11"></input>
<input class="MaClass" type="radio" name="Q01" value="1" id="Q12"></input>
<input class="MaClass" type="radio" name="Q01" value="1" id="Q13"></input>
</div><div id="RQ01"></div>


Messages postés
31193
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
25 janvier 2021
342
Et a quel endroit dans ton code lances tu la fonction majVal ?
Tu l'as mis dans un Onclick quelque part ??

Et tu as essayé de mettre des "ALERT" dans ton code pour voir si il se lançait correctement ?

Je t'invite aussi à utiliser un debogueur de script comme FireBug (sous FireFox) ou tout simplement celui intégré à IE (tu y accède via la touche F12 de ton clavier).... ça permet de voir les éventuelles erreurs de codage.
Messages postés
224
Date d'inscription
mercredi 23 mai 2007
Statut
Membre
Dernière intervention
8 septembre 2014
1
Tu peux essayer ça :


var total = 0;

$("input[type=radio]:checked").each(function() {
total += parseInt($(this).val());
});