Calcul a partir de radio

Version imprimable

Bonjour,

Je n'arrive pas a faire apparaitre le résultat de mon calcule sur le champs voulu. Sachant que cela doit s'afficher des le premier chiffre écrit et ce modifier a chaque ajout/suppression/modification.

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
<div class="col s12 input-group">
                            <div class="input-field col s6">
                                <input placeholder="Le montant de votre salaire, exemple : 1234 ou 1234.67" id="sal_brut" name="sal_brut" type="text" title="Ne peut comporter qu'un nombre entier ou à virgule" value="" class="validate" required>
                                <label for="sal_brut" class="active">Salaire brut <span class="red-text">*</span></label>
                            </div>
                            <div class="col s6">
                                <p class="font12 grey-text text-lighten-1"></p>
                            </div>
                            <div class="col s12 input-group">
                                <div class="input-field col s12">
                                    <label for="paie_salaire_brut" class="active">13ème mois <span class="red-text">*</span></label>
                                </div>
                                <div class="col s12 input-group"><br>
                                    <input type="radio" name="treiz_mois" value="12" id="treiz_mois_non" checked=""><label for="treiz_mois_non">Non  </label>
                                    <input type="radio" name="treiz_mois" value="13" id="treiz_mois_oui"><label for="treiz_mois_oui">Oui</label>
                                    <br><br> 
                                </div>
                            </div>
 
                            <div class="col s12 input-group">
                                <div class="input-field col s6">
                                    <input placeholder="" id="sal_brut_ann" name="sal_brut_ann" type="text" value="" class="" readonly>
                                    <label for="sal_brut_ann" class="active">Salaire brut annuel</label>
                                </div>
                                <div class="col s6">
                                    <p class="font12 grey-text text-lighten-1">Total du salaire brut calculé automatiquement</p>
                                </div>
                            </div>
                        </div>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
    // Calcule du 13ème moi
 
    $('#12, #13').on('keyup change', function(){
        var salBrut = convertFloat($('#sal_brut').val());
 
        if($('#12') .is (':checked')){ 
            var salBrutAnn = Math.abs(salBrut * 13);
            $('#sal_brut_ann').val(salBrutAnn);
        } else {
            var salBrutAnn = Math.abs(salBrut * 12);
            ('#sal_brut_ann').val(salBrutAnn);
        }; 
    });

Je suis encore novice en JS

Merci et bonne journée

10/11/2016, 15h46
Toufik83

bonsoir,
1-

Code:

$('#12, #13').on(..)

, tu met 12,13 comme id de l'input radio, pourtant les radios, n'ont pas de id=12 ni id=13, ils ont plutôt un id="treiz_mois_oui" et id="treiz_mois_non".
2-

Code:

convertFloat()

n'existe pas, il y'a plutôt parseFloat();
3 -

Code:

if($('#12') .is (':checked'))

tu vérifie si l’élément ayant id=12 est checked, ça donne toujours false, puisque élément id=12 n'existe pas dans ta page.
4-

Code:

('#sal_brut_ann').val(salBrutAnn);

, tu as oublié un $ tout au début de la ligne.

Bonjour et merci pour ta réponse si je suis bien ton raisonnement :

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
<div class="col s12 input-group">
                            <div class="input-field col s6">
                                <input placeholder="Le montant de votre salaire, exemple : 1234 ou 1234.67" id="sal_brut" name="sal_brut" type="text" title="Ne peut comporter qu'un nombre entier ou à virgule" value="" class="validate" required>
                                <label for="sal_brut" class="active">Salaire brut <span class="red-text">*</span></label>
                            </div>
                            <div class="col s6">
                                <p class="font12 grey-text text-lighten-1"></p>
                            </div>
                            <div class="col s12 input-group">
                                <div class="input-field col s12">
                                    <label for="nb_mois" class="active">13ème mois <span class="red-text">*</span></label>
                                </div>
                                <div class="col s12 input-group"><br>
                                    <input type="radio" name="nb_mois" value="12" id="nb_mois_12" checked=""><label for="nb_mois_12">Non  </label>
                                    <input type="radio" name="nb_mois" value="13" id="nb_mois_13"><label for="nb_mois_13">Oui</label>
                                    <br><br> 
                                </div>
                            </div>
 
                            <div class="col s12 input-group">
                                <div class="input-field col s6">
                                    <input placeholder="" id="sal_brut_ann" name="sal_brut_ann" type="text" value="" class="" readonly>
                                    <label for="sal_brut_ann" class="active">Salaire brut annuel</label>
                                </div>
                                <div class="col s6">
                                    <p class="font12 grey-text text-lighten-1">Total du salaire brut calculé automatiquement</p>
                                </div>
                            </div>
                        </div>

Et JS

Code:

1
2
3
4
5
6
7
8
9
10
11
 $('[name="nb_mois"]').on('keyup', function(){
        var salBrut = parseFloat($('#sal_brut').val());
 
        if($('#nb_mois_13').is(':checked')){ 
            var salBrutAnn = Math.abs(salBrut * 13);
            $('#sal_brut_ann').val(salBrutAnn);
        } else {
            var salBrutAnn = Math.abs(salBrut * 12);
            $('#sal_brut_ann').val(salBrutAnn);
        }; 
    });

Malgré tout je dois encore faire des erreurs car ça ne fonctionne toujours pas ^^'

le plus simple c'est de faire ça

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
$('input[type=radio]').on('change', function() {
      var salBrut = parseFloat($('#sal_brut').val());
 
 
      if ($('#treiz_mois_oui').is(':checked')) {
        var salBrutAnn = Math.abs(salBrut * 13);
        $('#sal_brut_ann').val(salBrutAnn);
      } else {
        var salBrutAnn = Math.abs(salBrut * 12);
        $('#sal_brut_ann').val(salBrutAnn);
      };
    });

10/11/2016, 16h05
Chezah

Que change cette manière ? Sachant qu'on ma conseiller celle que j'ai mis ^^'

Et quelle est la difference entre keyup et change ?
10/11/2016, 16h16
Toufik83

la différence entre les deux manières c'est $('input[type=radio]') retourne TOUT les input de type radio existants sur ta page. par-contre $('[name="nb_mois"]') (celle que tu as mis), ne retourne rien.
puis la différence entre keyup et change, dans ton cas, ça donne la même chose, mais souvent on utilise 'change' sur les radio et les select, et keyup sur les zone de texte... et autres éléments html.
10/11/2016, 16h18
Chezah

D'accord merci sa marche mais que l'orsque je clique sur la radio hors moi je veux que des qu'un chiffre est taper la conversion ce fasse d'elle même et si il doit mettre un treizieme mois, la il change la radio

dans ce cas il y'a deux événements à gérer, le premier c'est le moment ou l'utilisateur écrit dans la zone, puis le deuxième quand l'utilisateur sélectionne un radio.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
    function Go() {
      var salBrut = parseFloat($('#sal_brut').val());
      var salBrutAnn;
 
      if ($('#treiz_mois_oui').is(':checked')) { // j'utilise le id du premier exemple "treiz_mois_oui", si tu as changé le id tu le remplace ici.
        salBrutAnn = Math.abs(salBrut * 13);
      } else {
        salBrutAnn = Math.abs(salBrut * 12);
      }
      $('#sal_brut_ann').val(salBrutAnn);
    } //fin Go()
 
    $('input[type=radio],#sal_brut').on('change keyup', function() {
      Go();
 
    });

10/11/2016, 16h37
Chezah

Merci beaucoup, super claire dans tes explications et très précis.

je vais enfin avancer dans mon travail. Encore merci :)
10/11/2016, 16h42
Toufik83

bonne continuation, et n'hésite pas de poster d'autres sujets au cas ou tu trouve des difficultés en jQuery.