AJAX/PHP/MySQL: Mehrere dynamische Formularfelder

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

  • AJAX/PHP/MySQL: Mehrere dynamische Formularfelder

    Hallo!

    Ich möchte mit AJAX/PHP/MySQL folgendes umsetzen:
    Der Website-Besucher sieht 3 Auswahlformulare und 1 Ergebnisbereich.

    Zunächst muss er im 1. Auswahlformular einen Eintrag auswählen.
    Daraufhin füllt sich das 2. Auswahlfeld, wo er wieder einen Eintrag auswählt.
    Daraufhin füllt sich das 3. Auswahlfeld, wieder wird ein Eintrag ausgewählt.
    Danach ist schließlich das Endergebnis im Ergebnisbereich zu sehen.

    Die Inhalte für die Auswahlfelder und das Ergebnisfeld sollen per PHP aus einer MySQL-Datenbank kommen.
    Im Idealfall steht im Bereich Endergebnis eine Info "Seite wird geladen", wenn die Datenbankabfrage länger dauert.

    Wie könnte ich das umsetzen? Hat jemand von Euch zufällig so ein Script bei der Hand?
    Ich bin auch für alle Tipps und Links dankbar, bislang habe ich nur AJAX-Abfragen für 1 Formular bzw. ohne MySQL gefunden.

    Vielen Dank,
    ChB

  • Die Suchfunktion ist schon was feines ;)

    coder-wiki.de/HowTos/Ajax-Inha…-PHP-und-Select-nachladen
    easy-coding.de/3-div-tags-per-dropdown-laden-t5892.html
    easy-coding.de/dropdownfeld-mir-select-t5869.html
    easy-coding.de/zweite-select-f…eit-vom-ersten-t2622.html


    Praktisch sollte dir iwas davon helfen. Theoretisch geht das so:
    Das select-fenster ruft mit onchange die ajax1 funktion auf und übergibt den ausgewählten Parameter womit die datei x1.php geladen wird.
    In der Datei x1.php machst du deine Datenbankabfrage und lässt dir das ganze wieder mit einem select ausgeben und einen onchange der die ajax2 funktion aufruft und datei x2 läd. u.s.w


    EDIT://

    "Das mit dem Seite wird geladen" im Endergebnis ist machbar. Arbeitest du mit einem Framework wie Prototype ect.?
    Wenn ja gibt es dort vor definierte funktionen die du im Ajaxrequest ausführen kannst.

    Bei prototype würde das ganze so aussehen:

    Quellcode

    1. onLoading:function(){ $('endergebnis').innerHTML='Seite wird geladen..ein Moment bitte'; },
    2. onComplete:function(){$('endergebnis').innerHTML='';}

  • Hallo Snowflake,

    danke für Deine schnelle Antwort.

    Die Links habe ich schon gekannt, ich suche heute schon den ganzen Tag nach der Lösung für meine Anforderung. - Es werden aber immer nur die Probleme gepostet, einen funktionierenden Code mit mehreren Formularfeldern und PHP/MySQL habe ich noch nicht gefunden. Als Ansatzpunkt sind die Links aber natürlich super.

    Ist leider mein 1. AJAX-Projekt, daher bin ich noch ziemlich hilflos ... ! ;)

    Liebe Grüße,
    ChB

  • Hallo, deine Zeit könntest du besser in die Einarbeitung investieren, anstatt was fertiges zu suchen, was man dann eh nicht kapiert. Hier im Forum gibt es reichlich gelöste Ajax fragen. Der ganze klump ist alles das selbe. Ob das nen Login ist ein Autocompleter oder das was du willst, ist alles das Selbe das Grundgerüst bleibt.

    [coderwiki]http://www.easy-coding.de/wiki/html-ajax-und-co/[/coderwiki]

    Falls du eine komplette AJAX Engine benutzen willst empfehle ich JQuery (unterstützt auch Formulare und an sich alles was man braucht)


    Hier mal ein Beispiel für ein Autokompleter mit JQuery: dyve.net/jquery/?autocomplete
    Erst wenn der letzte FTP Server kostenpflichtig, der letzte GNU-Sourcecode verkauft, der letzte Algorithmus patentiert, der letzte Netzknoten kommerzialisiert, die letzte Newsgroup moderiert wird, werdet Ihr merken, dass man mit Geld allein nicht programmieren kann.

  • Hallo!

    Ich habe jetzt einiges ausprobiert.
    Die PHP/MySQL-Komponente macht mir keine Probleme.
    Probleme habe ich mit den JavaScript, bzw. AJAX-Teil.

    Noch einmal ein wenig detaillierter ausgedrückt, was ich versuche:

    Der Besucher hat 2 Select-Felder zur Auswahl.
    In einem kann er ein Bundesland wählen, im anderen einen Ort.
    Sobald er Bundesland und Ort ausgewählt hat, sollen die ersten Ergebnisse angezeigt werden (Vorname und Nachname).

    Jetzt kann aber auch noch optional ein Nachname eingegeben werden.
    Wenn der Besucher diese Möglichkeit wählt, sollen die Ergebnisse entsprechend gefiltert werden.

    Wie muss da der JavaScript-Teil aussehen?

    Vielen Dank,
    ChB

  • ChB schrieb:

    nn der Besucher diese Möglichkeit wählt, sollen die Ergebnisse entsprechend gefiltert werden.


    Das ergibt keinen Sinn :)

    Ok wir wollen uns ja nicht an kleinigkeiten aufhängen. Zeig doch mal das was du schon gemacht hast. Dann können wir alle sehen wo es hängt.
    Erst wenn der letzte FTP Server kostenpflichtig, der letzte GNU-Sourcecode verkauft, der letzte Algorithmus patentiert, der letzte Netzknoten kommerzialisiert, die letzte Newsgroup moderiert wird, werdet Ihr merken, dass man mit Geld allein nicht programmieren kann.

  • Workaround für IE

    Hallo,

    ich bin nun schon recht weit gekommen. In Firefox funktioniert alles ganz ok.
    Ich habe aber Probleme mit dem Workaround für den IE.
    Was muss ich tun, damit meine voneinander abhängigen Formulare auch im IE angezeigt werden?

    Mein JavsScript-Code

    Quellcode

    1. <script type="text/Javascript">
    2. <!--
    3. function sendRequest(url, ergebnis) {
    4. var req;
    5. try {
    6. req = window.XMLHttpRequest?new XMLHttpRequest():
    7. new ActiveXObject("Microsoft.XMLHTTP");
    8. } catch (e) {
    9. //Kein AJAX Support
    10. }
    12. req.onreadystatechange = function() {
    13. if ((req.readyState == 4) && (req.status == 200)) {
    14. document.getElementById(ergebnis).innerHTML = req.responseText;
    15. }
    16. };
    18. req.open('get', url);
    19. req.send(null);
    20. }
    21. //-->
    22. </script>
    Alles anzeigen


    Vielen Dank,
    ChB

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von ChB ()

  • Hallo,

    ich will dir ja nicht zu nah treten, aber ich glaube du hast die Funktionsweise von AJAX nicht richtig verstanden. Wenn du AJAX für IE und Gecko-Browser verwenden willst musst du das auch hinschreiben:

    Hier mal etwas zu lesen: [coderwiki]http://www.easy-coding.de/wiki/html-ajax-und-co/ajax-hintergrundwissen.html[/coderwiki]
    Und hier wie man alle Browser supportet: AJAX Tutorial

    Quellcode

    1. try{
    2. req = new XMLHttpRequest();
    3. }
    4. catch (ms){
    5. try{
    6. req = new ActiveXObject("Msxml2.XMLHTTP");
    7. }
    8. catch (nonms){
    9. try{
    10. req = new ActiveXObject("Microsoft.XMLHTTP");
    11. }
    12. catch (failed){
    13. req = null;
    14. }
    15. }
    Alles anzeigen


    EDIT:
    Mit

    Quellcode

    1. alert();


    Kannst du ausgaben machen, sprich fang doch einfach mal ab ob dein AJAX angenommen wird oder nicht

    Dein Code mit alert:

    Quellcode

    1. <script type="text/Javascript">
    2. <!--
    3. function sendRequest(url, ergebnis) {
    4. var req;
    5. try {
    6. req = window.XMLHttpRequest?new XMLHttpRequest():
    7. new ActiveXObject("Microsoft.XMLHTTP");
    8. } catch (e) {
    9. alert("Kein AJAX");
    10. }
    12. req.onreadystatechange = function() {
    13. if ((req.readyState == 4) && (req.status == 200)) {
    14. document.getElementById(ergebnis).innerHTML = req.responseText;
    15. }
    16. };
    18. req.open('get', url);
    19. req.send(null);
    20. }
    21. //-->
    22. </script>
    Alles anzeigen


    so long
    jd
    Erst wenn der letzte FTP Server kostenpflichtig, der letzte GNU-Sourcecode verkauft, der letzte Algorithmus patentiert, der letzte Netzknoten kommerzialisiert, die letzte Newsgroup moderiert wird, werdet Ihr merken, dass man mit Geld allein nicht programmieren kann.

    Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von JFoX ()

  • Der alert ist das was das print oder echo bei php ist..Damit kannst du dir die Fehlersuche vereinfachen. Du siehst wo daten ankommen, und ab wann sie nicht mehr ankommen. so kannst du den fehlerradius verkleinern und dein fehler lösen.
    natürlich kannst du alert auch ganz normal benutzten.


    Das mit dem IE hat wohl nicht gelkappt, weil du nur für Firefox dein Ajaxrequest definiert hat.

    Willst du das ganze einfacher haben, steig einfach auf ein framework um. Du sparst dir damit selber viel arbeit.
    bei prototype und vielen anderen wird nämlich aus. "document.getElementById('test')" einfach ein "$('test')"
    und das ajaxrequest besteht nur noch aus einer zeile. du könntest dir natürlich auch aus deinem jetzigen ajaxrequest eine funktion bauen geht natürlich auch.

  • Hallo,

    so, jetzt sind sich IE und FF schon wieder uneinig:

    Ich übergebe z.B. die Variable "s" vom Formular an ein PHP-Script. Dort gehts dann los mit:
    $s = mysql_real_escape_string($s);

    Wenn ich das so lasse, kommt IE damit klar. Der Firefox zeigt aber keine Umlaute in $s an.
    Also habe ich $s = utf8_decode($s); eingebaut. Firefox ist damit zufrieden.
    Jetzt zeigt mir aber plötzlich der IE die Umlaute nicht an.

    Was mache ich da falsch? In allen Files habe ich charset=iso-8859-1 verwendet.

    Vielen Dank,
    ChB

  • Hallo,

    das mit den htmlentities hat nicht geklappt, aber damit kämpfe ich noch.

    Ich habe eine andere Frage: Weiter oben habe ich schon meinen Code gepostet.

    Meine 3 Formulare hören auf einander, wie sie sollen.
    Also Formular 3 hört auf Formular 2 und das auf Formular 1.
    Jetzt möchte ich aber, dass sich Formular 3 zurücksetzt, wenn Formular 1 geändert wird.
    Wie bekomme ich das hin?

    Vielen Dank,
    ChB

  • Hallo D0nut,

    das habe ich schon probiert, leider funktioniert das nicht.
    Vielleicht, weil ich <div> VOR <select> einsetze?
    Das muss ich aber machen, sonst klappts im IE nicht.

    Der Einfachheit halber hier meine Test-Seite: www.mymed.at/test

    Wenn man in allen Feldern etwas ausgewählt hat und nachträglich das Bundesland ändert, dann setzt sich derzeit nur das "Fachbereich"-Formular zurück. Das habe ich durch eine entsprechende Bedingung in der func1.php erreicht. Ich möchte aber, dass sich auch das Formular "PLZ/ORT" und der Ergebnisbereich mit den fertigen Adressen zurücksetzen.

    Vielen Dank,
    ChB

  • ChB schrieb:

    Der Firefox zeigt aber keine Umlaute in $s an.
    Hier mal ein Link zu einem Eintrag der Diskussion in einem der Wiki-Einträge:
    easy-coding.de/wiki/html-ajax-…hne/discussion.html#post1
    Hatte vor einiger Zeit ein ganz ähnliches Problem, das bei dir vielleicht ähnliche Gründe hat. Man sollte auf jedenfall drüber nachdenken. ;)