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

Dragosius

Erfahrenes Mitglied
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?
 
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>
 
Zurück