Forum: PC-Programmierung [PHP, HTML, JS] Felder einer Form anhand einer Dropdown automatisch ausfüllen


Announcement: there is an English version of this forum on EmbDev.net. Posts you create there will be displayed on Mikrocontroller.net and EmbDev.net.
von Rene K. (xdraconix)


Angehängte Dateien:

Lesenswert?

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?

von Irgend W. (Firma: egal) (irgendwer)


Lesenswert?

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.

von Rene K. (xdraconix)


Angehängte Dateien:

Lesenswert?

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
1
...
2
3
4
<script type="text/javascript">
5
  function run()
6
  {
7
    var v1 = document.getElementById("Stammkunden").value;
8
    window.open("?si=1&sid=" + v1, '_self');
9
    return false;
10
  }
11
</script>
12
13
<?php 
14
  if(isset($_GET['sid']))
15
  {
16
    $PDO_Stammkunden = $pdo->prepare("SELECT * FROM Stammkunden WHERE id=" . $_GET['sid']);
17
    $PDO_Stammkunden->execute();
18
    $row = $PDO_Stammkunden->fetch();
19
    
20
    $Name = $row['Name'];
21
    $Adresse = $row['Adresse'];
22
    $PLZ =$row['PLZ'];
23
    $Ort =$row['Ort'];  
24
?>
25
<form action="/?si=95" method="post">
26
  <table style="width:500px; max-width=90%;">
27
    <tr>
28
      <td>
29
        <input style="background-color: lightgrey;" type="text" name="RechnungsNr" value="<?php echo $Num; ?>" readonly>
30
      </td>
31
    </tr>
32
    <tr>
33
      <td>
34
        <select id="Stammkunden" onchange="run()" name="Stammkunde">
35
        <?php
36
          $PDO_Stammkunden = $pdo->prepare("SELECT * FROM Stammkunden");
37
          $PDO_Stammkunden->execute();
38
          while ($row = $PDO_Stammkunden->fetch())
39
          {
40
            echo "<option value=" . $row['id'] . ">" . $row['Name'] . "</option>";
41
          }
42
        ?>
43
        </select>
44
      </td>
45
    </tr>
46
    <tr>
47
      <td>
48
        <input type="text" name="RechnungsName" placeholder="Name" value="<?php if(isset($Name)){ echo $Name;} ?>">
49
      </td>
50
    </tr>
51
    <tr>
52
      <td><input type="text" name="RechnungsStrasse" placeholder="Straße" value="<?php if(isset($Adresse)){ echo $Adresse;} ?>" >
53
      </td>
54
    </tr>
55
56
...


EDIT: JavaScript vergessen 8-)

: Bearbeitet durch User
von Irgend W. (Firma: egal) (irgendwer)


Lesenswert?

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

von Rene K. (xdraconix)


Lesenswert?

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. ☺️

von Rene K. (xdraconix)


Lesenswert?

Soo...
1
<?php
2
if(isset($_GET['sid']))
3
{
4
5
  //Für Neurotiker:
6
  if(strlen($_GET['sid']) >= 3) {$_GET['sid'] = 0;}
7
8
  //Das reicht im Grunde schon:
9
  $PDO_Stammkunden = $pdo->prepare('SELECT * FROM Stammkunden WHERE id= :idStammKunde');
10
  $PDO_Stammkunden->execute( array(':idStammKunde' => $_GET['sid']));
11
  
12
  $row = $PDO_Stammkunden->fetch();
13
  $Name = $row['Name'];
14
  $Adresse = $row['Adresse'];
15
  $PLZ =$row['PLZ'];
16
  $Ort =$row['Ort'];  
17
}
18
?>

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.

: Bearbeitet durch User
von Karl Käfer (Gast)


Lesenswert?

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

von Daniel A. (daniel-a)


Lesenswert?

Ü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/

von IT-Abteilung (Gast)


Lesenswert?

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.

von Daniel A. (daniel-a)


Lesenswert?

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

von IT-Abteilung (Gast)


Lesenswert?

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.

von Daniel A. (daniel-a)


Lesenswert?

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.

von Rene K. (xdraconix)


Lesenswert?

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.

Antwort schreiben

Die Angabe einer E-Mail-Adresse ist freiwillig. Wenn Sie automatisch per E-Mail über Antworten auf Ihren Beitrag informiert werden möchten, melden Sie sich bitte an.

Wichtige Regeln - erst lesen, dann posten!

  • Groß- und Kleinschreibung verwenden
  • Längeren Sourcecode nicht im Text einfügen, sondern als Dateianhang

Formatierung (mehr Informationen...)

  • [c]C-Code[/c]
  • [code]Code in anderen Sprachen, ASCII-Zeichnungen[/code]
  • [math]Formel in LaTeX-Syntax[/math]
  • [[Titel]] - Link zu Artikel
  • Verweis auf anderen Beitrag einfügen: Rechtsklick auf Beitragstitel,
    "Adresse kopieren", und in den Text einfügen




Bild automatisch verkleinern, falls nötig
Bitte das JPG-Format nur für Fotos und Scans verwenden!
Zeichnungen und Screenshots im PNG- oder
GIF-Format hochladen. Siehe Bildformate.

Mit dem Abschicken bestätigst du, die Nutzungsbedingungen anzuerkennen.