Discussion :

[Chezah]

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

JS

Code :

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

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

[Toufik83]

bonsoir,
1-

Code :

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

$('#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 :

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

convertFloat()

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

Code :

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

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 :

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

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

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

[Chezah]

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

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

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

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 ^^'

[Toufik83]

le plus simple c'est de faire ça

Code :

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

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);
      };
    });

[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 ?

[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.