Formularfelder via Ajax laden

Formularfelder sollen dynamisch und abhängig von bestimmten Eingaben des Seitenbesuchers angeboten werden.

Im folgenden Beispiel wird dem Besucher der Seite eine Reihe von verfügbaren Terminen angeboten. Die Termine sind in einer CSV-Datei definiert und werden dem Besucher abhängig von dessen Datumsangaben angeboten.

Konfiguration der Formularelemente

Das Formular enthält ein Kalender-Eingabefeld.

Wählt der Seitenbesucher ein Datum aus, werden dynamisch Radiobuttons mit verfügbaren Terminen angeboten.

Die Radiobuttons erhalten einen Wert, der als Referenz für die Weiterverarbeitung des Ajax-Resultates dient.

onChange-Event via Javascript, Ajax-Aufruf

Ändert sich der Inhalt des Kalenderfeldes wird das Event "wOnAfterChangeDate()" ausgeführt.

Das Event kann in der design.js (für alle Seiten) oder nur in der aktuellen Seite über das Javascript-Quelltext-Element eingefügt werden.

Innerhalb des Events, wird nun via Ajax ein projekspezfisches PHP-Script aufgerufen, welches den HTML-Code für die Inputfelder schreibt und als String zurückgibt.

Event, das nach Auswahl über das Datumsfeld ausgeführt wird

function wOnAfterChangeDate(date){
  //Datumswert
  var dateVal     = date.val();
  //Formularfeldname
  var elementName = 'myRadio'; 
  //Url des PHP-Scriptes, das die Inputfelder generiert
  var url = '/wGlobal/wGlobal/scripts/php/getRadioValues.php?date=' + dateVal + '&elementName=' + elementName;

  //JQueryAufruf
  jQuery.ajax({type: "GET", url: url, success: function(result){
    if(result != ''){
      //Ersetzen des bestehenden Radiobuttons. 
      jQuery('#myRadio_').parent().replaceWith(result);
    }
  }});
 
}

Notwendiges PHP-Script

Innerhalb des PHP-Scriptes (/wGlobal/wGlobal/scripts/php/getRadioValues.php) werden die Radio-Buttons zusammengebaut und als HTML-String zurückgegeben.

Bitte beachten Sie, dass u.a. Beispiel nicht, den Status oder die Zulässigkeit der Abfrage prüft. Ggf. müssen weitere Sicherheitsabfragen oder das Ausschließen von unerlaubten Zugriffen in der Syntax ergänzt werden.

Scriptbeispiel


include_once($_SERVER['DOCUMENT_ROOT'].'/weblication/grid.php');

error_reporting(0);

/**
*
   Bitte beachten Sie, dass dieses Script für alle Benutzer aufrufbar ist. 
   Sicherheitsmaßnahmen wurden bei diesem Beispiel nicht berücksichtigt
*
**/

if(session_id() == '') die();

//Initialisieren der Variablen
$dateValue     = wRequest::getParameterSecureStrict('date');
$elementName    = wRequest::getParameterSecureStrict('elementName');
$csvFilePath    = '/dev-wAssets/docs/beispieldaten.csv';
$html         = '';

//Auslesen der Informationen, die für das Datum geschrieben werden sollen. 
//In diesem Beispiel werden die Daten aus einer CSV ausgelesen. 

if($dateValue != '' && wRepository::documentExists($csvFilePath)){
  //Auslesen der CSV-Datei in ein Array
  $data = wReadWrite::readFileCSVArray($csvFilePath) ?? array();
  
  //Schreiben des HTML-Strings, hier Radiobuttons
  for($i = 0; $i < count($data); $i++){
    if($data[$i]['date'] === $dateValue){
      $data[$i]['name'] = $data[$i]['name'] ?? '';
      $html .= '<span class="wglRadio">
                 <input type="radio" id="'.$elementName.'_'.$data[$i]['name'].'" name="'.$elementName.'" value="'.$data[$i]['name'].'">
                 <label for="'.$elementName.'_'.$data[$i]['name'].'">'.$data[$i]['name'].'</label>
                </span>';
    }
  }
}  

print $html;

Zurück zur Übersicht