[PHP, HTML, JS] Felder einer Form anhand einer Dropdown automatisch ausfüllen

[Rene K. (xdraconix)]

Hintergrund:

Ich habe meiner Frau ein Rechnungsprogramm als Webanwendung erstellt. In 
welcher sie einfach den Kunden eingibt, die Waren, Rabatt... etc... und 
welche dann automatisch einen Lieferschein und Rechnung als PDF 
erstellt.

Dies funktioniert soweit auch wunderbar. Aktuell gibt es da aber ein 
"Luxusproblem" da es da nun einige Stammkunden gibt, möchte Sie diese in 
einer Dropdown auswählen und die Felder wie Name, Straße etc.. sollen 
dann automatisch ausgefüllt werden (soll ihr Tipparbeit sparen).

Die Kunden werden bereits automatisch nach 3 Vorgängen in die 
Stammkunden-Datenbank aufgenommen.

Wie stelle ich das am dümmsten an? Die Felder irgendwie mit Javascript 
ausfüllen? Oder bei Auswahl die Seite in diesem Frame neu laden und die 
Werte aus der DB lesen?

Hat da jemand einen Tipp für mich?

[Irgend W. (Firma: egal) (irgendwer)]

Javascript dürfte der einfachste Weg sein:
- 
https://wiki.selfhtml.org/wiki/HTML/Tutorials/Formulare/Auswahllisten#select_und_JavaScript

Alternativ müsstest du das Formular mit der Auswahl absenden und dadurch 
eine weitere Seite mit den (vor-)ausgefüllten Werten aufrufen.

[Rene K. (xdraconix)]

Irgend W. schrieb:
> Javascript dürfte der einfachste Weg sein:
> -
> 
https://wiki.selfhtml.org/wiki/HTML/Tutorials/Formulare/Auswahllisten#select_und_JavaScript
>
> Alternativ müsstest du das Formular mit der Auswahl absenden und dadurch
> eine weitere Seite mit den (vor-)ausgefüllten Werten aufrufen.

Danke dir, wie ich mir da bereits dachte, müsste ich ja dann alle Felder 
(PLZ, Ort etc) "irgendwie" in den Session Variablen abspeichern wenn ich 
die Datenbank gelesen habe um auf den Namen zuzugreifen.

Ich habe es mal mit der Auswahl absenden und dann in das Formular laden 
gemacht. Geht eigentlich ganz gut, die Seite wird zwar neu geladen und 
ruckelt kurz für ein paar ms, aber das übersteht meine Frau sicherlich. 
:-D

...


<script type="text/javascript">
  function run()
  {
    var v1 = document.getElementById("Stammkunden").value;
    window.open("?si=1&sid=" + v1, '_self');
    return false;
  }
</script>

<?php 
  if(isset($_GET['sid']))
  {
    $PDO_Stammkunden = $pdo->prepare("SELECT * FROM Stammkunden WHERE id=" . $_GET['sid']);
    $PDO_Stammkunden->execute();
    $row = $PDO_Stammkunden->fetch();
    
    $Name = $row['Name'];
    $Adresse = $row['Adresse'];
    $PLZ =$row['PLZ'];
    $Ort =$row['Ort'];  
?>
<form action="/?si=95" method="post">
  <table style="width:500px; max-width=90%;">
    <tr>
      <td>
        <input style="background-color: lightgrey;" type="text" name="RechnungsNr" value="<?php echo $Num; ?>" readonly>
      </td>
    </tr>
    <tr>
      <td>
        <select id="Stammkunden" onchange="run()" name="Stammkunde">
        <?php
          $PDO_Stammkunden = $pdo->prepare("SELECT * FROM Stammkunden");
          $PDO_Stammkunden->execute();
          while ($row = $PDO_Stammkunden->fetch())
          {
            echo "<option value=" . $row['id'] . ">" . $row['Name'] . "</option>";
          }
        ?>
        </select>
      </td>
    </tr>
    <tr>
      <td>
        <input type="text" name="RechnungsName" placeholder="Name" value="<?php if(isset($Name)){ echo $Name;} ?>">
      </td>
    </tr>
    <tr>
      <td><input type="text" name="RechnungsStrasse" placeholder="Straße" value="<?php if(isset($Adresse)){ echo $Adresse;} ?>" >
      </td>
    </tr>

...

EDIT: JavaScript vergessen 8-)

[Irgend W. (Firma: egal) (irgendwer)]

Rene K. schrieb:
> $PDO_Stammkunden = $pdo->prepare("SELECT * FROM Stammkunden WHERE id=" .
> $_GET['sid']);

Ich hoffe nur, dass du das nicht frei im Netz rumstehen hast:
- https://de.wikipedia.org/wiki/SQL-Injection

[Rene K. (xdraconix)]

Nein, ist nur lokal erreichbar. Aber dennoch danke für die Info und ich 
werde das natürlich beheben - auch wenn dies nur lokal ist, ist es 
dennoch keine gute Sitte und sollte man sich direkt abgewöhnen. ☺️

[Rene K. (xdraconix)]

Soo...

<?php
if(isset($_GET['sid']))
{

  //Für Neurotiker:
  if(strlen($_GET['sid']) >= 3) {$_GET['sid'] = 0;}

  //Das reicht im Grunde schon:
  $PDO_Stammkunden = $pdo->prepare('SELECT * FROM Stammkunden WHERE id= :idStammKunde');
  $PDO_Stammkunden->execute( array(':idStammKunde' => $_GET['sid']));
  
  $row = $PDO_Stammkunden->fetch();
  $Name = $row['Name'];
  $Adresse = $row['Adresse'];
  $PLZ =$row['PLZ'];
  $Ort =$row['Ort'];  
}
?>

Wo wir im übrigen dabei sind, dies alles läuft über MariaDB. Emuliert 
dort PDO ebenso die Prepared Statements wie bei MySQL? So das ein 
ausschalten von PDO::ATTR_EMULATE_PREPARES nötig ist?! UTF8 ist ja schon 
bei der DB Anbindung dabei.

[Karl Käfer (Gast)]

Rene K. schrieb:
> Die Kunden werden bereits automatisch nach 3 Vorgängen in die
> Stammkunden-Datenbank aufgenommen.
> [...]
> Hat da jemand einen Tipp für mich?

Die SQL-Injection hast Du ja zum Glück schon behoben, ansonsten habe ich 
für PHP mal an einem schicken OR-Mapper namens Doctrine mitgewirkt.

Ansonsten ist das mit dem Dropdown natürlich eine Möglichkeit, aber Du 
könntest das auch mit AJAX und Autocompletion direkt auf die 
Kundentabelle machen. Also quasi so, wie Du das von den meisten 
Internet-Suchmaschinen kennst: Du tippst ein paar Buchstaben ein, und 
dann werden die möglichen Vervollständigungen angezeigt. Wenn dann eine 
davon ausgewählt wird, geht im Hintergrund über AJAX ein HTTP-Query an 
den Server, holt die Daten für den gewählten Datensatz und trägt sie ins 
Formular ein. Vom W3C gibt es für einen Teil dieser Veranstaltung eine 
Dokumentation, wenngleich das dort gezeigte natürlich etwas 
umgeschrieben werden müßte: [1], so daß bei Dir kein vordefiniertes 
Array benutzt, sondern die Daten eben über ein JSON-Backend abgefragt 
werden. Je nach Anzahl der Kunden wäre das vermutlich eleganter und für 
den Bediener auch schneller als ein Dropdown, das bei vielen Kunden ja 
recht unübersichtlich werden kann.

Zudem würde ich aus Performancegründen darauf achten, daß die Tabelle 
mit den Namen einen Index für die Volltextsuche hat. Das kann sonst 
nämlich ziemlich nerven, wenn man etwas eingetippt hat und dann nicht 
schnell die möglichen Vervollständigungen angezeigt bekommt. Viel Spaß 
und Erfolg!


[1] https://www.w3schools.com/howto/howto_js_autocomplete.asp

[Daniel A. (daniel-a)]

Überall, wo du Userdaten ins HTML einfügst, würde ich das vorher durch 
htmlentities() lassen, um das zu escapen. Sonst ist man anfällig für 
XSS.

Falls man kein JS will, könnte man sich auch eine select box mit CSS 
zusammenbauen, die dann per <a> oder per <input type="submit"> die Seite 
neu lädt: https://jsfiddle.net/d7e2nxrt/1/

[IT-Abteilung (Gast)]

Daniel A. schrieb:
> htmlentities()

Finger weg von htmlentities! htmlspecialchars ist dein Freund (FLAGS 
nicht vergessen!). htmlentities maskiert alles was nur geht, darunter 
auch äöü, durch ihre HTML-Entitäten. htmlspecialchars maskiert dagegen 
nur die paar wirklich gefährlichen Zeichen.

[Daniel A. (daniel-a)]

Ist doch scheiss egal, wenn da etwas mehr escapet wird, der Browser 
dekodiert es ja so oder so wieder.

[IT-Abteilung (Gast)]

Nein es ist nicht scheiß egal, nur weil der Browser es richtig anzeigt. 
Jede anderweitige Anwendung muss den sinnlos kodierten Scheiß erst 
wieder zurück wandeln. Und das nur, weil irgendwelche Programmierer zu 
blöd sind, die richtigen Funktionen zu verwenden.

[Daniel A. (daniel-a)]

Anderweitige Anwendung sollten gar nicht erst versuchen, HTML zu parsen. 
Wenn man die Daten anderen Anwendungen zur Verfügung stellen will, macht 
man eine REST Schnittstelle dafür, und gibt die Daten als JSON zurück. 
Und wenn es die Schnittelle nicht gibt, wird es auch nicht gewollt sein, 
dass da irgendwelche Tools daran herumspielen.

[Rene K. (xdraconix)]

Karl Käfer schrieb:
> Rene K. schrieb:
>> Die Kunden werden bereits automatisch nach 3 Vorgängen in die
>> Stammkunden-Datenbank aufgenommen.
>> [...]
>> Hat da jemand einen Tipp für mich?
>
> Die SQL-Injection hast Du ja zum Glück schon behoben, ansonsten habe ich
> für PHP mal an einem schicken OR-Mapper namens Doctrine mitgewirkt.
>
> Ansonsten ist das mit dem Dropdown natürlich eine Möglichkeit, aber Du
> könntest das auch mit AJAX und Autocompletion direkt auf die
> Kundentabelle machen. Also quasi so, wie Du das von den meisten
> Internet-Suchmaschinen kennst: Du tippst ein paar Buchstaben ein, und
> dann werden die möglichen Vervollständigungen angezeigt. Wenn dann eine
> davon ausgewählt wird, geht im Hintergrund über AJAX ein HTTP-Query an
> den Server, holt die Daten für den gewählten Datensatz und trägt sie ins
> Formular ein. Vom W3C gibt es für einen Teil dieser Veranstaltung eine
> Dokumentation, wenngleich das dort gezeigte natürlich etwas
> umgeschrieben werden müßte: [1], so daß bei Dir kein vordefiniertes
> Array benutzt, sondern die Daten eben über ein JSON-Backend abgefragt
> werden. Je nach Anzahl der Kunden wäre das vermutlich eleganter und für
> den Bediener auch schneller als ein Dropdown, das bei vielen Kunden ja
> recht unübersichtlich werden kann.
>
> Zudem würde ich aus Performancegründen darauf achten, daß die Tabelle
> mit den Namen einen Index für die Volltextsuche hat. Das kann sonst
> nämlich ziemlich nerven, wenn man etwas eingetippt hat und dann nicht
> schnell die möglichen Vervollständigungen angezeigt bekommt. Viel Spaß
> und Erfolg!
>
> [1] https://www.w3schools.com/howto/howto_js_autocomplete.asp

Ich habe das nun mal duchprobiert. Leider funktioniert nicht einmal das 
Beispiel auf meinem Server. Ich finde auch keinerlei Fehlermeldungen 
über das Apache Error Log. Ist hierfür eine spezielle Java Version 
erforderlich? Ich meine, ohne Fehler fällt das Debugen schon irgendwie 
schwer. :-/

Unter:

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_autocomplete

funktioniert es tadellos, schiebe ich es aber auf meinen Server geht 
dies leider nicht.