Formular welches in JS erstellt wird mit PHP Ausgaben füttern

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

  • Formular welches in JS erstellt wird mit PHP Ausgaben füttern

    Vorab: Ich bin kein Geek, ich lerne noch.

    Folgendes Szenario.

    Ich habe einen Button der ein JS auslöst. Dieses JS ändert den Inhalt eines Divs und fügt dort ein Form ein.

    Nun müsste ich in diesem Form eine PHP Funktion aufrufen welche mir Inhalte aus einer Datenbank holt und diese per "echo" als HTML Code ausgibt. Genauer geht es um ein select mit options, die options setzen sich aus den Einträgen einer Tabelle aus der DB zusammen.

    Nun kann ich ja in einem JS nicht einfach ein <?php funktionsname(); ?> machen.

    Beim Aufruf des Buttons werden an das JS einige Parameter übergeben, dort könnte man ja die Ausgabe der DB "dranhängen" und daraus das select bilden, das wird meiner Meinung nach jedoch umständlich und nicht unbedingt sinnig.

    Welche Möglichkeiten gibt es da noch? Ich denke z.B. an AJAX, allerdings bin ich wie gesagt kein Geek und habe mich bisher mit Ajax nicht ausreichend bis gar nicht beschäftigt um dort einen Lösungsansatz zu haben wie ich meine Ausgaben aus der DB einbinden könnte.

  • hm, eigentlich hast du es ziemlich ausführlich beschrieben, aber du hast es dabei schon ziemlich konkret mit der möglichen Implementierung beschrieben, wobei ich sagen würde, dass das nicht unbedingt die beste ist.
    Brings bitte nochmal kurz auf den Punkt, vielleicht auch mit einem Beispiel: Was genau brauchst du?

    Vllt sowas? demo.easy-coding.de/ajax/selec…x-abhaengigkeit-tabellen/
    Tutorial dazu hier: [wiki]Select-Auswahl mit AJAX Abhängigkeit und verschiedenen Tabellen[/wiki]

    Gruß und willkommen!

  • Nicht ganz, glaube ich? Bin mir nicht sicher, daher mal ein Beispiel meines Codes.

    Quellcode

    1. function editEntry(eid,etext)
    2. {
    3. var c = document.getElementById('econ'+eid).innerHTML = '<form action=\"index.php\" method=\"post\"><textarea cols=\"65\" rows=\"5\" name=\"etext\">'+etext+'</textarea>\n<select name=\"statustext\" size=\"1\"><option>bekannt</option><option>bearbeitung</option><option>behoben</option></select> <input type=\"hidden\" name=\"eintraege_id\" value=\"'+eid+'\"> <input type=\"submit\" value=\"absenden\"><input type=\"hidden\" name=\"action\" value=\"edit_entry\"></form><br>';
    4. }


    Wie man sieht ist select / option derzeit "hart" eingebaut, allerdings gibt es eine PHP Funktion welche mir die gewünschten options des selects ausgibt (inkl. value was hier fehlt)

    Die für mich liebste Variante wäre ja sowas wie folgendes.

    Quellcode

    1. function editEntry(eid,etext)
    2. {
    3. var c = document.getElementById('econ'+eid).innerHTML = '<form action=\"index.php\" method=\"post\"><textarea cols=\"65\" rows=\"5\" name=\"etext\">'+etext+'</textarea>\n <?php meinefunktiondieselectundoptionsalshtmlausgibt(); ?> <input type=\"hidden\" name=\"eintraege_id\" value=\"'+eid+'\"> <input type=\"submit\" value=\"absenden\"><input type=\"hidden\" name=\"action\" value=\"edit_entry\"></form><br>';
    4. }


    Die PHP Funktion macht dabei einen SQL Query (GET) mit einer while Schleife für jeden Eintrag (option) des selects und gibt das ganze als echo -> html code aus.

    Aber das geht natürlich nicht *g*

    Ich könnte die function editEntry natürlich dahingehend erweitern.

    Quellcode

    1. function editEntry(eid,etext, option1, option2, option3...)
    2. ...


    Aber das ist mir ehrlich gesagt zu dirty, das muss doch einfacher/sauberer gehen?
    Bin leider noch nicht sooo bewandert was JS und vor allem AJAX angeht.

  • hab dir mal ein AJAX Beispiel gebaut:

    index.html

    Quellcode

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" xml:lang="de">
    3. <head>
    4. <title>Edit Formular mit AJAX</title>
    5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    6. <script type="text/javascript" src="ajax.js"></script>
    7. <script type="text/javascript">
    8. function editor(type, id, divtarget) {
    9. var url = 'callback.php';
    10. ajaxPost(url + '?' + type + '=' + id, 'seed='+ new Date().getTime(), divtarget);
    11. }
    12. </script>
    13. </head>
    14. <body>
    16. <h1>Editier mich</h1>
    18. <div>
    19. <b>Eintrag 1</b>
    20. <div id="editor_window1">xx</div>
    21. <a href="#" onclick="editor('kunde', 1, 'editor_window1')">edit</a>
    22. </div>
    23. <div>
    24. <b>Eintrag 2</b>
    25. <div id="editor_window2">yy</div>
    26. <a href="#" onclick="editor('kunde', 2, 'editor_window2')">edit</a>
    27. </div>
    29. </body>
    30. </html>
    Alles anzeigen


    callback.php

    Quellcode

    1. <form method="">
    2. foo: <input type="text" name="foo" value="foo" />
    3. <pre>
    4. <?php
    5. echo '$_GET=';
    6. print_r($_GET);
    7. echo '$_POST=';
    8. print_r($_POST);
    9. ?>
    10. </pre>
    11. <input type="submit" />
    12. </form>
    Alles anzeigen


    Die ajax.js ist aus diesem Wiki Artikel: [wiki]Formulare mit AJAX.. und ohne[/wiki] und gibts hier zum Download: demo.easy-coding.de/ajax/forms-with-and-without-ajax/ajax.js

    Ich hoffe das hilft ;)