Vullen van 2e dropdown op basis van de 1e dropdown

Pagina: 1
Acties:

Onderwerpen

Vraag


Acties:
  • 0 Henk 'm!

  • IndexS
  • Registratie: Juli 2020
  • Laatst online: 11-08-2020
Hallo,

Ik moet voor een website een dropdown vullen op basis van de geselecteerde waarde van de eerste dropdown op basis van PHP en MySQL. Nu heb ik in het verleden wel eens met deze talen gewerkt, maar kom er achter dat er de laatste tijd veel is veranderd.... :/

Nu heb ik al wat gevonden en getest. Het werkt en is een mooi beginpunt.

Het probleem waar ik nu tegen aanloop is het volgende:

Hoe kan ik aan 'huidig_id' meerdere waardes toekennen in de tabel 'isolatie_renovatie'?

Bij de eerste dropdown moet er bij de keus "geen isolatie", alle opties in de tweede dropdown worden weergegeven. Bij de andere keuzes moet exact dezelfde keuze in de tweede komen te staan.

Dus:
1e dropdown Geen isolatie -> alle 4 opties in 2e dropdown (Geen isolatie, Goede isolatie, Betere isolatie, Beste isolatie)
1e dropdown Goede isolatie -> 1 optie in 2e dropdown (Goede isolatie)
1e dropdown Betere isolatie -> 1 optie in 2e dropdown (Betere isolatie)
1e dropdown Beste isolatie -> 1 optie in 2e dropdown (Beste isolatie)

Bedankt voor het meedenken!


Dit heb ik zover:

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
CREATE TABLE `isolatie_huidig` (
  `huidig_id` int(11) NOT NULL,
  `huidig_status` varchar(50) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;


INSERT INTO `isolatie_huidig` (`huidig_id`, `huidig_status`) VALUES
(1, 'Geen isolatie'),
(2, 'Goede isolatie'),
(3, 'Betere isolatie'),
(4, 'Beste isolatie');

CREATE TABLE `isolatie_renovatie` (
  `renovatie_id` int(11) NOT NULL,
  `renovatie_status` varchar(50) NOT NULL,
  `huidig_id` varchar(50) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;


INSERT INTO `isolatie_renovatie` (`renovatie_id`, `renovatie_status`, `huidig_id`) VALUES
(1, 'Geen isolatie', '1'),
(2, 'Goede isolatie', '1'),
(3, 'Betere isolatie', '2'),
(4, 'Beste isolatie', '3');



index.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
41
42
43
44
45
46
47
48
<html>
<head>
<title>Test</title>
</head>
<body>
<div>
<label>Isolatie :</label><select name="isolatie_huidig" class="isolatie_huidig">
<option value="0">Selecteer isolatie</option>
<?php
include('db.php');
$sql = mysqli_query($con,"select * from isolatie_huidig");
while($row=mysqli_fetch_array($sql))
{
echo '<option value="'.$row['huidig_id'].'">'.$row['huidig_status'].'</option>';
} ?>
</select><br/><br/>
<label>City :</label><select name="isolatie_renovatie" class="isolatie_renovatie">
<option>Select City</option>
</select>
<br /><br />
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".isolatie_huidig").change(function()
{
var huidig_id=$(this).val();
var post_id = 'id='+ huidig_id;

$.ajax
({
type: "POST",
url: "ajax.php",
data: post_id,
cache: false,
success: function(cities)
{
$(".isolatie_renovatie").html(cities);
} 
});

});
});
</script>
</body>
</html>


ajax.php
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
include('db.php');
if($_POST['id']){
    $id=$_POST['id'];
    if($id==0){
        echo "<option>Selecteer isolatie</option>";
        }else{
            $sql = mysqli_query($con,"SELECT * FROM `isolatie_renovatie` WHERE huidig_id='$id'");
            while($row = mysqli_fetch_array($sql)){
                echo '<option value="'.$row['renovatie_id'].'">'.$row['renovatie_status'].'</option>';
                }
            }
        }
?>

Beste antwoord (via IndexS op 24-07-2020 15:46)


  • RobIII
  • Registratie: December 2001
  • Niet online

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

(overleden)
IndexS schreef op vrijdag 24 juli 2020 @ 12:55:
[...]


Ik snap dat het voor jou allemaal gesneden koek is, maar dat geldt helaas voor mij niet :'( .
Nogmaals: Dan moet je debuggen. Kijk wat er werkelijk gebeurt en leg dat langs je verwachting van wat er gebeurt.

Je verwacht dat er een query naar je DB gaat met een ...where `id` = 2 en je zult zien dat er werkelijk een query naar je DB gaat met ...where `id` = 'post_id'. Dus ra ra politiepet waar zou 't probleem zitten? ;)

Overigens zie ik nu pas een tweede probleem in die query; je gebruikt hier in je ajax.php single-quotes (deze: ') om je veldnamen (of "kolomnamen"). Dat moeten backticks (deze: `) zijn. Single-quotes gebruik je als string-delimiter, backticks gebruik je voor 't escapen van je velden, tabelname of reserved words. Leer het verschil.

Om 't dan nog niet he-le-maal voor te kauwen: het moet dus niet:
PHP:
1
2
$sql = mysqli_query($con,"SELECT * FROM 'isolatie' WHERE 
(SELECT 'alle_opties' FROM 'isolatie' WHERE 'id'='post_id')=1 or 'id'='post_id'");

zijn maar:
PHP:
1
2
$sql = mysqli_query($con,"SELECT * FROM `isolatie` WHERE 
(SELECT `alle_opties` FROM `isolatie` WHERE `id`= … )=1 or `id`= …");


Op de plek van de wil je (de waarde van!) $id hebben die je eerder, op regel 4, uit de $_POST haalt. Waar nu de staan scheef ik eerder @gekozen_id. Daarmee heb je nu méér dan voldoende tips richting je oplossing gekregen.

[ Voor 64% gewijzigd door RobIII op 24-07-2020 15:27 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

Alle reacties


Acties:
  • +3 Henk 'm!

  • RobIII
  • Registratie: December 2001
  • Niet online

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

(overleden)
Voordat je ook maar iets doet zou ik me eens inlezen in Parametrized Queries als je wil dat je straks überhaupt nog een DB met tabellen hebt om iets uit te selecten ;) (En nee, "het is toch alleen maar voor intern gebruik" is géén excuus :> ).

Verder zou 't fijn zijn als je je (html/php) code even netjes inspringt ('indent') zodat 't wat leesbaar(der) is want nu is 't een aardige brei tekst ;) Ook helpt 't als je je [code] tags schrijft als [code=php] en [code=sql]

En waarom is huidig_id in isolatie_renovatie in hemelsnaam een varchar en geen int :? Ook heb je met copy/pasten nog cities laten staan in je code. Dat zou ik vervangen door data of options ofzo.

Wat je vraag concreet betreft: Ik zie even 't nut van 2 tabellen niet? Als je de 4 waardes ('geen', 'goed', 'beter', 'best') hebt heb je toch voldoende om beide dropdowns te vullen? En dan zou ik iets doen als:

SQL:
1
2
3
4
5
6
7
8
9
10
11
12
13
CREATE TABLE `isolatie` (
  `id` int(11) NOT NULL,
  `description` varchar(50) NOT NULL,
  `return_all` bit NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;


INSERT INTO `isolatie` (`id`, `description`, `return_all`) 
VALUES
  (1, 'Geen isolatie', 1),
  (2, 'Goede isolatie', 0),
  (3, 'Betere isolatie', 0),
  (4, 'Beste isolatie', 0);


En dan in je ajax.php kijken of van de gekozen optie (1, 2, 3 of 4) de bit return_all (beter naam door jezelf te verzinnen) 1 is en zo ja alles returnen en anders alleen de gekozen optie...


Dus in je ajax.php doe je dan iets als:

SQL:
1
2
3
4
5
select *
from `isolatie`
where (
  select `return_all` from `isolatie` where `id` = @gekozen_id
) = 1 or `id` = @gekozen_id;

[ Voor 94% gewijzigd door RobIII op 23-07-2020 01:03 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij


Acties:
  • 0 Henk 'm!

  • IndexS
  • Registratie: Juli 2020
  • Laatst online: 11-08-2020
Dank je voor het antwoord. Ik ga daar morgen mee aan de slag en laat wel even weten of het gelukt is.

Ziet er in ieder geval logisch uit. :)

Acties:
  • 0 Henk 'm!

  • IndexS
  • Registratie: Juli 2020
  • Laatst online: 11-08-2020
Ik ben er nu mee aan het stoeien maar ik krijg het maar half aan het werk

Heb een nieuwe tabel gemaakt en het uitlezen ervan en plaatsen in de 1e dropdown is geen probleem.

Zodra er een keus is gemaakt dan wordt er in de 2e dropdown wel iets ingevuld maar niet het juiste en de 1e dropdown krijgt dezelfde waarde als de 2e.

Dropdown1: kies je Geen, dan krijg je bij dropdown2 de keuze uit Geen en Goede.
Dropdown1: kies je Goede, dan krijg je bij dropdown2 Betere.
Dropdown1: kies je Betere, dan krijg je bij dropdown2 Beste.
Dropdown1: kies je Beste, dan krijg je bij dropdown2 niets te zien

Ik zit er nu al een tijdje na te staren maar zie niet waar het mis gaat. :/


index.php
PHP:
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
<html>
    <head>
        <title>Test</title>
    </head>
    <body>
        <div>
            <label>Isolatie huidig :</label>
            <select name="isolatie" class="isolatie">
                <option value="0">Selecteer isolatie</option>
            
                <?php
                    include('db.php');
                    $sql = mysqli_query($con,"select * from isolatie");
                    while($row=mysqli_fetch_array($sql))
                    {
                        echo '<option value="'.$row['id'].'">'.$row['status'].'</option>';
                    } 
                ?>
            </select>
            <br/><br/>
            <label>Isolatie na renovatie</label>
            <select name="isolatie_renovatie" class="isolatie_renovatie">
                <option>Selecteer isolatie</option>
            </select>
        </div>

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function()
            {
                $(".isolatie").change(function()
                {
                    var id=$(this).val();
                    var post_id = 'id='+ id;
                    $.ajax
                    ({
                        type: "POST",
                        url: "ajax.php",
                        data: post_id,
                        cache: false,
                        success: function(isolatie)
                        {
                            $(".isolatie_renovatie").html(isolatie);
                        } 
                    });

                });
            });
        </script>
    </body>
</html>


ajax.php
PHP:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?php
include('db.php');
if($_POST['id']){
    $id=$_POST['id'];
    if($id==0){
        echo "<option>Selecteer isolatie</option>";
        }else{
            $sql = mysqli_query($con,"SELECT * FROM 'isolatie' WHERE 
            (SELECT 'alle_opties' FROM 'isolatie' WHERE 'id'='post_id') = 1 or 'id'='post_id'");

            while($row = mysqli_fetch_array($sql)){
                echo '<option value="'.$row['id'].'">'.$row['status'].'</option>';
                }
            }
        }
?>

[ Voor 3% gewijzigd door IndexS op 24-07-2020 11:08 ]


Acties:
  • +1 Henk 'm!

  • RobIII
  • Registratie: December 2001
  • Niet online

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

(overleden)
IndexS schreef op vrijdag 24 juli 2020 @ 11:01:
Ik zit er nu al een tijdje na te staren maar zie niet waar het mis gaat. :/
Als je er met staren niet uit komt dan moet je eens beginnen met debuggen ;)
Debuggen: Hoe doe ik dat?

Maar ik zie 't met staren ook: je hebt op de plekken waar ik @gekozen_id gebruik gewoon 'post_id' staan... Je wil daar natuurlijk wel de inhoud van de variabele $id hebben; en dat wil je niet doen door 'm gewoon recht in de querystring te pleuren (zie mijn eerdere opmerking over Over het gebruik van Parametrized Queries en zie SQL Injection).

Overigens wil je op een select (zo goed als) altijd een order by zetten; zonder die laatste is de volgorde niet gegarandeerd; wat vandaag volgorde A, B, C is kan morgen C, A, B zijn. In de praktijk bepalen de meeste RDBMS'en op basis van de (clustered) PK de volgorde, maar dat is dus niet gegarandeerd

[ Voor 61% gewijzigd door RobIII op 24-07-2020 12:09 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij


Acties:
  • 0 Henk 'm!

  • IndexS
  • Registratie: Juli 2020
  • Laatst online: 11-08-2020
op de plekken waar ik @gekozen_id gebruik gewoon 'post_id' staan... Je wil daar natuurlijk wel de inhoud van de variabele $id hebben; en dat wil je niet doen door 'm gewoon recht in de querystring te pleuren
Dat is net het stukje waar ik naar zit te staren... :?

Acties:
  • +1 Henk 'm!

  • RobIII
  • Registratie: December 2001
  • Niet online

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

(overleden)
IndexS schreef op vrijdag 24 juli 2020 @ 12:02:
[...]


Dat is net het stukje waar ik naar zit te staren... :?
Uh... ik geef je gewoon letterlijk het anrtwoord :? En ik vertel je ook dat je moet debuggen?

Je plakt letterlijk 'post_id' in je query, je wil daar $id gebruiken. Duidelijker kan ik 't niet maken.

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij


Acties:
  • 0 Henk 'm!

  • skate master
  • Registratie: September 2004
  • Laatst online: 02-06 17:55

skate master

Autodesk Educator Expert

Als ik je vraag goed lees / begrijp wil je dat dropdown2 dezelfde waarde weergeeft als dropdown 1 wanneer je dropdown 1 wijzigt.
Dit is vrij simpel op te lossen met slechts een paar regels Javascript.

Ik zou het op deze manier oplossen:
  • Dropdownitems middels PHP uitlezen en in zowel dropdown1 als dropdown2 plaatsen
  • middels de jQuery change functie wie je al gebruikt monitoren of dropdown1 wijzigt, zo ja zet dropdown 2 op dezelfde waarde
    JavaScript:
    1
    2
    
    var isolatie = $('[name=isolatie]').val();
    $('[name=isolatie_renovatie]').val(isolatie);

Acties:
  • +1 Henk 'm!

  • RobIII
  • Registratie: December 2001
  • Niet online

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

(overleden)
skate master schreef op vrijdag 24 juli 2020 @ 12:06:
Als ik je vraag goed lees / begrijp wil je dat dropdown2 dezelfde waarde weergeeft als dropdown 1 wanneer je dropdown 1 wijzigt
Dan lees je niet goed ;)
IndexS schreef op donderdag 23 juli 2020 @ 00:13:
Dus:
1e dropdown Geen isolatie -> alle 4 opties in 2e dropdown (Geen isolatie, Goede isolatie, Betere isolatie, Beste isolatie)
1e dropdown Goede isolatie -> 1 optie in 2e dropdown (Goede isolatie)
1e dropdown Betere isolatie -> 1 optie in 2e dropdown (Betere isolatie)
1e dropdown Beste isolatie -> 1 optie in 2e dropdown (Beste isolatie)
Afhankelijk van de keuze in 1 moet er in 2 een aantal opties getoond/verborgen worden en een corresponderende selectie gemaakt worden. Dat kan overigens inderdaad prima met wat JS en hoeft niet 'fancy' met AJAX - behalve dat je dan je BL vastlegt in JS; dat wil je IMHO in je backend hebben.

[ Voor 16% gewijzigd door RobIII op 24-07-2020 12:12 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij


Acties:
  • 0 Henk 'm!

  • skate master
  • Registratie: September 2004
  • Laatst online: 02-06 17:55

skate master

Autodesk Educator Expert

Damn je hebt gelijk. 8)7

Acties:
  • 0 Henk 'm!

  • IndexS
  • Registratie: Juli 2020
  • Laatst online: 11-08-2020
RobIII schreef op vrijdag 24 juli 2020 @ 12:06:
[...]

Uh... ik geef je gewoon letterlijk het anrtwoord :? En ik vertel je ook dat je moet debuggen?

Je plakt letterlijk 'post_id' in je query, je wil daar $id gebruiken. Duidelijker kan ik 't niet maken.
Ik snap dat het voor jou allemaal gesneden koek is, maar dat geldt helaas voor mij niet :'( .

Acties:
  • Beste antwoord
  • +1 Henk 'm!

  • RobIII
  • Registratie: December 2001
  • Niet online

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

(overleden)
IndexS schreef op vrijdag 24 juli 2020 @ 12:55:
[...]


Ik snap dat het voor jou allemaal gesneden koek is, maar dat geldt helaas voor mij niet :'( .
Nogmaals: Dan moet je debuggen. Kijk wat er werkelijk gebeurt en leg dat langs je verwachting van wat er gebeurt.

Je verwacht dat er een query naar je DB gaat met een ...where `id` = 2 en je zult zien dat er werkelijk een query naar je DB gaat met ...where `id` = 'post_id'. Dus ra ra politiepet waar zou 't probleem zitten? ;)

Overigens zie ik nu pas een tweede probleem in die query; je gebruikt hier in je ajax.php single-quotes (deze: ') om je veldnamen (of "kolomnamen"). Dat moeten backticks (deze: `) zijn. Single-quotes gebruik je als string-delimiter, backticks gebruik je voor 't escapen van je velden, tabelname of reserved words. Leer het verschil.

Om 't dan nog niet he-le-maal voor te kauwen: het moet dus niet:
PHP:
1
2
$sql = mysqli_query($con,"SELECT * FROM 'isolatie' WHERE 
(SELECT 'alle_opties' FROM 'isolatie' WHERE 'id'='post_id')=1 or 'id'='post_id'");

zijn maar:
PHP:
1
2
$sql = mysqli_query($con,"SELECT * FROM `isolatie` WHERE 
(SELECT `alle_opties` FROM `isolatie` WHERE `id`= … )=1 or `id`= …");


Op de plek van de wil je (de waarde van!) $id hebben die je eerder, op regel 4, uit de $_POST haalt. Waar nu de staan scheef ik eerder @gekozen_id. Daarmee heb je nu méér dan voldoende tips richting je oplossing gekregen.

[ Voor 64% gewijzigd door RobIII op 24-07-2020 15:27 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij


Acties:
  • 0 Henk 'm!

  • IndexS
  • Registratie: Juli 2020
  • Laatst online: 11-08-2020
Ik heb nu alle foutmeldingen aangezet.
Krijg op de ajax.php de melding:
Notice: Undefined index: id in ajax.php on line 3

Acties:
  • +1 Henk 'm!

  • RobIII
  • Registratie: December 2001
  • Niet online

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

(overleden)
IndexS schreef op vrijdag 24 juli 2020 @ 15:01:
Notice: Undefined index: id in ajax.php on line 3
Met alle respect, maar... wat wil je nou? Dat we je handje gaan vast houden? Sowieso zien wij je (huidige) ajax.php niet dus geen idee wat daar gaande is op line 3 behalve dat je daar een 'undefined index' gebruikt - hence de foutmelding. Die kun je zelf ook prima lezen en dan eens gaan kijken wat er aan de hand is of zou kunnen zijn.

Having said that: Weet je zéker dat je wel een "id" post? ;) Want je probeert 'id' uit $_POST te halen, maar als je geen 'id' post zit er dus ook geen 'id' in $_POST he? ;) En dan krijg je die foutmelding. Druk anders eens op F12 in je browser en kijk in de netwerk tab op het POST request onder Form Data wat er gestuurd wordt.

[ Voor 25% gewijzigd door RobIII op 24-07-2020 15:07 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij


Acties:
  • 0 Henk 'm!

  • IndexS
  • Registratie: Juli 2020
  • Laatst online: 11-08-2020
Ik had je edit van de vorige reactie nog niet gezien.
Je hoeft me handje niet vast te houden, vind ook dat ik het moet leren en dus ook zelf dingen moet proberen. Maar op een gegeven moment zie je het gewoon niet meer.... Waardeer je hulp!

Heb de quotes veranderd en het werkt.

Acties:
  • 0 Henk 'm!

  • IndexS
  • Registratie: Juli 2020
  • Laatst online: 11-08-2020
Having said that: Weet je zéker dat je wel een "id" post? ;) Want je probeert 'id' uit $_POST te halen, maar als je geen 'id' post zit er dus ook geen 'id' in $_POST he? ;) En dan krijg je die foutmelding. Druk anders eens op F12 in je browser en kijk in de netwerk tab op het POST request onder Form Data wat er gestuurd wordt.
Zie daar nu netjes steeds ajax.php met de juiste waarden die horen bij de keuze in dropdown 1.
Pagina: 1