Afficher/Cacher un formulaire

**beckhton** · 21/10/2014, 21h23

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

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

**beckhton** · 22/10/2014, 09h56

Le problème n'est pas résolu mais je voudrais le comportement suivant :

- Quand je clique sur le bouton notation, mon formulaire php s'affiche (cette partie fonctionne !)
- Ensuite quand je clique sur le bouton 'close' de mon formulaire, le bouton 'Notation' refait son apparition (ca marche aussi)

-Par contre ce qui ne marche c'est le comportement suivant : je voudrais qu'en recliquant sur le bouton notation mon formulaire qui est caché réapparaisse ou alors si le formulaire n'est pas là, une requête ajax pour le récuperer.

Voici mes codes :

HTML

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
 
<!DOCTYPE html>
<html lang='fr'>
<head>
    <meta charset="UTF-8">
    <title> Une histoire du notes ...</title>
    <script src="devoir_2_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>

PHP

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

JS

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
 
(function () {
    var exemple = {
        init: function () {
            window.addEventListener('load', function (event) {
                var bouton = document.getElementById('bouton');
                bouton.addEventListener('click', function (event) {
                    if(!document.getElementById('formulaire')){
                    bouton.style.display = 'none';
                    var xmlhttp = new XMLHttpRequest();
                    xmlhttp.addEventListener('readystatechange', function (event) {
                        if (xmlhttp.readyState == 4) {
                            if (xmlhttp.status == 200) {
                                var affichage = document.getElementById('affichage');
                                affichage.innerHTML = xmlhttp.responseText;
                                var fermer = document.addEventListener('click', function (event) {
                                    bouton.style.display = 'block';
                                    affichage.style.display = 'none';
                                });
                            } 
                            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();
})();

Merci d'avance.

Afficher/Cacher un formulaire

JavaScript

Vue hybride

Discussions similaires

Partager

Partager