Java-Script Variable an PHP übergeben und zurück


#1
Hallo zusammen,

ich habe aktuelle folgendes Script im Einsatz:
PHP:
        <form action="index.php?info=doppelt" method="post" accept-charset="UTF-8">
            <div>
                <input type="hidden" name="modus" value="tausch" />
                Deine doppelten Karten<br />
                <select name="meine" size="1" id="doppelt-kartenname"><?php
                    foreach( $doppelte as $wert ) {
                        echo "<option>$wert</option>";
                    }
                    ?></select>
                <br />
                <img id="doppelt-kartenbild" style="width:65px; height:80px; padding-top:2px;" alt="" />
                <script>
                    function bild1(ele) {
                        var src = "Cards/" + ele.options[ele.selectedIndex].textContent + ".gif";
                        document.getElementById("doppelt-kartenbild").src = src;
                    }
                    document.getElementById("doppelt-kartenname").addEventListener("change", function () {
                        bild1(this);
                    });
                    bild1(document.getElementById("doppelt-kartenname"));
                </script>
            </div>
            <button type="submit">gegen Zufallskarte tauschen</button>
        </form>
Hiermit wird für die aktuell ausgewählte Option immer das entsprechende Bild angezeigt.
Nur würde ich gerne den Pfad jetzt aus einer PHP-Funktion verwenden, um dies nicht immer hardcodieren zu müssen.

Ich habe dies mal so probiert, was leider nicht funktioniert hat:
PHP:
        <form action="index.php?info=doppelt" method="post" accept-charset="UTF-8">
            <div>
                <input type="hidden" name="modus" value="tausch" />
                Deine doppelten Karten<br />
                <select name="meine" size="1" id="doppelt-kartenname"><?php
                    foreach( $doppelte as $wert ) {
                        echo "<option>$wert</option>";
                    }
                    ?></select>
                <br />
                <img id="doppelt-kartenbild" style="width:65px; height:80px; padding-top:2px;" alt="" />
                <script>
                    function bild1(ele) {
                        var src = ele.options[ele.selectedIndex].textContent;
                        var src= <?php echo kartenPfadAnzeigen2(src);?> + ".gif";
                        document.getElementById("doppelt-kartenbild").src = src;
                    }
                    document.getElementById("doppelt-kartenname").addEventListener("change", function () {
                        bild1(this);
                    });
                    bild1(document.getElementById("doppelt-kartenname"));
                </script>
            </div>
            <button type="submit">gegen Zufallskarte tauschen</button>
        </form>
Ich würde behaupten, so kann ich die Variable nicht an PHP übergeben.
Hat jemand eine Idee, wie ich es denn trotzdem realisieren kann?
 

Sempervivum

Erfahrenes Mitglied
#2
Nein, so wie Du es geschrieben hast, geht es nicht, denn wenn die Seite erst Mal auf dem Client bzw. im Browser ist, kannst Du eine PHP-Funktion nicht mehr direkt aufrufen, sondern musst Ajax verwenden.
Wenn ich das richtig sehe, ist das jedoch nicht nötig, wenn man den Code etwas umorganisiert: Gleich auf dem Server das src erzeugen und als data-Attribut bei der Option ablegen. Dann steht es Javascript direct zur Verfügung. Etwa so:
Code:
        <form action="index.php?info=doppelt" method="post" accept-charset="UTF-8">
            <div>
                <input type="hidden" name="modus" value="tausch" />
                Deine doppelten Karten<br />
                <select name="meine" size="1" id="doppelt-kartenname"><?php
                    foreach( $doppelte as $wert ) {
                        $src = kartenPfadAnzeigen2($wert) . ".gif";
                        echo "<option data-src=\"" . $src . "\">$wert</option>";
                    }
                    ?></select>
                <br />
                <img id="doppelt-kartenbild" style="width:65px; height:80px; padding-top:2px;" alt="" />
                <script>
                    function bild1(ele) {
                        var src = ele.options[ele.selectedIndex].getAttribute("data-src");
                        document.getElementById("doppelt-kartenbild").src = src;
                    }
                    document.getElementById("doppelt-kartenname").addEventListener("change", function () {
                        bild1(this);
                    });
                    bild1(document.getElementById("doppelt-kartenname"));
                </script>
            </div>
            <button type="submit">gegen Zufallskarte tauschen</button>
        </form>