Mit js mehrere Variablen für folgende Auswertung an php übergeben

[fritzje610]

Hallo zusammen,

ich bin dabei, mir meine eigene Bilderdatenbank mit html / php / mysql / js zu basteln.
Das Projekt läuft auf einem xampp und wird nie online gehen, ist nur für mich privat.

Beim einlesen der Bilder möchte ich abhängig von den gewählten Pfaden die verfügbaren Unterverzeichnisse
bzw. Bilder wählen können. Leider scheitere ich an der Werteübergabe mit js an die Auswertung mit php.
In der ersten Ebene passt's noch, aber wenn es tiefer in die Ordnerstruktur geht,
krieg ich die nötigen Variablen nicht übergeben.

Hier das Formular dazu.

#Hauptverzeichnis lesen und unten im Formular anzeigen
$haupt = "/Bilder";
$alledateien = scandir($haupt);
foreach ($alledateien as $datei)
{
    if ($datei != "." && $datei != ".."  && $datei != ".DS_Store")
    {
        $dirs[] = $datei; //Verzeichnisse in Array schreiben
    }
}

#Daten die passend zum eingegbenen Namen sind aus der DB holen
echo "<h1>Bilder suchen: </h1><br /><br />";
echo "<form action='index.php?ziel=test' method='post'>";
echo "<table id='eintragen'>";
echo "<tr>";
    echo "<td>Bereich:</td>";
    echo "<td class='leerspalte'></td>";
    echo "<td><select name='haupt' id='haupt'>";
    echo "<option>-</option>";
    for ($i=0; $i < count ($dirs); $i++)
    {
        echo "<option value='" . $dirs[$i] . "'>". $dirs[$i] . "</option>";
    }
    echo "</select></td>";
    echo "<td class='leerspalte'></td>";
    echo "<td>Kapitel:</td>";
    echo "<td class='leerspalte'></td>";
    echo "<td><!--label for='verz1'></label--><select name='verz1' id='verz1'><option>-</option></select></td>";
    echo "<td class='leerspalte'></td>";
    echo "<td>Pfad:</td>";
    echo "<td class='leerspalte'></td>";
    echo "<td><!--label for='verz2'></label--><select name='verz2' id='verz2'><option>-</option></select></td>";
    echo "<td class='leerspalte'></td>";
    echo "<td class='button'><input class='button' type='submit' name='suchen' value='suchen' /></td>";
echo "</tr>";    
echo "</table>";
echo "</form>"; 

Das js dazu:

<script type="text/javascript" src="/js/jQuery.js"></script>
<script type="text/javascript" charset="utf-8">
$(function(typ){
  $("select#haupt").change(function(){
    $.getJSON("/js/haupt.php",{id: $(this).val(), ajax: 'true'}, function(j){
      var options = '';
      for (var i = 0; i < j.length; i++) {
        options += '<option>' + j[i].optionDisplay + '</option>';
      }
      $("select#verz1").html(options);
      document.getElementById('verz1').selectedIndex = 0;
    })
  })
})
</script>

Der gewählte Eintrag aus dem <select id="haupt">wird an die Datei haupt.php übergeben.
In dieser wird das entsprechende Unterverzeichnis ausgelesen und bildet das folgende select-Feld <select id="verz1">.
Das funktioniert auch soweit sehr gut.

Um eine Ebene tiefer in die Ordnerstruktur zu kommen muss ich ja den gewählte Wert aus verz1 an ein Skript übergeben.
Das mache ich hiermit:

<script type="text/javascript" charset="utf-8">
$(function(typ){
  $("select#verz1").change(function(){
    $.getJSON("/js/verz1.php",{id: $(this).val(), ajax: 'true'}, function(j){
      var options = '';
      for (var i = 0; i < j.length; i++) {
        options += '<option>' + j[i].optionDisplay + '</option>';
      }
      $("select#verz2").html(options);
      document.getElementById('verz2').selectedIndex = 0;
    })
  })
})
</script>

Mein Problem ist nun, dass das Ganze an dieser Stelle gegen die Wand läuft, da ich in der Datei verz1.php den Pfad nicht mehr richtig setzen kann,
da mir der übergebene Wert aus dem ersten JS-Skript fehlt. Habe es schon mit einer Session-Variablen versucht, aber bin auch da gescheitert.

Meine Frage ist nun, wie kann ich dem zweiten Skript den Wert aus beiden select's übergeben ?

Könntet ihr mir da bitte weiterhelfen !


Vielen Dank für eure Mühe vorab ! ! !

[Jens]

Mein Problem ist nun, dass das Ganze an dieser Stelle gegen die Wand läuft, da ich in der Datei verz1.php den Pfad nicht mehr richtig setzen kann,
da mir der übergebene Wert aus dem ersten JS-Skript fehlt. Habe es schon mit einer Session-Variablen versucht, aber bin auch da gescheitert.

Meine Frage ist nun, wie kann ich dem zweiten Skript den Wert aus beiden select's übergeben ?

Hi

ich benutze bei so etwas gerne die jQuery "serialize" funktion. Das verhält sich fast exakt wie ein normaler Post und schickt alle Felder ab. Ich würde das ganze grundsätzlich "Generischer" aufbauen, dass man nicht auf die Anzahl der Ebenen festgenagelt ist, aber das sprengt etwas den Rahmen

Die einfache Lösung mit deinem Ansatz sähe etwa so aus:

<script type="text/javascript" charset="utf-8">
$(function(typ){
  $("select#verz1").change(function(){
    $.post("/js/verz1.php", $(this).closest("form").serialize(), function(j) {
      var options = '';
      for (var i = 0; i < j.length; i++) {
        options += '<option>' + j[i].optionDisplay + '</option>';
      }
      $("select#verz2").html(options);
      document.getElementById('verz2').selectedIndex = 0;
    });
  });
  $("select#verz2").change(function(){
    $.post("/js/verz2.php", $(this).closest("form").serialize(), function(j) {
      var options = '';
      for (var i = 0; i < j.length; i++) {
        options += '<option>' + j[i].optionDisplay + '</option>';
      }
      $("select#verz3").html(options);
      document.getElementById('verz3').selectedIndex = 0;
    });
  });
})
</script>
​

In den entsprechenden verz1.php / verz2.php scripten hättest du dann immer alle Verzeichnisse unter $_POST verfügbar. Also $_POST["haupt"] für die erste Ebene, $_POST["verz1"] für die zweite etc.

$(this).closest("form").serialize() sucht dabei das erste "form"-Element oberhalb des "select"-Elements (this) und setzt alle Eingabefelder für einen get/post zusammen.