Uncaught ReferenceError: afficherCacher is not defined

Version imprimable

Bonjour à tous.

Voilà plusieurs jour que je lutte avec ce code. Est ce que quelqu'un pourrais m'aider ?

Js

Code:

1
2
3
4
5
6
7
8
 
    $('choix').on('checked', function afficherCacher(){
        if(document.getElementById('prime_oui').checked){
            document.getElementById('divCacher').style.display="block";
        }else if (document.getElementById('prime_non').checked) {
            document.getElementById('divCacher').style.display="none";
        }
    });

HTML

Code:

1
2
3
4
5
6
7
8
9
10
11
 
<div class="col s12 input-group"><br>
       <input type="radio" name="prime" value="prime_oui" id="prime_oui" onClick="afficherCacher()" /><label for="prime_oui">Oui</label>
       <input type="radio" name="prime" value="prime_non" id="prime_non" onClick="afficherCacher()" /><label for="prime_non">Non</label>
</div>
<div class="col s12 input-group" id="divCacher" style="display:none;">
        <div class="input-field col s6">
                 <input placeholder="Le montant de votre prime, exemple : 1234 ou 1234.67" id="mt_prime" name="mt_prime" type="text" title="Ne peut       comporter qu'un nombre entier ou à virgule" value="<?= (isset($_SESSION['step3']['mt_prime']) && !empty($_SESSION['step3']['mt_prime'])) ? $_SESSION['step3']['mt_prime'] : ''; ?>" class="validate" required>
                 <label for="mt_prime" class="active">Montant de la prime <span class="red-text">*</span></label>
        </div>
</div>

A chaque foi je reçois ce code dans la console :
Uncaught ReferenceError: afficherCacher is not defined
Alors que le reste du JS marche. Je ne comprend vraiment pas.

Merci et bonne journée

09/11/2016, 10h38
SpaceFrog

Plusieurs remarques sur ton code ...

pourquoi utiliser document.getElementById vu que tu utilises Jqeury ?

Code:

on( 'checked'

Où donc as tu trouvé cet evènement ???

Code:

$('choix').on('checked', function afficherCacher(){

:nono:

il attend une closure ...

Code:

$('choix').on('checked', function (){ .../... }
09/11/2016, 10h44
Chezah

Hum l'evenment est en desespoir de cause on va dire ^^' de base j'avais mis

Code:

.on('click', function () {})

Citation:

il attend une closure ...

Code :

Code:

$('choix').on('checked', function (){ .../... }

Tu entends quoi par la ?

Code:

1
2
3
4
5
6
7
8
9
$('choix').on('click', function (){
        if($('#prime_oui').is(':checked'){
            $('#divCacher').show();}
        else{
               if ($('#prime_non').is(':checked')) {
                  $('#divCacher').hide();
                }
        }
    });

09/11/2016, 11h01
Chezah

Merci pour ce code beaucoup plus claire malgré tout mon problème n'est pas résolu j'ai toujours l'erreur qui s'affiche dans ma console et aucun affichage n'apparait lors de ma sélection :/
09/11/2016, 13h35
SpaceFrog

Tu as du mal implémenter mon code car je n'ai plus de fonction afficherCacher() ...
09/11/2016, 13h43
Chezah

Nan je le comprend mais maintenant je n'ai plus l'erreur on est d'accord avec exactement ton code et la bonne syntaxe (tu a oublier une parenthèse à la fin de la première ligne du if) mais je n'ai absolument rien qui s'affiche et la est mon problème majeur
09/11/2016, 14h41
SpaceFrog

l'évènement est sur le click ...
09/11/2016, 14h43
Chezah

Désoler je suis assez novice en JS et je sais que l'évènement est sur le click mais lorsque je click il ne ce passe rien justement ...
09/11/2016, 15h14
SpaceFrog

c'est que les condition checked ne sont pas remplies ...

Le HTML :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="col s12 input-group">
                            <div class="input-field col s12">
                                <label class="active">Prime <span class="red-text">*</span></label>
                            </div>
                            <div class="col s12 input-group"><br>
                                <input type="radio" name="prime" value="prime_oui" id="prime_oui" /><label for="prime_oui">Oui</label>
                                <input type="radio" name="prime" value="prime_non" id="prime_non" checked=""/><label for="prime_non">Non</label>
                                <br><br> 
                            </div>
                            <div class="col s12 input-group" id="divCacher" style="display:none;">
                                <div class="input-field col s6" id="divCacher" name ="divCacher">
                                <input placeholder="Le montant de votre prime, exemple : 1234 ou 1234.67" id="mt_prime" name="mt_prime" type="text" title="Ne peut comporter qu'un nombre entier ou à virgule" value="<?= (isset($_SESSION['step3']['mt_prime']) && !empty($_SESSION['step3']['mt_prime'])) ? $_SESSION['step3']['mt_prime'] : ''; ?>" class="validate" required>
                                <label for="mt_prime" class="active">Montant de la prime <span class="red-text">*</span></label>
                            </div>
                            </div>
                         </div>

Le JQUERY :

Code:

1
2
3
4
5
6
7
8
9
10
 
$('prime').on('click', function (){
        if($('#prime_oui').is(':checked')){
            $('#divCacher').show();}
        else{
            if ($('#prime_non').is(':checked')) {
                $('#divCacher').hide();
            }
        }
    });

Tu saurais me dire ou ce trouve le soucis ?

09/11/2016, 15h23
SpaceFrog

merci de poster le code html généré, pas le code php ...
09/11/2016, 15h24
Chezah

C'est le code Html avec un peu de php dedans
09/11/2016, 15h27
SpaceFrog

Si tu as du php dans ton code généré coté client c'est que tu as un sérieux problème ...

Si tu veux que l'on t'aide Colle le code généré ...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="input-field col s12">
                                <label class="active">Prime <span class="red-text">*</span></label>
                            </div>
                            <div class="col s12 input-group"><br>
                                <input type="radio" name="prime" value="prime_oui" id="prime_oui" /><label for="prime_oui">Oui</label>
                                <input type="radio" name="prime" value="prime_non" id="prime_non" checked="checked"/><label for="prime_non">Non</label>
                                <br><br> 
                            </div>
                            <div class="col s12 input-group" id="divCacher" style="display:none;">
                                <div class="input-field col s6" id="divCacher">
                                <input placeholder="Le montant de votre prime, exemple : 1234 ou 1234.67" id="mt_prime" name="mt_prime" type="text" title="Ne peut comporter qu'un nombre entier ou à virgule" class="validate" required>
                                <label for="mt_prime" class="active">Montant de la prime <span class="red-text">*</span></label>
                            </div>
                            </div>

Ce n'ai pas mon code de base et je sais que mélanger le php et l'html sur le même fichier ce n'est pas top.

09/11/2016, 15h38
SpaceFrog

Code:

$('prime')

tu n'as pas de balise prime ...

j'ai rajouté un id sur le label ...

Code:

$('#prime')

https://jsfiddle.net/rx22xo8q/
09/11/2016, 15h41
Chezah

D'accord merci et pour que sa s'affiche la div du coup ?
09/11/2016, 16h05
SpaceFrog

coche le bon radio et clique sur prime ...
09/11/2016, 16h09
Chezah

Ouha génial merci mais je vais etre chiante jusqu'au bout ^^' desoler.

Je veux que sa s'affiche quand je clique sur la radio et non sur prime ^^'
09/11/2016, 16h25
SpaceFrog

https://jsfiddle.net/rx22xo8q/1/

ou mieux:
https://jsfiddle.net/rx22xo8q/2/
09/11/2016, 16h35
Chezah

Génial sa marche super bien MERCIIIIII