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



Gruß

Michael

[fritzje610]

Hallo,

ich habe den Aufruf mal geändert:

<script type="text/javascript" charset="utf-8">
$(function(typ){
  $("select#haupt", "select#verz1").change(function(){
    $.getJSON("/js/verz1.php",{haupt: $("select#haupt").val(), verz1: $("select#verz1").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>

Allerdings funktioniert das leider so nicht

Wo ich auch drüber nachdenke, woher soll dieses Skript den aktuellen Wert des ersten Selects wissen ?
Oder kann js den Wert einfach mitnehmen. Dort war ja kein onchange-Event. Es müsste also der momentan aktive Wert von haupt genommen und übergeben werden ????

Liege ich da richtig und vor allem wie muss das Skript dafür aussehen ?


Vielen Dank für eure Hilfe ! ! ! !



Gruß

Michael

[fritzje610]

Hallo,

nächster Versuch war in dem jeweiliegen php-Skript die ankommende GET-Variable in eine Session-Variable zu legen.
Klappt auch, aber nur für das jeweilige Skript. Die anderen Skripts können nicht auf die Session-Variable greifen.

Einer ne Idee warum das nicht geht ???

Vielen Dank und Gruß


Michael

[kaminbausatz]

Schmeiß den Wert doch in ein "hidden field"...

[fritzje610]

hidden field ???
Um den folgenden select's die Pfadangaben "unsichtbar" mitzugeben ??? Wäre vielleicht ein Ansatz.
Nur, wie kriege ich die schon gewählten Pfade in ein hidden-field und dieses dann in den select ?

Stehe grad wie der Ochs vorm Berg

[Zeichen32]

https://www.w3schools.com/tags/att_i...ype_hidden.asp

[fritzje610]

Wenn ich ein zusätzliches <input>-Feld als hidden hinzufüge bin ich genausoweit wie jetzt,da ich wieder zwei Werte dem js übergeben muss.
Der Zweite bzw. die folgenden <select> müssten als "Parameter" die vorher gewählten Pfade mitbringen, so das immer nur die id des aktuellen <select>,
ergänzt um die vorher bereits gewählten Werte übergeben werden muss.

Nur wie muss das dann als Code aussehen .... ?

[jonas3344]

Ich verstehe das Problem nicht so ganz.
Du kannst jederzeit auf die Werte der Selects zugreifen.

$('#haupt').val();
$('#verz1').val();
$('#verz2').val();

Die musst du dann einfach per AJAX an Dein PHP-Script übergeben.

  $("select#haupt", "select#verz1")

Das ist allerdings falsch. Mehrere Selektoren funktioniert so:
https://api.jquery.com/multiple-selector/

[kaminbausatz]

Wenn ich ein zusätzliches <input>-Feld als hidden hinzufüge bin ich genausoweit wie jetzt,da ich wieder zwei Werte dem js übergeben muss.

wieso ? Du kannst mit JS darauf zugreifen.

[fritzje610]

Wenn ich das richtig verstehe, müsste der Aufruf dann ja so aussehen, oder ?
Und im php als $_GET['haupt'] und $_GET['verz1'] zur Weiterverarbeitung ankommen ...

<script type="text/javascript" charset="utf-8">
$(function(typ){
  $("select#verz1").change(function(){
    $.getJSON("/js/verz1.php",{verz1: $(this).val(), $('#haupt').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>

[fritzje610]

In der php werden die übergebenen Parameter dann so weiterverarbeitet und zurückgegeben ...

<?php
$haupt2 = "/Bilder/" . $_GET['haupt'] . "/"  . $_GET['verz1'];
$alledateien2 = scandir($haupt2);
foreach ($alledateien2 as $datei2)
{
    if ($datei2 != "." && $datei2 != ".."  && $datei2 != ".DS_Store")
    {
        $dirs2[] = $datei2; //Verzeichnisse in Array schreiben
    }
}



$bla = true;
$var = "[{optionDisplay: '-'}, ";
for ($i=0; $i < count ($dirs2); $i++)
{
    if ($bla) $bla = false;
    else $var = $var . ", ";
    $var = $var . "{optionDisplay: '".$dirs2[$i]."'}";
}
$var = $var . "]";
echo <<<HERE_DOC
$var
HERE_DOC;
?>

[fritzje610]

Fehler gefunden, Läuft alles, vielen vielen Dank für eure Hilfe ! ! ! !

Die Werteübergabe muss ... haupt: $('#haupt').val() ... lauten.

Nochmals vielen Dank an Euch ! ! !