Afficher/Cacher un formulaire

Bonsoir,

Je rencontre un problème dans la situation suivante. Le but initial est à partir d'un input type button de générer un formulaire via une requête AJAX qui va chercher le dit formulaire dans un fichier php dont le code est le suivant :

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
32
33
34
35
36
37
38
39
40
 
<!DOCTYPE html>
<?php
$notes = array('Do' => 'C', 'Ré' => 'D', 'Mi' => 'E', 'Fa' => 'F', 'Sol' => 'G', 'La' => 'B', 'Si' => 'B');
if($_SERVER['REQUEST_METHOD'] == 'POST'){
    if(empty($_POST['note_classique']) or ($_POST['note_classique'] == 'Faites votre choix')){
        $result = 'Aucune note choisie ! ';
    }
    else{
        $note = $_POST['note_classique'];
        $result = 'La note classique \'' .$note. '\' correspond à la note américaine ' .$notes[$note]. '.';
    }
}
?>
 
 
<html lang='fr'>
<head>
    <meta charset="UTF-8">
    <title> Une histoire du notes ...</title>
    <script src="demande_3.js" type="text/javascript"> </script>
</head>
    <body>
        <form id="formulaire" method="POST" action="devoir_2_demande_3.php">
            <fieldset>
                <legend> Correspondance des notes de musique </legend>
                <select name="note_classique">
                    <option value=''> Faites votre choix </option>
                    <?php
                        foreach($notes as $note_classique => $note_americaine){
                            echo '<option value="'.$note_classique.'">' .$note_classique. '</option>';
                        }
                    ?>
                </select><br />
                <p><input type='button' id='fermer' value='Close' /></p>
            </fieldset>
 
        </form>
    </body>
</html>

Une fois le formulaire affiché, un bouton close doit permettre de cacher le formulaire et faire réapparaître le premier bouton "Notation". Enfin, si on reclique sur ce bouton notation, on doit faire réapparaître le formulaire s'il existe ou relancer une requête AJAX.

J'ai essayé de quantifier tout cela dans un fichier javascript de code :

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
 
(function() {
    var exemple = {
        init : function(){
            window.addEventListener('load',function(event){
                var bouton = document.getElementById('bouton');
                bouton.addEventListener('click',function(event){
                    if(!document.getElementById('formulaire')){
                    this.style.visibility='hidden';
                    var xmlhttp = new XMLHttpRequest();
                    xmlhttp.addEventListener('readystatechange',function(event){
                    if(xmlhttp.readyState == 4){
                    if(xmlhttp.status == 200){
                        document.getElementById('affichage').innerHTML = xmlhttp.responseText;
                        var fermer = document.addEventListener('click',function(event){
                            bouton.style.visibility = 'visible';
                            document.getElementById('formulaire').style.visibility = 'hidden';
 
                        bouton.addEventListener('click',function(event){
                            if(document.getElementById('formulaire').style.visibility == 'hidden'){
                                document.getElementById('formulaire').style.visibility = 'visible';
                                bouton.style.visibility='hidden';
                            }
                            else{
                                bouton.style.visibility='hidden';
                                var xmlhttp = new XMLHttpRequest();
                                xmlhttp.addEventListener('readystatechange',function(event){
                                if(xmlhttp.readyState == 4){
                                if(xmlhttp.status == 200){
                                    document.getElementById('affichage').innerHTML = xmlhttp.responseText;
                                }
                                else{
                                    alert('error code : ' + xmlhttp.status + ' : ' + xmlhttp.statusText);
                                }
                                }
                                });
                                xmlhttp.open('GET', 'devoir_2_demande_3.php', true);
                                xmlhttp.send()
                            }
                        });
                            });
                    } // fin de la première requête ajax
                    else{
                        alert('error code : ' + xmlhttp.status + ' : ' + xmlhttp.statusText);
                    }
                }
                });
                xmlhttp.open('GET', 'devoir_2_demande_3.php', true);
                xmlhttp.send()
                    }
                });
            }); // Chargement de la page !
        }
    };
    exemple.init();
})();

Enfin le code html qui permet de générer le bouton "Notation" du départ :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
<!DOCTYPE html>
<html lang='fr'>
<head>
    <meta charset="UTF-8">
    <title> Une histoire du notes ...</title>
    <script src="demande_3.js" type="text/javascript"> </script>
</head>
    <body>
        <div id="bouton">
            <input type="button" name="bouton" value="Notation" />
        </div>
        <div id='affichage'>
        </div>
    </body>
</html>

Mon code javascript ne me donne pas le comportement souhaité. Dans un premier temps, le clic sur le bouton notation conduit bien à l'apparition du formulaire et le clic sur le bouton "Close" conduit bien à la réapparition du bouton "Notation". Mais lorsque je reclique sur notation, il ne réaffiche pas le formulaire caché. Pourquoi ?

Un grand merci de m'avoir lu et de proposer des pistes.

Bonne soirée à toutes et à tous.