Passage de 2 variables dans requête ajax

Version imprimable

Bonjour,

j'ai 3 liste lié qui fonctionne seul la derniere liste doit avoir 2 variable en passsage j'ai modifie donc la fonction mais il me retourne pas de resultat mon message Pas de service public.

Je souhaite recuperer la valeur de la liste 1 et liste 2 pour faire la requete dans fetch_city pour la liste 3.

index :

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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="icon" href="http://www.thesoftwareguy.in/favicon.ico" type="image/x-icon" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="Multiple dropdown with jquery ajax and php">
        <meta name="keywords" content="Multiple dropdown with jquery ajax and php">
        <meta name="author" content="Shahrukh Khan">
        <title>Multiple dropdown with jquery ajax and php - thesoftwareguy</title>
        <link rel="stylesheet" href="style.css" type="text/css" />
        <style>
            select {
                padding:3px;
                border-radius:5px;
                background: #f8f8f8;
                color:#000;
                border:1px solid #EB028F;
                outline:none;
                display: inline-block;
                width:250px;
                cursor:pointer;
                text-align:left;
                font:inherit;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="body">
                <div class="mainTitle" >Multiple dropdown with jquery ajax and php</div>
                <div class="height20"></div>
                <article>
                    <table style="margin:0 auto;width:50%" >
                        <tr>
                            <td align="center" height="50">
                                <?php
                                $sql = "SELECT distinct(code_postal) FROM ef_servicepublic ORDER BY code_postal";
                                try {
                                    $stmt = $DB->prepare($sql);
                                    $stmt->execute();
                                    $results = $stmt->fetchAll();
                                } catch (Exception $ex) {
                                    echo($ex->getMessage());
                                }
                                ?>
                                <label>Code postal:
                                    <select name="code_postal" id="code_postal" onChange="showState(this);">
                                        <option value="">Please Select</option>
                                        <?php foreach ($results as $rs) { ?>
                                            <option value="<?php echo $rs["code_postal"]; ?>"><?php echo $rs["code_postal"]; ?></option>
                                        <?php } ?>
                                    </select>
                                </label>
                            </td>
                        </tr>
                        <tr>
                            <td align="center" height="50"><div id="output1"></div> </td>
                        </tr>
                        <tr>
                            <td align="center" height="50"><div id="output2"></div> </td>
                        </tr>
                    </table> 
 
 
 
                </article>
 
            </div>
        </div>
        <script src="jquery-1.9.0.min.js"></script>
        <script>
                    function showState(sel) {
                        var code_postal = sel.options[sel.selectedIndex].value;
                        $("#output1").html("");
                        $("#output2").html("");
                        if (code_postal.length > 0) {
 
                            $.ajax({
                                type: "POST",
                                url: "fetch_state.php",
                                data: "code_postal=" + code_postal,
                                cache: false,
                                beforeSend: function() {
                                    $('#output1').html('<img src="loader.gif" alt="" width="24" height="24">');
                                },
                                success: function(html) {
                                    $("#output1").html(html);
                                }
                            });
                        }
                    }
 
                    function showCity() {
                                
                        //var commune = sel.options[sel.selectedIndex].value;
                                                
var code_postal = document.getElementById("code_postal" );
var commune = document.getElementById("commune" );
typeof(document.getElementById(commune));
if ((code_postal.options[code_postal.options.selectedIndex].value)
    && (commune.options[commune.options.selectedIndex].value ))
{
  
                        if (commune.length > 0) {
                            $.ajax({
                                type: "POST",
                                url: "fetch_city.php",
                                data: "commune=" + commune +'&code_postal='+ code_postal,
                                cache: false,
                                beforeSend: function() {
                                    $('#output2').html('<img src="loader.gif" alt="" width="24" height="24">');
                                },
                                success: function(html) {
                                    $("#output2").html(html);
                                }
                            });
                        } else {
                            $("#output2").html("");
                        }
                    }
                                        
                                        }      
 
                                        </script>

le script php fetch_state.php :

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
require("configure.php");
$commune = ($_REQUEST["commune"] <> "") ? trim($_REQUEST["commune"]) : "";
$code_postal = ($_REQUEST["code_postal"] <> "") ? trim($_REQUEST["code_postal"]) : "";
 
 
if ($commune <> "") {
 
    $sql = "SELECT nom_service_public FROM ef_servicepublic WHERE commune = :sid and code_postal = :code_postal ORDER BY nom_service_public";
 
	try {
        $stmt = $DB->prepare($sql);
        $stmt->bindValue(":sid", trim($commune));
		$stmt->bindValue(":code_postal", trim($code_postal));
        $stmt->execute();
        $results = $stmt->fetchAll();
 
 
 
    } catch (Exception $ex) {
        echo($ex->getMessage());
    }
 
 
     if (count($results) > 0) {
        ?>
        <label>Nom service public: 
            <select name="city" id="city" name="box">
                <option value="">Please Select</option>
                <?php foreach ($results as $rs) { ?>
                    <option value="<?php echo $rs["id_service_public"]; ?>"><?php echo $rs["nom_service_public"]; ?></option>
                <?php } ?>
            </select>
        </label>
        <?php
    }
	else
	{
		echo'<label>Pas de service public</label>';
	}
}

le fetch_city.php :

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
<?php
/*
 * @author Shahrukh Khan
 * @website <a href="http://www.thesoftwareguy.in" target="_blank">http://www.thesoftwareguy.in</a>
 * @facebbok <a href="https://www.facebook.com/Thesoftwareguy7" target="_blank">https://www.facebook.com/Thesoftwareguy7</a>
 * @twitter <a href="https://twitter.com/thesoftwareguy7" target="_blank">https://twitter.com/thesoftwareguy7</a>
 * @googleplus <a href="https://plus.google.com/+thesoftwareguyIn" target="_blank">https://plus.google.com/+thesoftwareguyIn</a>
 */
 
 
require("configure.php");
$code_postal = ($_REQUEST["code_postal"] <> "") ? trim($_REQUEST["code_postal"]) : "";
if ($code_postal <> "") {
    $sql = "SELECT distinct(commune) FROM ef_servicepublic WHERE code_postal = :cid ORDER BY commune";
    try {
        $stmt = $DB->prepare($sql);
        $stmt->bindValue(":cid", trim($code_postal));
        $stmt->execute();
        $results = $stmt->fetchAll();
    } catch (Exception $ex) {
        echo($ex->getMessage());
    }
    if (count($results) > 0) {
        ?>
        <label>Ville : 
            <select name="commune" id="commune" onchange="showCity(this);">
                <option value="">Please Select</option>
                <?php foreach ($results as $rs) { ?>
                    <option value="<?php echo $rs["commune"];$code_postal ?>"><?php echo $rs["commune"]; ?>  (<?php echo $code_postal ?>)</option>
                <?php } ?>
            </select>
        </label>
        <?php
    }
}
?>

06/03/2019, 14h10
kevin254kl

Salut,

Test dans phpmyadmin ou adminer ta requête sql

Code:

SELECT nom_service_public FROM ef_servicepublic WHERE commune = :sid and code_postal = :code_postal ORDER BY nom_service_public

fait un var_dump de $commune et $code_postal (utilise plutôt le camel case codePostal :) ) et ajoute les pour le teste avec ta requête. Fait également un var_dump de $results.

je fais ca de suite si tu peux patienter 5 min je dois finir ca rapidement . merci beaucoup.

les vardump me renvoie
Code postal:
Ville :

Citation:

string(26) "[object HTMLSelectElement]" string(26) "[object HTMLSelectElement]" array(0) { }
Code:

1 2 3 4 5 6 7 8 9 10 11 $sql = "SELECT nom_service_public FROM ef_servicepublic WHERE commune = :sid and code_postal = :code_postal ORDER BY nom_service_public"; var_dump ($commune); var_dump ($code_postal); try { $stmt = $DB->prepare($sql); $stmt->bindValue(":sid", trim($commune)); $stmt->bindValue(":code_postal", trim($code_postal)); $stmt->execute(); $results = $stmt->fetchAll(); var_dump ($results);
j'ai bien un résultat retourner pour

Code:

SELECT * FROM ef_servicepublic WHERE commune = "BOURG-EN-BRESSE CEDEX" AND code_postal="01005"

dans le phpmyadmin et quand je remplace les valeurs des variables au direct dans le fichier php.

06/03/2019, 14h29
kevin254kl

Dans ton code enlève les trim, cela enlève les espaces BOURG-EN-BRESSE CEDEX -> BOURG-EN-BRESSECEDEX

j'ai modifier merci en tout cas de m'aider.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
require("configure.php");
$commune = ($_REQUEST["commune"] <> "") ? ($_REQUEST["commune"]) : "";
$code_postal = ($_REQUEST["code_postal"] <> "") ? ($_REQUEST["code_postal"]) : "";
 
 
if ($commune <> "") {
 
    $sql = "SELECT nom_service_public FROM ef_servicepublic WHERE commune = :sid and code_postal = :code_postal ORDER BY nom_service_public";
 
	try {
        $stmt = $DB->prepare($sql);
        $stmt->bindValue(":sid", ($commune));
		$stmt->bindValue(":code_postal", ($code_postal));
        $stmt->execute();
        $results = $stmt->fetchAll();
 
 
 
    } catch (Exception $ex) {
        echo($ex->getMessage());
    }

ca peut pas etre l'affichage car avec les données direct la derniere select s'affiche plus la requete je pense.

message toujours pas de service inscrit donc il trouve 0 resultat alors que en direct ca fonctionne.

comment je pourrai verifier les variable car var dump ne marche pas ni echo et alert.

Code:

1 2 $stmt->bindValue(":sid", ($commune)); $stmt->bindValue(":code_postal", ($code_postal));
Je ne sais pas si ça a un impact mais plutôt
Code:

1 2 $stmt->bindValue(":sid", $commune); $stmt->bindValue(":code_postal", $code_postal);
le var_dump de results est vide? fait un echo de test variables et un var_dump de results.
Cela est peut-être du au type si tu fais un cast?
Code:

1 2 $stmt->bindValue(":sid", (string)$commune); $stmt->bindValue(":code_postal", (string)$code_postal);

cela n'a pas changé j'ai fais le var_dump

Citation:

array(0) { }

qu'en pense tu ?

JE PENSE que le problème vient de l'envoi des variable ici car comme il recupere pas il affiche pas :

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
                    function showCity() {
 
var code_postal = document.getElementById("code_postal" );
var commune = document.getElementById("commune" );
 
 
if ((code_postal.options[code_postal.options.selectedIndex].value)
    && (commune.options[commune.options.selectedIndex].value ))
{
 
                        if (commune.length > 0) {
                            $.ajax({
                                type: "POST",
                                url: "fetch_city.php",
                                data: "commune=" + commune +'&code_postal='+ code_postal,
                                cache: false,
                                beforeSend: function() {
                                    $('#output2').html('<img src="loader.gif" alt="" width="24" height="24">');
                                },
                                success: function(html) {
                                    $("#output2").html(html);
                                }
                            });
                        } else {
                            $("#output2").html("");
                        }
                    }
 
					}

on me parle de innerhtml ?

voici le html :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 <label>Code postal:
                                    <select name="code_postal" id="code_postal" onChange="showState(this);">
                                        <option value="">Please Select</option>
                                        <?php foreach ($results as $rs) { ?>
                                            <option value="<?php echo $rs["code_postal"]; ?>"><?php echo $rs["code_postal"]; ?></option>
                                        <?php } ?>
                                    </select>
                                </label>
                            </td>
                        </tr>
                        <tr>
                            <td align="center" height="50"><div id="output1"></div> </td>
                        </tr>
                        <tr>
                            <td align="center" height="50"><div id="output2"></div> </td>
                        </tr>

06/03/2019, 15h30
kevin254kl
Code:

1 2 var code_postal = document.getElementById("code_postal" ); var commune = document.getElementById("commune" );
Ici tu récupères l'élément html la balise '<select ...' et non la valeur. Fait un console.log de

Code:

console.log(document.getElementById("code_postal" ).value,document.getElementById("commune" ).value);

ou innerhtml.

j'ai fait ca

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
 
function showCity() {
console.log(document.getElementById("code_postal" ).value,document.getElementById("commune" ).value);
var code_postal = document.getElementById("code_postal" );
var commune = document.getElementById("commune" );
 
if ((code_postal.options[code_postal.options.selectedIndex].value)
    && (commune.options[commune.options.selectedIndex].value ))
{
 
                        if (commune.length > 0) {
                            $.ajax({
                                type: "POST",
                                url: "fetch_city.php",
                                data: "commune=" + commune +'&code_postal='+ code_postal,
                                cache: false,
                                beforeSend: function() {
                                    $('#output2').html('<img src="loader.gif" alt="" width="24" height="24">');
                                },
                                success: function(html) {
                                    $("#output2").html(html);
                                }
                            });
                        } else {
                            $("#output2").html("");
                        }
                    }
 
					}      
 
					</script>

mais rien ne s'affiche après choix dans les listes a l'ecran je doit fair qq chose ?

As tu une url pour que je puisse regarder directement? As tu une erreur javascript?
Voici un exemple ou cela fonctionne

Code:

1
2
3
4
5
6
7
8
<select id="toto" onchange="myFunction()">
<option> coucou</option>
<option> hahaha</option>
<script>
function myFunction() {
  alert(document.getElementById("toto").value);
}
</script>

Ajoute

Code:

1
2
3
function showCity() {
console.log("Show city");
console.log(document.getElementById("code_postal" ).value,document.getElementById("commune" ).value, document.getElementById("code_postal" ), document.getElementById("commune" ));

06/03/2019, 15h59
kate59
cela me renvoi :

pour alert(document.getElementById("commune").value);
BOURG EN BRESSE CEDEX

et pour code postal
01005

mais toujours aucun service affiche.

je peux t'envoye le lien mp.

merci

j'ai modifie dans la foncrion
Code:

1 2 3 var code_postal = document.getElementById("code_postal" ) var commune = document.getElementById("commune" )
par
Code:

1 2 var code_postal = document.getElementById("code_postal" ).value; var commune = document.getElementById("commune" ).value;
maintenant plus de message mais la 3 liste n' apparait pas mais c'est qu'il trouve quelque chose deja.
par contre la var_dump ne s'affiche plus.

j'ai un messsage dans console :

Citation:

Uncaught TypeError: Cannot read property 'selectedIndex' of undefined
at showCity ((index):8220)
at HTMLSelectElement.onchange ((index):1)

c'est bon ca fonctionne enfin :

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
require("configure.php");
$commune = ($_REQUEST["commune"] <> "") ? ($_REQUEST["commune"]) : "";
$code_postal = ($_REQUEST["code_postal"] <> "") ? ($_REQUEST["code_postal"]) : "";
 
 
 
if ($commune <> "") {
 
    $sql = "SELECT distinct(nom_service_public) FROM ef_servicepublic WHERE commune = :sid and code_postal = :cp ORDER BY nom_service_public";
 
	try {
        $stmt = $DB->prepare($sql);
		$stmt->bindValue(":sid",$commune);
		$stmt->bindValue(":cp",$code_postal);
        $stmt->execute();
        $results = $stmt->fetchAll();
 
 
 
 
    } catch (Exception $ex) {
        echo($ex->getMessage());
    }
 
 
     if (count($results) > 0) {
        ?>
        <label>Nom service public: 
            <select name="city" id="city" name="box">
                <option value="">Please Select</option>
                <?php foreach ($results as $rs) { ?>
                    <option value="<?php echo $rs["id_service_public"]; ?>"><?php echo $rs["nom_service_public"]; ?></option>
                <?php } ?>
            </select>
        </label>
        <?php
    }
	else
	{
		echo'<label>Pas de service public</label>';
	}
}

par contre j'ai deux question.

1/ est ce que on peut les autocomplete u moins la 1ere
2/l'id du service sera bien renvoyer dans la valeur select comme je m'y qu'en pense tu ?

je ne sais pas comment faire pour que le 1ere liste code postal soit autocomplete sans que cela interragi sur le systeme en place de liste deroulante lié.

07/03/2019, 11h46
kevin254kl

Cool, pour les autres lecteurs peux tu mettre ta fonction javascript merci :)

Citation:

1/ est ce que on peut les autocomplete pour le 1ere

Oui en ajax https://alvinalexander.com/jquery/aj...ample-tutorial le mieux est de modifier ton script php et utiliser un like pour la recherche. Je te recommande de retourner du json plutôt que du html afin d'alléger la requête https://www.taniarascia.com/how-to-u...or-javascript/ à toi de voir :)
08/03/2019, 08h51
kate59

Pas de soucis je met le code aujourd’hui pense tu pouvoir m’aider si je met un autre Sujet avec plutôt a ce moment un input avec Ville et code postal sur la même ligne et que le second input soit alimenter donc par une requête qui récupérer ses deux variable en Ajax donc je n’y Connais qu’un peu.
Merci.