Dropdownfeld mit SELECT und Weitergabe an 2 weitere Dropdownfelder per AJAX / JS

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Dropdownfeld mit SELECT und Weitergabe an 2 weitere Dropdownfelder per AJAX / JS

    Hallo zusammen,

    ich sitze nun schon seit ein paar stunden vor diesem und auch anderen Foren und versuche eine Lösung für mein Problem zu finden. Folgendes soll realisiert werden:

    Ich arbeite mit PHP/mySQL und möchte ein formular erstellen, in welchem der Anwender über 3 Dropdownfelder Seine Adresse eingeben kann. Die Dropdownfelder sind PLZ, Ort und Strasse. Die entsprechenden Tabellen dazu sind in der mySQL DB. Die Dropdownfelder sollen dynamisch mit diesen Tabelleninhalten gefüllt werden, wobei in das 2. und 3. Feld erst nach der Aktualisierung des vorangegangenen Feldes die zutreffenden Daten aus der DB eingelesen werden sollen. ich muss dazusagen, dass ich zwar gutes Verständnis von PHP/mySQL hab, aber AJAX und JS sind für mich völliges Neuland!

    ZU diesem Thema habe ich mir bereits diese threads durchgelesen:
    coder-wiki.de/HowTos/Ajax-Inha…-PHP-und-Select-nachladen
    Zweite Select-Feld in Abhängigkeit vom ersten?

    Ich benutze den Code aus dem ersten Beispiel und habe ihn für meine Zwecke angepasst.

    index.php

    HTML-Quellcode

    1. <html><head>
    2. <title>AJAX PHP Beispiel mit Select</title>
    4. <script type="text/javascript">
    5. <!--
    6. function sendRequest() {
    7. var req;
    8. try {
    9. req = window.XMLHttpRequest?new XMLHttpRequest():
    10. new ActiveXObject("Microsoft.XMLHTTP");
    11. } catch (e) {
    12. //Kein AJAX Support
    13. }
    15. req.onreadystatechange = function() {
    16. if ((req.readyState == 4) && (req.status == 200)) {
    17. document.getElementById('inhalt').innerHTML = req.responseText;
    18. }
    19. };
    20. var id = document.getElementById('dropdown').value;
    21. req.open('post', 'func.php');
    22. req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    23. req.send('s='+ id);
    24. }
    25. //-->
    26. </script>
    28. </head>
    29. <body>
    31. <p />W&auml;hlen Sie einen Eintrag aus um den Inhalt zu laden
    33. <p />
    34. <p>
    35. <select id="dropdown" onChange="sendRequest()">
    36. <?
    37. include("connection.inc");
    39. $connection = mysql_connect($host, $user,$password)
    40. or die ("Ein Fehler ist aufgetreten: Verbindung zum Server konnte nicht hergestellt werden.");
    41. $db = mysql_select_db($database, $connection)
    42. or die ("Ein Fehler ist aufgetreten: Verbindung zur Datenbank des Störungsmeldecenters (RWE-SMC) konnte nicht hergestellt werden.");
    44. $result = mysql_query("SELECT DISTINCT plz from strasse");
    45. while($row = mysql_fetch_object($result))
    46. {
    47. echo '<option value="'.$row->plz.'">'.$row->plz.'</option>';
    48. }
    49. ?>
    50. </select>
    51. </p>
    52. <div id="inhalt"></div>
    54. <p>
    55. <select name="dropdown2" id="dropdown2">
    56. </select>
    57. </p>
    58. <p>
    59. <select name="dropdown3" id="dropdown3">
    60. </select>
    61. </p>
    64. </body></html>
    Alles anzeigen


    func.php

    PHP-Quellcode

    1. <?php
    2. include("connection.inc");
    4. $connection = mysql_connect($host, $user,$password)
    5. or die ("Ein Fehler ist aufgetreten: Verbindung zum Server konnte nicht hergestellt werden.");
    6. $db = mysql_select_db($database, $connection)
    7. or die ("Ein Fehler ist aufgetreten: Verbindung zur Datenbank des Störungsmeldecenters (RWE-SMC) konnte nicht hergestellt werden.");
    9. //Inhalte laden
    10. $query = mysql_real_escape_string($_POST['s']);
    11. $result = mysql_query("SELECT hauptort.name from hauptort join strasse on hauptort.tid=ort_id_fk where plz='{$query}' group by hauptort.name order by hauptort.name;");
    12. echo($query);
    13. while($row = mysql_fetch_object($result))
    14. {
    15. echo '<p /><b>'.$row->name.'</b><br />';
    16. }
    18. ?>
    Alles anzeigen


    es funktioniert alles soweit, dass ich alle gewünschten PLZ im ersten Dropdownfeld angezeigt bekomme und auch auswählen kann. sobald ich eine Auswahl getroffen habe, werden mir die treffenden Orte allerdings nicht in einem weiteren Dropdownfeld angezeigt ("dropdown2") sondern in dem div "inhalt". Und hier liegt mein Problem: Ich verstehe den JS Code nicht soweit, dass ich weiß wie ich die Werte an ein weiteres Dropdownfeld übergeben kann. Ich kann zwar deuten, dass die Übergabe in diesem Abschnitt (wahrscheinlich Zeile 3) stattfindet, aber weiß nicht weiter.

    Quellcode

    1. req.onreadystatechange = function() {
    2. if ((req.readyState == 4) && (req.status == 200)) {
    3. document.getElementById('inhalt').innerHTML = req.responseText;
    4. }
    5. };
    6. var id = document.getElementById('dropdown').value;
    7. req.open('post', 'func.php');
    8. req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    9. req.send('s='+ id);


    Wie kann ich jetzt die Orte, die zu der ausgewählten PLZ passen im 2. Dropdownfeld anzeigen lassen. Sie sollen ebenfalls auswählbar sein, damit in einem 3. Dropdownfeld eine Strasse ausgewählt werden kann. Alle Formularfelder sollten optimalerweise schon die ganze Zeit sichtbar sein aber evtl. gesperrt.

    Ich hoffe ich konnte das soweit verständlich erklären und bin für jede Hilfe dankbar!

  • Besten Dank! Das hat soweit geklappt. Jetzt habe ich mein zweites Dropdownfeld mit den gewünschten Daten. Ich benötige allerdings noch ein drittes Dropdownfeld, welches von der Auswahl des Zweiten abhängig ist. Wie mache ich das? Ich glaube ich habe noch nicht komplett die jeweiligen Funktionen der beiden Dateien verstanden... in welcher der beiden Dateien passiert was genau?

    hier mal ein bild des bestehenden html formulars

    [Blockierte Grafik: http://img260.imageshack.us/img260/2815/formst6.th.jpg]

    So soll das ganze am Ende auch aussehen, nur dass die ersten 3 Felder über diese dynamische Abfrage laufen sollen. Nach der Auswahl der Strasse im 3. Feld muss der Rest des Formulares auftauchen. Noch lieber wäre mir wenn alle Felder des Formulars die ganze Zeit über zu sehen wären und der jeweilige Inhalt erst nach und nach von der DB abgefragt würde.... aber geht das?

    grüße

    riu

  • ich hab ihn mir jetzt 3 mal komplett durchgelesen! aber an einigen stellen fehlt mir das Verständnis... auch weil Teile des Codes fehlen (post 7 in dem thread mit den 4 feldern) und auch andere Dateien benutzt werden. was ich verstehe ist, dass durch eine if abfrage das feld bestimmt werden soll, in welchem die auswahl getroffen wurde und anhand dessen wird ein script geladen, welches das zutreffende dropdownfeld aktualisiert. oder liege ich hier auch falsch!??!
    Bedeutet das, dass ich für jedes Feld was aktualisiert werden soll ein seperates Script brauche, das abgerufen wird? und dazu dann noch eine php-Datei, die mein formular darstellt?
    Ich bin leicht verwirrt ;) und könnte nen Ansatz ganz gut gebrauchen...also Code, auf den ich aufbauen kann.

    Danke für die Hilfe! Aber ich kenn mich auf diesem Gebiet noch sehr wenig aus, obwohls ja wirklich ne richtig coole Sache für Websites ist!

  • Das PHP Script erhält immer eine Eingabe per $_GET Variable und gibt daraufhin einen passenden Inhalt zurück.
    Das JavaScript muss dann dann entscheiden wo dieser eingefügt wird.

    Hier nochmal eine Funktion.. aber wenn du noch keine JavaScript Kenntnisse hast, solltest du erstmal Zeit in diese investieren.

    Quellcode

    1. /**
    2. * @param getparamter -> daten die per GET variable an das php script gesendet werden
    3. * @param iddeszieldiv -> id eines leeren div elements in das die ausgabe (z.b. select feld) des php scriptes geschrieben werden soll
    4. */
    5. function ajaxcall(getparameter, iddeszieldiv) {
    6. var req;
    7. try {
    8. req = window.XMLHttpRequest?new XMLHttpRequest():
    9. new ActiveXObject("Microsoft.XMLHTTP");
    10. } catch (e) {
    11. //Kein AJAX Support
    12. }
    14. req.onreadystatechange = function() {
    15. if ((req.readyState == 4) && (req.status == 200)) {
    16. document.getElementById(iddeszieldiv).innerHTML = req.responseText;
    17. }
    18. };
    19. req.open("GET", 'func.php?param='+getparameter);
    20. req.send(null);
    21. }
    Alles anzeigen