Discussion :

[Alexandre33]

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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 javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<script type="text/javascript">
	$(function() {	
		$("#BQ01").click(function() {
		$("#RQ01").html( $(":checked").val() + " pts");		
	});
});
</script>

merci
Alexandre

[SpaceFrog]

tu as essayé avec un each sur le selecteur

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
$("[name^='Q']:checked")

http://jsfiddle.net/xo5nd7yf/

[Alexandre33]

Merci SpaceFrog,
C'est effectivement ce que je cherchais, mais lorsque je souhaite affiché le resultat.
si je cherche à ajouter un champ input text pour avoir le résultat à l'interieur pour pouvoir l'envoyer par la suite je n'arrive pas à le récupérer.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.write(total)

je perds l'affichage du tableau des boutons radios mais j'ai bien le bon résultat.
je lis par ci par là que document.write n'est plus la bonne syntaxe ?
qu'il vaut mieux utiliser

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById("#calc").value=total;

mais je crois que la syntaxe n'est pas bonne dans mon cas car je perds le résultat.
il y a un truc qui m'échappe.

j'ai essayé en appelant la function que j'ai appelé resultat, mais sans succès
est-ce faisable de récupérer le resultat de la fonction dans un champs imput text ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
$(function resultat(){
	var total=0;
	$('#calc').on('click', function(){
	total=0;
	$("[name^='Q']:checked").each( function(){
	total+=+$(this).val();
	})
	document.write(total)
	})
})

quel est la différence entre

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var total=0;

et

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$(total)=0;

quelle est la meilleure syntaxe ?

tout aide est la bienvenue pour améliorer ma compréhension

[devyan]

Bonjour,

J'ai noté quelques détails dans ton code HTML/JS :

Dans ton exemple HTML il y a un ID qui apparait plus d'une fois <div id="Q02" ></div> (mal initialisé à la ligne 6 puis aux lignes 13 et 20, avant les ... )

Pour éviter les problèmes de notation tu devrais peut-être faire un choix entre notation jQuery et notation pure JavaScript pour tes sélections d'éléments.

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById("#calc").value=total;

La notation (style CSS) #id est utilisée par jQuery mais pas en JavaScript. Cetteligne doit en plus générer une erreur lors de l'accès à undefined.value.

Dans le premier cas (total = 0) tu initialises ta variable total à 0. Alors que $(total) est un sélecteur jQuery, schématiquement un tableau des éléments total auquel on ne peut pas assigné une valeur directement comme tu le veux.

[Alexandre33]

J'ai noté quelques détails dans ton code HTML/JS :
Dans ton exemple HTML il y a un ID qui apparait plus d'une fois <div id="Q02" ></div> (mal initialisé à la ligne 6 puis aux lignes 13 et 20, avant les ... )

Oui merci devyan j'ai corrigé sur un exemple de test en local, histoire de ne pas déglinguer ce qu'avait posté SpaceFrogle.

Pour éviter les problèmes de notation tu devrais peut-être faire un choix entre notation jQuery et notation pure JavaScript pour tes sélections d'éléments.

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById("#calc").value=total;

La notation (style CSS) #id est utilisée par jQuery mais pas en JavaScript. Cetteligne doit en plus générer une erreur lors de l'accès à undefined.value.

Oui, c'est ce que la console me dit
En fait mes connaissances en Javascript sont assez basiques - je suis autodidacte sur le point de la programmation, j'apprends en codant sur le tas, du coup mon code peut présenter quelques erreurs de méthode. En fait je pensais que si total était déclaré en tant que variable, je devrais pouvoir la récupérer après le calcul, pour l'injecter dans un champs input pour :

- afficher le résultat dans un champs texte (plus sympa que dans une alerte)
- pouvoir récupérer ce champs pour l'envoyer par email par la suite en envoyant la donnée du résultat.

Dans le premier cas (total = 0) tu initialises ta variable total à 0. Alors que $(total) est un sélecteur jQuery, schématiquement un tableau des éléments total auquel on ne peut pas assigné une valeur directement comme tu le veux.

en lisant diverses pages sur javascript et jquery je vois qu'il vaut mieux définir les variables par var mavaraible
En fait je ne comprends pas comment je peux récupérer ce calcul
ne faut il pas déclarer une fonction pour pouvoir ensuite afficher le résultat dans un champs ?
pour pouvoir utiliser des fonctions comme document.getElementById("iddubouton");
j'ai mis en commentaire ce que je pense comprendre du code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
$(function calcresultat(){
total=0; // la valeur total est à zero (faut-il mettre ceci en variable, remet le compteur à zéro à chaque chargement de la page  ?)
$('#calc').on('click', function(){ // on appelle le bouton par son id ('#calc') à chaque clique on lance le fonction
total=0; // total est à zero
$("[name^='Q']:checked").each(function(){ // pour chaque bouton radio cliqué on lance le calcul
total+=+$(this).val(); // a chaque incrementation (+=) on ajoute la valeur de de chaque bouton
})
alert('Vous avez totalisé : '+ total + ' pts')// affiche le resultat dans l'alerte + les chaines de carateres
})
})

[name^='Q']:checked
le signe ^ correspond à quel syntaxe ?
tous les élement dont le nom contient la lettre Q

Si je crée un champs

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<input type="text" value="" id="affcalc" />

Auquel cas je pourrais l'afficher avec ceci ou injecter la fonction calcresultat
mais je ne connais pas la syntaxe pour réaliser ceci

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 $("#affcalc").html(appelerleresultatdemafonction + " pts");

est-il possible d'afficher le résultat de la fonction dans ce champs ou est-ce une aberration comme logique de programmation. Ne peut-on y afficher que des variables préalablement définies.

le code du HTML corrigé -
si j'utilise post pour pouvoir envoyer les données
peut-on utiliser des requêtes get pour afficher les données
ou JQuery permet-il les deux à la fois ?

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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
32
33
34
35
36
37
38
39
40
41
42
<form name="questionnaire" method="post">
<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="RQ01" >Q1:</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="RQ02" >Q2:</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="RQ03" >Q3:</div>
 
<div id="BQ04">
<input type="radio" name="Q04" value="0" id="Q40"></input>
<input type="radio" name="Q04" value="1" id="Q41"></input>
<input type="radio" name="Q04" value="2" id="Q42"></input>
<input type="radio" name="Q04" value="3" id="Q43"></input>
</div><div id="RQ04" >Q4:</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="RQ10" >Q10:</div>
<br/><br/>
<input type="text" value="" id="affcalc" />
<br/><br/>
<input type="button" value="Calculer" id="calc"/>
<input name="Submit" type="RESET" class="Style24" value="Effacer" />
</form>

Merci pour vos commentaires qui m'aideront à progresser dans la compréhension du code.
j'ai écumer diverses pages avec mes recherches je trouve personnellement la syntaxe JQuery plus facile a comprendre et à utiliser que le javascript pur et dur mais d'après ce que j'en lis tout n'est pas encore normalisé et il vaut mieux comprendre javascript pour utiliser JQuery qui est une surcouche en javascript.

[danielhagnoul]

Bonsoir

Il faut avoir de bonnes bases (HTML, CSS, DOM et JS). Comme cela a déjà été dit, il y a moult erreurs dans vos codes. Utiliser le jQuery sans connaître les bases vous handicapera. C'est particulièrement vrai pour le CSS.

[name^='Q']:checked
le signe ^ correspond à quel syntaxe ?
tous les élement dont le nom contient la lettre Q

Presque, "qui débutent par", voir une bonne documentation, par exmple : http://devdocs.io/css/attribute_selectors

En jQuery, le débutant à tendance à multiplier les "class" et les "id". Cela alourdit le DOM et diminue les performances de votre code.

Il y a souvent plusieurs manières de traiter un problème, si le code est correct le résultat final sera le même. Mais je crois qu'il est toujours préférable de partir du point de vue de l'utilisateur, pas de celui du programmeur.

Le programmeur a besoin du résultat d'un calcul pour le transmettre, l'utilisateur a besoin de choisir (il peut se tromper et changer d'avis plusieurs fois) et de transmettre son choix.

En envisageant le problème du point de vue du programmeur on débute par le calcul, en l'envisageant du point de vue de l'utilisateur on commence par traiter les actions de l'utilisateur.

Exemple :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<form id="myForm">
    <input type="radio" name="Q01" value="0" checked>
    <input type="radio" name="Q01" value="1">
    <input type="radio" name="Q01" value="2">
    <input type="radio" name="Q01" value="3">
    <br/>
    <input type="radio" name="Q02" value="0" checked>
    <input type="radio" name="Q02" value="1">
    <input type="radio" name="Q02" value="2">
    <input type="radio" name="Q02" value="3">
    <br/>
    <input type="radio" name="Q03" value="0" checked>
    <input type="radio" name="Q03" value="1">
    <input type="radio" name="Q03" value="2">
    <input type="radio" name="Q03" value="3">
    <br/>
    <input type="radio" name="Q10" value="0" checked>
    <input type="radio" name="Q10" value="1">
    <input type="radio" name="Q10" value="2">
    <input type="radio" name="Q10" value="3">
    <br/>
    <input name="result" type="text" value="0" hidden>
    <input type="submit" value="Envoyer">
</form>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
32
33
34
35
36
37
38
39
40
41
42
43
44
$( function(){
 
    $( "input[name^='Q']", "#myForm" ).on( "change", function(){
        $( "input[name='result']", "#myForm" ).val(
            +$( "input[name='Q01']:checked" ).val() +
            +$( "input[name='Q02']:checked" ).val() +
            +$( "input[name='Q03']:checked" ).val() +
            +$( "input[name='Q10']:checked" ).val()
        );
    });
 
    $( "#myForm" ).on( "submit", function(){
 
        // debug, console, touche F12
        // console.log( $( this ).serialize() );
 
        // Exemple : Q01=2&Q02=1&Q03=2&Q10=3&result=8
 
        // En PHP les variables seront : Q01, Q02, Q03, Q10 et result.
 
        var str = $( this ).serialize(),
            jqXHR = $.post( "monFichier.php", str );
 
        jqXHR.done( function( data, textStatus, jqXHR ){
            // succès de la transaction, on doit traiter le contenu de data
            console.log( data, textStatus, jqXHR );
 
        });
 
        jqXHR.fail( function( jqXHR, textStatus, errorThrown ){
            // échec de la transaction, gérer la catastrophe
            console.log( jqXHR, textStatus, errorThrown );
 
        });
 
        jqXHR.always( function( jqXHR, textStatus ){
            // la transaction est terminée
            console.log( jqXHR, textStatus );
        });
 
        return false; // bloque la soumission directe du formulaire
    });
 
});