Personal Homepage, Tutorials & Blog

Ajax: Formulardaten nachladen (jQuery)

Ajax: Formulardaten nachladen (jQuery)

24. September '10

Mit der Javascript-Bibliothek jQuery lässt sich ohne großen Aufwand eine einfache Ajax-Anwendung realisieren. Im folgenden gehe ich davon aus, dass in die aufgerufene Seite bereits das jQuery-Framework eingebunden wurde (hier kann das Einbinden nachgelesen werden). Dies ist notwendig, damit das nachfolgende Beispiel funktioniert.

Für was benötige ich die Ajax-Technologie?

Mit der Ajax-Technologie können Seiteninhalte nachgeladen werden, ohne dass diese komplett neu geladen werden muss. In diesem Beispiel werden Daten aus z.B. einer MySQL-Datenbank in ein Formular geladen. Ein Anwendungsgebiet dieses Scripts wäre zum Beispiel ein Änderungsformular eines bereits gespeicherten Textes. Über das erste Auswahlmenü wird der Text ausgewählt, das zweite Auswahlmenü soll dann eine Bewertung anzeigen und im Textfeld soll der Text zum Bearbeiten stehen. Mit diesem Aufbau würde dem Autor des Textes die Bearbeitung angenehm gestaltet werden.

Beispiel

Folgender Code wird in den head-Bereich der Homepage geschrieben:

<script type="text/javascript">
<!--
function onSelectChange(){
    var dropdown = document.getElementById("select1");
    var index = dropdown.selectedIndex;
    var val = dropdown.options[index].value;
     
    if (val != 0) {    

        $.ajax({
           type: "GET",
           url: "nachladen.php?get=text&id="+val,
           data: "data",
           success: function(data){
               $('#textarea').empty();
               document.getElementById("textarea").value = data;
           }
         });
         
         $.ajax({
           type: "GET",
           url: "nachladen.php?get=select&id="+val,
           data: "data",
           success: function(data){
               document.getElementById("select2").value = data;
           }
         });
         
    } else {
   
        document.getElementById("textarea").value = "";
        document.getElementById("select2").value = "1";
   
    }
     
}
//-->
</script>

Folgender Code wird dorthin geschrieben, wo später die Ausgabe des PHP-Scripts erscheinen soll:

<select name="select1" id="select1" onchange="onSelectChange();">
    <option value="0" selected="selected">Bitte w&auml;hlen</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
    <option value="5">Option 5</option>
</select>

<select name="select2" id="select2">
    <option value="1" selected="selected">Nummer 1</option>
    <option value="2">Nummer 2</option>
    <option value="3">Nummer 3</option>
    <option value="4">Nummer 4</option>
    <option value="5">Nummer 5</option>
</select>

<textarea id="textarea" name="textarea" cols="79" rows="5"></textarea>

Erklärung

Im head-Bereich wird das Javascript ausgeführt, das die Daten aus dem PHP-Script nachlädt. Als Parameter wird der ausgewählte Wert des Select-Feldes übergeben, sowie eine Variable, die beinhaltet, für welches Formularelement der Aufruf ausgeführt wird.
Im PHP-Script kann dann z.B. eine MySQL-Abfrage ausgeführt werden. Per echo-Befehl werden die Daten dann wieder an Javascript übergeben, und in die Variable „data“ geschrieben. Nun wird nur noch der Inhalt der Variable „data“ in das jeweilige Element geschrieben, bzw. der Wert des jeweiligen Elements verändert.

Demo

 

Wenn Ihnen dieser Artikel gefallen hat, oder Sie Anregungen/Kritik haben, würde ich mich freuen, wenn Sie einen Kommentar schreiben oder das RSS Feed abonnieren, um immer automatisch über die neuesten Artikel auf dieser Seite informiert zu werden. Sie dürfen diesen Artikel oder die gesamte Seite auch gerne verlinken.

8 Kommentare

  1. Joth /

    Hallo,
    dieses ist für mich ein hervorragendes Beispiel wie Ajax mit Jquery funktionieren kann.
    Ich habe jetzt aber eine Frage: wie würde diese Beispiel statt mit „method: GET“ mit „method: POST“ aussehen?

    Während ich mit PHP auskenne, stehe ich dennoch mit JS auf Kriegsfuss

    LG Joth

  2. Christian /

    Hi,

    ist es möglich das ich für das erste select den Value mittels GET vorgebe und das subselect dann automatisch die entsprechendne ids rauszieht?

    bei mir wäre das z.b.

    1. Firma:
    2. Mitarbeiter

    Falls ich also von bereits die Firma vorselectiere, das er mir automatisch die Mitarbeiter ausgibt?

    Irgendwie bleibt mein 2. Feld immer leer und wird gefüllt, wenn ich Feld 1. nochmal bewege.

    Lieben gruß
    Christian

  3. Tobi /

    Wenn schon jQuery vorhanden ist, warum dann document.getElementById(„“) statt $(„#ichbindieId“);?

  4. Ist es damit auch möglich, den „variablen“ Text nicht in einer Textarea sondern in z.B. einem DIV auszugeben?

    vielen Dank 🙂

  5. hi kannst du mir sagen wie ich das erweitern kann mit input text
    ??

  6. Hallo,

    das scheint ein schönes Script zu sein. Wo findet man die „nachladen.php“ als Quellcode?

    LG Steffen

    • Tobias Fonfara /

      Hier:

      <?php

      if ($_GET['get'] == 'text') {

          echo "Dieser Text wird ausgegeben, weil Option ".$_GET['id']." aktiv ist.";

      } elseif ($_GET['get'] == 'select') {

          echo $_GET['id'];

      }

      ?>

      Viele Grüße

      • Supi, dankeschön. Ich hatte es auch schon selbst hinbekommen. Am Anfang hatte ich noch einen kleinen Schreibfehler, der mir ein Bein gestellt hatte.

        LG Steffen

Einen Kommentar schreiben