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

alexandre-33 Messages postés 1 Date d'inscription lundi 25 août 2014 Statut Membre Dernière intervention 25 août 2014 - Modifié par jordane45 le 25/08/2014 à 14:33
 Utilisateur anonyme - 3 sept. 2014 à 16:19
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

jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 344
Modifié par jordane45 le 25/08/2014 à 14:39
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
0
alexandre-33
26 août 2014 à 01:04
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>


0
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 344
Modifié par jordane45 le 26/08/2014 à 01:18
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.
0
Tu peux essayer ça :


var total = 0;

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

0
Rejoignez-nous