Récupération de value de select pour traitement Ajax

Version imprimable

Bonjour,

Je suis plutôt ignorant en JS et AJAX mais j'ai pris soin de consulter cours, livres et autres forum avant de poster mon désespoir ici même

Pour le contexte : je cherche à récupérer les values de 4 selects d'un même formulaire, alimentés par des bases de données.
Ces selects servent à filtrer des résultats actualisés en Ajax. Je récupère bien l'intégralité des éléments recherchés à l'ouverture de la page sur une fonction Ajax (getAllProfessionalPieces).

Sauf que lors du choix d'au moins un des critères de recherche(select), dont certains pourraient être laissés vierges et de la validation par le boutton, je ne parviens à récupérer qu'un seule valeur (la 1ère : placeChoice).
Donc là, c'est le blocage ... et je perds patience.

Code pour les Select :

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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
 
<div class="pieces_form">
    <form id="filter_form" name="filter_form">
 
        <!-- PLACE FILTER -->
        <div id="filter_place">
            <h3>Lieu de représentation :</h3>
            <select id="place_choice" name="place_choice" class="place_list" method="post" >
                    <option value="" selected="selected">Choisissez</option>
                <?php
                foreach ($placeDatas as $placeData) : ?>
                    <option value="<?php echo $placeData['id'] ?>"><?php echo $placeData['universe'] ?></option>
                <?php
                endforeach;
                ?>
                <?php
                    if (!empty($_POST['place_choice']) && (isset($_POST['place_choice'])))
                    {
                        echo '<option value="<?php $placeData["id"] ?>" selected="selected"><?php $placeData["universe"] ?></option>';
                        header("Location:index.php?page=professionnelsSpectacles");
                    }
                ?>
            </select>
        </div>
 
        <!-- GAUGE OF PERSONS FILTER -->
        <div id="filters_gauge">
            <h3>Nombre de spectateurs :</h3>
            <select id ="gauge_choice" name="gauge_choice" class="gauge_list" method="post" >
                    <option value="" selected="selected">Choisissez</option>
                <?php
                foreach ($gaugeDatas as $gaugeData) : ?>
                    <option value="<?php $gaugeData['max_gauge'] ?>"><?php echo $gaugeData['max_gauge'] ?></option>
                <?php
                endforeach;
                ?>
                    <?php
                    if (!empty($_POST['gauge_choice']) && (isset($_POST['gauge_choice'])))
                    {
                        echo '<option value="<?php $gaugeData["max_gauge"] ?>" selected="selected"><?php $gaugeData["max_gauge"] ?></option>';
                        header("Location:index.php?page=professionnelsSpectacles");
                    }
                ?>
            </select>
        </div>
 
        <!-- DURATION OF PIECE FILTER -->
        <div id="filters_duration">
            <h3>Durée de la pièce :</h3>
            <select id="duration_choice" name="duration_choice" class="duration_list" method="post" >
                <option value="" selected="selected">Choisissez</option> 
                <?php
                foreach ($durationDatas as $durationData) : ?>
                    <option value="<?php $durationData['duration'] ?>"><?php echo $durationData['duration'] ?></option>
                <?php
                endforeach;
                ?>
                <?php
                    if (!empty($_POST['duration_choice']) && (isset($_POST['duration_choice'])))
                    {
                        echo '<option value="<?php $durationData["duration"] ?>" selected="selected"><?php $durationData["duration"] ?></option>';
                        header("Location:index.php?page=professionnelsSpectacles");
                    }
                ?>
            </select>
        </div>
 
        <!-- KIND OF PUBLIC OR AUDIENCE FILTER -->
        <div id="filters_audience">
            <h3>Public :</h3>
            <select id="audience_choice" name="audience_choice" class="audience_list" method="post" >
 
 
                <option value="" selected="selected">Choisissez</option> 
                <?php 
                foreach ($audienceDatas as $audienceData) : ?>
                    <option value="<?php $audienceData['audience'].' '.'selectes=selected' ?>"><?php echo $audienceData['audience'] ?></option>
                <?php
                endforeach;
                ?>
                <?php
                    if (!empty($_POST['audience_choice']) && (isset($_POST['audience_choice'])))
                    {
                        echo '<option value="<?php $audienceData["audience"] ?>" selected="selected"><?php $audienceData["audience"] ?></option>';
                        header("Location:index.php?page=professionnelsSpectacles");
                    }
                ?>
            </select>
        </div>
 
        <div id="submitajax">
            <button type="button" onClick="getSpecificProfessionalPieces({place_choice:[place_choice], gauge_choice:['gauge_choice'], duration_choice:[duration_choice], audience_choice:[audience_choice]})">Rechercher</button>
        </div>
    </form>
</div>

Code JS/Ajax

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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
 
function getChoices() {
 
    var placeChoice;
    if (document.getElementById("place_choice").value =!"")
    {
        placeChoice = document.getElementById("place_choice").value;
    } else {
        placeChoice = null;
    }
    console.log(placeChoice);
 
    var gaugeChoice;
    if (document.getElementById("gauge_choice").value =!"")
    {
        gaugeChoice  = document.getElementById("gauge_choice").value;
    } else {
        gaugeChoice = null;
    }
    console.log(gaugeChoice);
 
    var durationChoice;
    if (document.getElementById("duration_choice").value =!"")
    {
        durationChoice = document.getElementById("duration_choice").value;
    } else {
        durationChoice = null;
    }
    console.log(durationChoice);
 
    var audienceChoice;
    if (document.getElementById("audience_choice").value =!"")
    {
        audienceChoice = document.getElementById("audience_choice").value;
    } else {
        audienceChoice = null;
    }
    console.log(audienceChoice);
 
 
    if ((placeChoice = !"") || (gaugeChoice = !"") || (durationChoice = !"") || (audienceChoice = !""))
    {
        var choices = 
            "placeChoice=" + encodeURIComponent(placeChoice) +
            "&gaugeChoice=" + encodeURIComponent(gaugeChoice) +
            "&durationChoice=" + encodeURIComponent(durationChoice) +
            "&audienceChoice=" + encodeURIComponent(audienceChoice);
    } else {
        alert ("Merci de choisir des éléments de sélection dans les listes proposées");
        getAllProfessionalPieces;
    }
}
 
 
function getSpecificProfessionalPieces() {
    var xhr = new XMLHttpRequest();
    getChoices();
    xhr.onreadystatechange = function () {
        callBack(xhr);
    }
    xhr.open("POST", "../professionelsSpectaclesFiltree.phtml", true);
    xhr.setRequestHeader("Content-type", "applicationx-www-form-urlencoded");
    xhr.send(choices);
    xhr.responseType = "text";
}
 
 
function callBack(xhr) {
    if (xhr.readyState == 4 && xhr.status == 200) {
        results.innerHTML = xhr.responseText;
    } else if (xhr.readyState == 4 && xhr.status == 404) {
        alert("Une erreur s'est produite. Merci d'actualiser la page.");
    }
}

Aussi, si vous aviez un conseil, un commentaire, ou une source d'inspiration que je n'aurait pas encore consultée, je suis preneur !

Merci d'avance,

Bonne journée,

Salut,

Commençons par les erreurs html d'abord :

Code:

<select id="place_choice" ... method="post" >

On ne met pas un attribut method dans un <select>, mais plutôt dans un <form>
Côté ergonomie :

1-Les variables var placeChoice,gaugeChoice,durationChoice,audienceChoice,choices sont déclarées dans le contexte de la fonction getChoices() mais elles sont aussi utilisées dans getSpecificProfessionalPieces(). il faut les mettre comme des variables globales.

2-Le bouton
Code:

1 2 3 4 <button type="button" onClick="getSpecificProfessionalPieces({place_choice:[place_choice], gauge_choice:['gauge_choice'], duration_choice:[duration_choice], audience_choice:[audience_choice]})">Rechercher</button> </div> </form> </div>
normalement doit être type="submit", après il faut empêcher la soumission du formulaire.

3-Au lieu d'ajouter un attribut onclick au bouton, essaies de gérer l'événement submit sur le <form> :

Soit avec l'attribut onsubmit :

Code:

<form id="filter_form" name="filter_form" onsubmit="getSpecificProfessionalPieces();return false;">

Ou bien avec addEventListener :
Code:

1 2 3 4 document.getElementById('filter_form').addEventListener('submit', function(e) { e.preventDefault(); //empêcher la soumission du formulaire getSpecificProfessionalPieces(); });
C'est ce que j'ai pu remarquer pour l'instant.

Salut,

Merci pour tes retours. C'est vrai que je n'arrive plus à prendre du recul par rapport à ce que je fais et j'avoue avoir essayé tellement de choses qu'il reste des reliquats de mes réflexions dans ce que tu as pu lire.

Concernant le html : c'est corrigé. Le 'post' dans le select venait du fait que j'ai tenté de lancer ma fonction initialement sur un onchange positionné dans chacun des select avant de revenir sur une validation par un bouton.

Concernant mes variables xxxChoice. Merci encore, c'est tellement logique finalement !

Concernant le bouton : je ne vois pas comment empêcher la soumission du formulaire Oo ! En revanche, je comprends qu'il ne faille pas rafraîchir l'intégralité de la page :-)

Sinon, je n'ai pas intégrer JQuery :-)

après correction : 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
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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<div class="pieces_form">
<form id="filter_form" name="filter_form" method="post">
 
    <!-- PLACE FILTER -->
    <div id="filter_place">
        <h3>Lieu de représentation :</h3>
        <select id="place_choice" name="place_choice" class="place_list">
        <!--onchange="getSpecificProfessionalPieces(this.value)" -->
                <option value="" selected="selected">Choisissez</option>
            <?php
            foreach ($placeDatas as $placeData) : ?>
                <option value="<?php echo $placeData['id'] ?>"><?php echo $placeData['universe'] ?></option>
            <?php
            endforeach;
            ?>
            <?php
                if (!empty($_POST['place_choice']) && (isset($_POST['place_choice'])))
                {
                    echo '<option value="<?php $placeData["id"] ?>" selected="selected"><?php $placeData["universe"] ?></option>';
                    header("Location:index.php?page=professionnelsSpectacles");
                }
            ?>
        </select>
    </div>
 
    <!-- GAUGE OF PERSONS FILTER -->
    <div id="filters_gauge">
        <h3>Nombre de spectateurs :</h3>
        <select id ="gauge_choice" name="gauge_choice" class="gauge_list">
        <!--onchange="getSpecificProfessionalPieces(this.value)" -->
                <option value="" selected="selected">Choisissez</option>
            <?php
            foreach ($gaugeDatas as $gaugeData) : ?>
                <option value="<?php $gaugeData['max_gauge'] ?>"><?php echo $gaugeData['max_gauge'] ?></option>
            <?php
            endforeach;
            ?>
                <?php
                if (!empty($_POST['gauge_choice']) && (isset($_POST['gauge_choice'])))
                {
                    echo '<option value="<?php $gaugeData["max_gauge"] ?>" selected="selected"><?php $gaugeData["max_gauge"] ?></option>';
                    header("Location:index.php?page=professionnelsSpectacles");
                }
            ?>
        </select>
    </div>
 
    <!-- DURATION OF PIECE FILTER -->
    <div id="filters_duration">
        <h3>Durée de la pièce :</h3>
        <select id="duration_choice" name="duration_choice" class="duration_list">
        <!--onchange="getSpecificProfessionalPieces(this.value)" -->
            <option value="" selected="selected">Choisissez</option> 
            <?php
            foreach ($durationDatas as $durationData) : ?>
                <option value="<?php $durationData['duration'] ?>"><?php echo $durationData['duration'] ?></option>
            <?php
            endforeach;
            ?>
            <?php
                if (!empty($_POST['duration_choice']) && (isset($_POST['duration_choice'])))
                {
                    echo '<option value="<?php $durationData["duration"] ?>" selected="selected"><?php $durationData["duration"] ?></option>';
                    header("Location:index.php?page=professionnelsSpectacles");
                }
            ?>
        </select>
    </div>
 
    <!-- KIND OF PUBLIC OR AUDIENCE FILTER -->
    <div id="filters_audience">
        <h3>Public :</h3>
        <select id="audience_choice" name="audience_choice" class="audience_list">
 
            <!--onchange="getSpecificProfessionalPieces(this.value)" -->
            <option value="" selected="selected">Choisissez</option> 
            <?php 
            foreach ($audienceDatas as $audienceData) : ?>
                <option value="<?php $audienceData['audience'].' '.'selectes=selected' ?>"><?php echo $audienceData['audience'] ?></option>
            <?php
            endforeach;
            ?>
            <?php
                if (!empty($_POST['audience_choice']) && (isset($_POST['audience_choice'])))
                {
                    echo '<option value="<?php $audienceData["audience"] ?>" selected="selected"><?php $audienceData["audience"] ?></option>';
                    header("Location:index.php?page=professionnelsSpectacles");
                }
            ?>
        </select>
    </div>
 
    <div id="submitajax">
        <button type="button" onClick="getSpecificProfessionalPieces({place_choice:[place_choice], gauge_choice:['gauge_choice'], duration_choice:[duration_choice], audience_choice:[audience_choice]})">Rechercher</button>
    </div>
</form>
</div>

Après Correction : JS

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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
var placeChoice;
var gaugeChoice;
var durationChoice;
var audienceChoice;
var choices;
 
function getChoices() {
 
    var placeChoice;
    if (document.getElementById("place_choice").value =!"")
    {
        placeChoice = document.getElementById("place_choice").value;
    } else {
        placeChoice = null;
    }
    console.log(placeChoice);
 
    var gaugeChoice;
    if (document.getElementById("gauge_choice").value =!"")
    {
        gaugeChoice  = document.getElementById("gauge_choice").value;
    } else {
        gaugeChoice = null;
    }
    console.log(gaugeChoice);
 
    var durationChoice;
    if (document.getElementById("duration_choice").value =!"")
    {
        durationChoice = document.getElementById("duration_choice").value;
    } else {
        durationChoice = null;
    }
    console.log(durationChoice);
 
    var audienceChoice;
    if (document.getElementById("audience_choice").value =!"")
    {
        audienceChoice = document.getElementById("audience_choice").value;
    } else {
        audienceChoice = null;
    }
    console.log(audienceChoice);
 
    var choices = 
        "placeChoice=" + encodeURIComponent(placeChoice) +
        "&gaugeChoice=" + encodeURIComponent(gaugeChoice) +
        "&durationChoice=" + encodeURIComponent(durationChoice) +
        "&audienceChoice=" + encodeURIComponent(audienceChoice);
}
 
 
function getSpecificProfessionalPieces() {
    var xhr = new XMLHttpRequest();
    getChoices();
    xhr.onreadystatechange = function () {
        callBack(xhr);
    }
    xhr.open("POST", "../contes-a-rebours/src/views/professionelsSpectaclesFiltree.phtml", true);
    xhr.setRequestHeader("Content-type", "applicationx-www-form-urlencoded");
    xhr.send(choices);
    xhr.responseType = "text";
}
 
 
function callBack(xhr) {
    if (xhr.readyState == 4 && xhr.status == 200) {
        results.innerHTML = xhr.responseText;
    } else if (xhr.readyState == 4 && xhr.status == 404) {
        alert("Une erreur s'est produite. Merci d'actualiser la page.");
    }
}

Après ces éléments de correction, j'ai maintenant une erreur avec $_POST et l'ouverture de mon fichier de destination xhr.send(choices), choices étant la variable regroupant tous les choix des 4 selects.

Est-ce dû au fait qu'il y ai ce rafraîchissement de page sur l'action du bouton ? Ou à la concaténation des 4 variables ?

Merci encore !!

08/11/2019, 14h41
Toufik83

Tu n'as pas correctement corrigé les déclarations des variables, supprimes les var=... de la fonction getChoices(), elles sont déjà déclarées en dessus.

Citation:

Envoyé par Gryzly

Concernant le bouton : je ne vois pas comment empêcher la soumission du formulaire

Regarde mon post en haut, je t'ai ajouté 2 approches concernant la soumission, et n'oublis surtout pas de modifier le type du bouton en submit type="submit" ou même le supprimer au complet, et supprimer l'attribut onClick.
08/11/2019, 15h07
Gryzly

Vu ! Merci !!!!

Effectivement, les variables déclarées 2 fois ce n'est pas terrible !

J'ai bien regardé ce que tu as ajouté concernant la soumission du formulaire, je pars sur le js avec addEventListener (j'en comprends plus facilement pour l'avoir déjà utilisé) et cela me semble plus propre de le traiter dans le JS.

J'ai aussi bien pris note de tes remarques et ai changé le type du bouton en submit. Mais tu parles de le supprimer complètement : pourquoi ? Quel serait le déclencheur ? Un onchange sur les select ?

Après correction, il semble que ce qui pose problème maintenant c'est ma déclaration de 'choices' dans le send. Cela viendrait de ma concaténation ? c'est ce type d'affichage dans la console :
placeChoice=&gaugeChoice=&durationChoice=&audienceChoice=

Et forcément un 404 sur le fichier du xhr.open
08/11/2019, 15h21
Toufik83

Citation:

Envoyé par Gryzly

Mais tu parles de le supprimer complètement : pourquoi ?

Supprimes seulement le onClick, pas le bouton au complet, parce que c'est l'EventListener que tu as mis en js qui va s'occuper de la soumission.

Je viens de voir une erreur de syntaxe 8O que je n'ai pas vu au départ, c'est l'opérateur de comparaison != et pas =!, tu ne vois pas des erreurs dans le console du navigateur ?8O
08/11/2019, 15h28
Gryzly

Effectivement !! je ne vois plus rien.
08/11/2019, 15h36
Gryzly

Super !! Merci encore !!

Du coup, pourquoi je ne parviens pas à récupérer les valeurs des selects 2, 3 et 4 alors que le 1er passe très bien. Les valeurs 2, 3 et 4 sont systématiquement 'null'.

Sur le 1er j'ai un id. Alors que sur les autres je dois récupérer une chaîne de caractères.

Et coup, ces valeurs, je les traite avec mon php en Get ou en Post ? En Get car elles sont dans l'URL, c'est bien ça (si j'ai bien compris le traitement avec Ajax ?
08/11/2019, 16h05
Invité

Bonjour,

c'est toi-même qui définit dans le script JS comment tu vas récupérer les données dans le fichier PHP :

Code:

xhr.open("POST", "....php", true);

Donc, ici, avec $_POST.

Je pense savoir pourquoi les 3 variables sont null, eh ben parce que il manque un echo dans les attributs value :

Code:

1
2
3
4
 
value="<?php echo $gaugeData['max_gauge']; ?>"
value="<?php echo $durationData['duration'] ?>"
value="<?php echo $audienceData['audience'].' '.'selectes=selected' ?>" //ici une faute de frappe selected et pas selectes, et il faut faire sortir l'attribut selected de l'intérieur du value et même le supprimer, parce qu'il ne sert à rien.

08/11/2019, 16h17
Gryzly

:mur::mur:

Facepalm ! Comment perdre du temps et de l’énergie en JS - Saison 1 !!

Merci Messieurs !!
Merci Toufik83 ! Vraiment un grand MERCI !!

Je vais poursuivre ...

A suivre ...
08/11/2019, 16h27
Toufik83

De rien, on est la pour s'entre-aider.
Saison 2 :mouarf:
14/11/2019, 09h22
Invité

Bonjour,

J'ai déplacé la suite dans le forum PHP : https://www.developpez.net/forums/d2...raitement-sql/
14/11/2019, 09h23
Gryzly

Euh, en fait, quelques heures de sommeil et un peu de relecture ce matin et c'est résolu : problème de "" et de '' et de `` dans la rédaction de la requête.

Merci ! Merci !!

Et bonne journée !!!