Récupérer les valeurs de bouton radio et les additioner en javascript/jquery
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
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
| <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
———————————————
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| <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
——————————————
Code:
1
2
3
4
5
6
7
| <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 )
————————————————————————
Code:
1
2
3
4
5
6
7
| <script type="text/javascript">
$(function() {
$("#BQ01").click(function() {
$("#RQ01").html( $(":checked").val() + " pts");
});
});
</script> |
merci
Alexandre
