Passage de 2 variables dans requête ajax

**kate59** · 06/03/2019, 13h34

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 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
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 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
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 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
<?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
    }
}
?>

**kevin254kl** · 06/03/2019, 14h10

Salut,

Test dans phpmyadmin ou adminer ta requête sql

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**kate59** · 06/03/2019, 14h11

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 :

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

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**kevin254kl** · 06/03/2019, 14h29

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

**kate59** · 06/03/2019, 14h31

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

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

**kevin254kl** · 06/03/2019, 14h54

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Sélectionner tout - Visualiser dans une fenêtre à part

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

Sélectionner tout - Visualiser dans une fenêtre à part

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

**kate59** · 06/03/2019, 15h01

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

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 :

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

**kevin254kl** · 06/03/2019, 15h30

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

ou innerhtml.

**kate59** · 06/03/2019, 15h39

j'ai fait ca

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

**kevin254kl** · 06/03/2019, 15h55

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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" ));

**kate59** · 06/03/2019, 15h59

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

par

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

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

**kate59** · 06/03/2019, 16h28

c'est bon ca fonctionne enfin :

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

**kevin254kl** · 07/03/2019, 11h46

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

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

**kate59** · 08/03/2019, 08h51

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.

Passage de 2 variables dans requête ajax

AJAX

Discussions similaires

Partager

Partager