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