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