[JavaScript] Tabelle automatisch aus Datenbank auffüllen

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

  • [JavaScript] Tabelle automatisch aus Datenbank auffüllen

    Hallo zusammen,

    aktuell arbeite ich an einer Mannschaftszusammenstellung meiner Teilnehmer.
    Ich habe folgendes:

    Eine Datenbank für die Teilnehmer. In dieser hat jeder Teilnehmer eine id, Scheibe (Nummer und Buchstabe) und Gruppe. In der Mannschaftsdatenbank soll jeweils jetzt nur die id des Teilnehmers eingetragen werden.
    Ist ja nicht das Problem: in einem Formular wird die Gruppe ausgewählt und die Scheibe oder der Name angegeben. Darauf wird dann ein gemeinsamer Teilnehmer gesucht und die ID dann in die Mannschaftsdatenbank eingetragen.

    Jedoch hätte ich jetzt noch gern folgendes:

    Sobald die Gruppe und die Scheibe angegeben ist, soll automatisch das Textfeld für den Namen ausgefüllt werden, welcher aus der Datenbank ausgelesen werden muss.
    Ebenso auch, wenn nur die Gruppe und der Name angegeben ist, dann soll die Scheibe ausgefüllt werden.

    Das Formular sieht so aus:

    Quellcode

    1. $template->AddText("<tr><td>1. Teilnehmer</td><td>Gruppe: <select name="gruppe_1" size="1">",0);
    2. $ergebnis = $template->mysqli->query("SELECT name, id FROM gruppen WHERE praefix = '".$template->data_turnier->praefix."'");
    3. while ($row = $ergebnis->fetch_object())
    4. {
    5. $template->AddText("<option value="".$row->id."">".$row->name."</option>",0,0);
    6. }
    7. $template->AddText("</select> Scheibe: <input type="text" name="scheibe_num_1" maxlength="3" size="2" /><select name="scheibe_alph_1" size="1"><option value="A">A</option><option value="B">B</option><option value="C">C</option><option value="D">D</option></select> Name: <input type="text" name="name_1" maxlength="60" /></td></tr>",0);
    8. $template->AddText("<tr><td>2. Teilnehmer</td><td>Gruppe: <select name="gruppe_2" size="1">",0);
    9. $ergebnis = $template->mysqli->query("SELECT name, id FROM gruppen WHERE praefix = '".$template->data_turnier->praefix."'");
    10. while ($row = $ergebnis->fetch_object())
    11. {
    12. $template->AddText("<option value="".$row->id."">".$row->name."</option>",0,0);
    13. }
    14. $template->AddText("</select> Scheibe: <input type="text" name="scheibe_num_2" maxlength="3" size="2" /><select name="scheibe_alph_2" size="1"><option value="A">A</option><option value="B">B</option><option value="C">C</option><option value="D">D</option></select> Name: <input type="text" name="name_2" maxlength="60" /></td></tr>",0);
    15. $template->AddText("<tr><td>3. Teilnehmer</td><td>Gruppe: <select name="gruppe_3" size="1">",0);
    16. $ergebnis = $template->mysqli->query("SELECT name, id FROM gruppen WHERE praefix = '".$template->data_turnier->praefix."'");
    17. while ($row = $ergebnis->fetch_object())
    18. {
    19. $template->AddText("<option value="".$row->id."">".$row->name."</option>",0,0);
    20. }
    21. $template->AddText("</select> Scheibe: <input type="text" name="scheibe_num_3" maxlength="3" size="2" /><select name="
    Alles anzeigen


    Hoffe, ihr könnt mir helfen.

    LG

    Fipsi

  • Wenn ich mal so sagen darf.. ich hab von JS so gut wie keine Ahnung.. alles, was ich bisher "selber" in JS geschrieben hab, hab ich mir zum Teil irgendwie abgeschaut und zum Bedarf umgeschrieben "hust".
    Könntest du mir da vllt. n bisschen Code geben? Zumindest zum Felder ansprechen, überprüfen, usw., das mit Ajax hab ich schonmal gmacht.

  • Also du hast ja irgend ein inputfeld oder etwas ähnliches. Ich mache es hier mal mit einem <select> (Dropdownmenü).
    Diesen Select Elementen gibst du eine id und ein onchangeevent(<select id="grp" onchange="autofill()"></select>). Im JavaScript(function autofill()) fragst du nun über document.getElementById("grp"); den Werte, welcher ausgewählt ist ab. Das selbe machst du nun auch für die anderen 2 input/select elemente. Nun hast du also 3 mal document.getEle... gemacht, alle drei gefunden Werte speicherst du in Variablen ab. Jetzt prüfst du über ein if-Statement, ob die 2 gewünschten Werte vorhanden sind, also entweder gruppe und scheibe oder gruppe und name. Falls dies der fall ist, führst du die jquery-funktion aus. Als URL gibst du ein php file an, welches dann die Abfrage enthält zu den Teilnehmern und per post oder get übergibst du die beiden werte, welche vorhanden sind. Im php machst du nun ganz normal die Abfrage auf die Datenbank. Die gewünschten Werte erhälst du ja per post/get.
    Hab das so auch schon verwendet. Vlt hilft dir dies noch etwas: tutorials.de/content/1088-ajax-mit-jquery-json-und-php.html
    Zu deinem Problem gibt es tutorials, welche genau das machen, da dies ein grundbeispiel ist... Nur leider finde ich das tutorial gerade nicht mehr aber hier wird auch mit javascript und php gearbeitet:blog.axxg.de/einfuehrung-ajax-quickstart/

  • Okay.. hab mich jetzt mal einigermaßen an was versucht.. ich glaube aber, dass das hinten und vorne nicht passt..^^

    Quellcode

    1. $(document).ready(function(){
    2. function autofill()
    3. {
    4. var bogen_typ = $("#bogen_typ");
    5. var gruppe_1 = $("#gruppe_1");
    6. var scheibe_num_1 = $("#scheibe_num_1");
    7. var scheibe_alph_1 = $("#scheibe_alph_1");
    8. var name_1 = $("#name");
    9. var gruppe_2 = $("#gruppe_2");
    10. var scheibe_num_2 = $("#scheibe_num_2");
    11. var scheibe_alph_2 = $("#scheibe_alph_2");
    12. var name_2 = $("#name_2");
    13. var gruppe_3 = $("#scheibe_num_3");
    14. var scheibe_num_3 = $("#scheibe_num_3");
    15. var scheibe_alph_3 = $("#scheibe_alph_3");
    16. var name_3 = $("#name_3");
    18. if ((!empty(gruppe_1)) && (((!empty(scheibe_num_1)) && (!empty(scheibe_alph_1))) || (!empty(name_1))))
    19. {
    20. if ((!empty(scheibe_num_1)) && (!empty(scheibe_alph_1)))
    21. {
    22. $.ajax({
    23. type: "GET",
    24. url: "mannschaft.php",
    25. data: "do=search_teilnehmer&type=1&gruppe="+gruppe_1+"&scheibe_num="+scheibe_num_1+"&scheibe_alph="+scheibe_alph_1,
    26. success: function(data){alter("Name:"+data);}
    27. });
    28. }
    29. if (!empty(name_1))
    30. {
    31. $.ajax({
    32. type: "GET",
    33. url: "mannschaft.php?do=search_teilnehmer",
    34. data: "do=search_teilnehmer&type=2&gruppe="+gruppe_1+"name="+name_1,
    35. success: function(data(){}
    36. });
    37. }
    38. }
    39. else if ((!empty(gruppe_2)) && (((!empty(scheibe_num_2)) && (!empty(scheibe_alph_2))) || (!empty(name_2))))
    40. {
    41. if ((!empty(scheibe_num_2)) && (!empty(scheibe_alph_2)))
    42. {
    43. $.ajax({
    44. type: "GET",
    45. url: "mannschaft.php",
    46. data: "do=search_teilnehmer&type=1&gruppe="+gruppe_2+"&scheibe_num="+scheibe_num_2+"&scheibe_alph="+scheibe_alph_2,
    47. success: function(data){}
    48. });
    49. }
    50. if (!empty(name_2))
    51. {
    52. $.ajax({
    53. type: "GET",
    54. url: "mannschaft.php?do=search_teilnehmer",
    55. data: "do=search_teilnehmer&type=2&gruppe="+gruppe_2+"name="+name_2,
    56. success: function(data(){alert("Hallo");}
    57. });
    58. }
    59. }
    60. else if ((!empty(gruppe_3)) && (((!empty(scheibe_num_3)) && (!empty(scheibe_alph_3))) || (!empty(name_3))))
    61. {
    62. if ((!empty(scheibe_num_3)) && (!empty(scheibe_alph_3)))
    63. {
    64. $.ajax({
    65. type: "GET",
    66. url: "mannschaft.php",
    67. data: "do=search_teilnehmer&type=1&gruppe="+gruppe_3+"&scheibe_num="+scheibe_num_3+"&scheibe_alph="+scheibe_alph_3,
    68. success: function(data){}
    69. });
    70. }
    71. if (!empty(name_3))
    72. {
    73. $.ajax({
    74. type: "GET",
    75. url: "mannschaft.php?do=search_teilnehmer",
    76. data: "do=search_teilnehmer&type=2&gruppe="+gruppe_3+"name="+name_3,
    77. success: function(data){}
    78. });
    79. }
    80. }
    81. }
    82. );
    Alles anzeigen


    Edit: hab jetzt mal die ganzen Syntax-Fehler raus^^ Jetzt sagt mir FireBug:
    function onchange(event) {
    autofill()
    }
    Dass da was nicht passt.. aber hier ist mein Latein am Ende.

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

  • Du hast also 3 Gruppen, 3 Namen und 3 Scheiben? Dies wären dann also 9 Dropdownmenus?

    Die if-Statements müssten dann allerdings etwas anders formuliert werden:

    Quellcode

    1. ...
    2. if( ( (!empty(gruppe_1))&&(!empty(scheibe_num_1)) ) || ( (!empty(scheibe_alph_1))&&(!empty(name_1)) ) ){
    3. /*
    4. Dies wird ausgeführt, wenn entweder gruppe1 und scheibe_num_1 oder scheibe_alph_1 und name_1 nicht NULL sind. Im PHP Code müsste dann als Standart-Wert bei den Dropdowns
    5. ein <option value=NULL> ausgewählt sein, denn !empty gibt nur dann false zurück. Wenn du als standart-<option> ein <option> mit einem undefined Value hast oder sogar etwas drin hast,
    6. wird das statement immer ausgeführt werden...
    7. */
    8. }

    Erklär mir sonst mal, wann welches Statement ausgeführt werden soll und was dann an php geschickt werden soll, dann kann ich dir vlt besser sagen warum etwas nicht funktioniert

  • Okay.. mit der grünen Erklärung hast du recht, ja.. da hab ich nen Fehler drin.
    Aber die Felder sind folgendermaßen:
    gruppe Dropdown, scheibe_num text, scheibe_alph dropdown, name text.

    Und gemacht werden soll dann:

    Wenn gruppe/scheibe_num/scheibe_alph vorhanden sind, soll name aufgefüllt werden.
    Ist gruppe/name vorhanden, soll scheibe_num/scheibe_alph gesucht werden.

  • Ok, dann würde ich sowas vorschlagen:

    Quellcode

    1. <html>
    3. <script src="">script einbinden nicht vergessen, sowohl das jquery als auch das mit den eigenen funktionen</script>
    4. ...
    5. <select name="gruppe" id="grp" onchange="autofill()">
    6. <option value="">Wählen</option>
    7. <option value="-Wert für Gruppe-">-Wert für Gruppe-</option>
    8. ...
    9. <select name="scheibe_alph" id="salph" onchange="autofill()">
    10. <option value="">Wählen</option>
    11. <option value="-Wert für scheibe_alph-">-Wert für scheibe_alph-</option>
    12. ...
    13. <input type="text" name="username" id="uname" onsubmit="autofill()">
    14. <input type="text" name="scheibe_num" id="snum" onsubmit="autofill()">
    15. ...
    16. </html>
    Alles anzeigen

    Bei input weiss ich nicht, ob onchange da eine gute lösung ist, die Frage ist, ob das onchange ausgeführt wird, sobald der erste Buchstabe in das input-Feld eingetragen wird oder ob es erst ausgeführt wird, sobald der fokus nicht mehr auf dem feld ist. Aber denke es wird ausgeführt, sobald der erste buchstabe eingetippt wird, daher würde ich eher ein onsubmit(falls er enter drückt sollte dies ausgeführt werden) oder ein onblur verwenden.
    Nun zum javascript:

    Quellcode

    1. function autofill(){
    2. snum = document.getElementById("snum");
    3. uname = document.getElementById("uname");
    4. salph = document.getElementById("salph");
    5. grp = document.getElementById("grp");
    6. if(grp!="" && snum!="" && salph!=""){
    7. $.ajax({
    8. url: "searchname.php",
    9. success: function(name){
    10. $("#uname").val(name);}
    11. });
    12. }
    13. else if(grp!="" && uname!=""){
    14. url: "searchscheibe.php",
    15. data: {gruppe:grp, name:uname}
    16. success: function(scheibenum){
    17. $("#snum").val(scheibenum);}
    18. function(scheibealph){
    19. $("#salph").val(scheibealph);}
    20. });
    21. }
    22. }
    Alles anzeigen

    php-file: searchscheibe.php
    ein php dokument, mit dem aufbau zur datenbank und der select abfrage
    php-file: searchname.php
    ein php dokument, mit dem aufbau zur datenbank und der select abfrage

    Hab es nicht ausgetestet aber vlt hilft dir das ein wenig weiter

  • Also ich habs jetzt mal ein bisschen auf mein Formular angepasst, sodass zumindest eins funktionieren sollte.. ich bekomm immer (von FireBug) den Error: "autofill is not defined". Ich hab echt kein Plan an was es liegt.. ist richtig geschrieben, habs probiert mit Klammern und ohne, mit ; und ohne, mit "js"/"javascript" davor, interessiert ihn nicht, er sagt immer das selbe.

    Edit:

    Okay, jetzt hab ich noch eine kleine Änderung: Der Name soll nicht mehr in einem Texteingabefeld, sondern einfach hinter der Scheibenangabe stehen. Und es soll auch nicht mehr die Möglichkeit geben, per Namen und Gruppe zu suchen, sondern nurnoch Gruppe, Scheibennummer, Scheibenbuchstabe und Bogentyp.

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

  • Okay, jetzt mein aktuelles Problem nochmal ausführlicher, vielleicht kann mir ja dann jemand helfen.

    Der aktuelle HTML-Code:

    Quellcode

    1. <head>
    2. [...]
    3. <script type="text/javascript" src="templates/jquery-2.0.3.min.js"></script>
    4. <script type="text/javascript" src="templates/mannschaft.js"></script>
    5. </head>
    6. <body>
    7. [...]
    8. <form action="" method="POST">
    9. <table width="75%">
    10. <tr><td>Name</td><td><input type="text" name="name" maxlength="75" /></td></tr>
    11. <tr><td>Bogentyp</td><td><select name="bogen_typ" size="1"><option value="1">Recurve</option><option value="2">Compound</option><option value="3">Blankbogen</option></select></td></tr>
    12. <tr><td>1. Teilnehmer</td><td>Gruppe: <select name="gruppe_1" size="1" id="grp" onchange="autofill()"><option value="1">Vormittag</option><option value="2">Nachmittag</option></select>
    13. Scheibe: <input type="text" name="scheibe_num_1" id="snum" maxlength="3" size="2" onblur="autofill()" />
    14. <select name="scheibe_alph_1" id="salph" size="1" onchange="autofill()"><option value="A">A</option><option value="B">B</option><option value="C">C</option><option value="D">D</option></select></td></tr>
    15. [...]
    Alles anzeigen


    Der JS-Code aus mannschaft.js:

    Quellcode

    1. $("document").ready(function(){
    2. function autofill() {
    3. snum = $("input:text snum");
    4. salph = $("input:select salph");
    5. grp = $("input:select grp");
    6. bogentyp = $("input:select bogen_typ");
    7. if(grp!="" && snum!="" && salph!=""){
    8. $.ajax({
    9. type: "GET",
    10. url: "mannschaft.php?do=search_teilnehmer",
    11. data: {bogen_typ: bogentyp, gruppe:grp, scheibe_num:snum, scheibe_alph:salph},
    12. async: false,
    13. success: function(name){
    14. $("#uname").val(name);
    15. alert(name);}
    16. });
    17. }
    18. }
    19. });
    Alles anzeigen


    Die Fehlermeldung:
    (Anhang)

    Hatte zuerst die jQuery-Version 1.9.1 eingebaut, dachte vielleicht behebt die neue Version den Fehler, tut sie aber nicht. Werde das auch nachher wieder ändern, da die 2'er-Version ja nicht für IE 6/7/8 ist.
    Bilder

    • fehler.png

      5,15 kB, 1.278×89, 328 mal angesehen

  • Sorry, das ich solange nicht mehr geantwortet habe, war eine Woche weg.
    Also...
    Firebug gibt dir ja die genaue Ursache:
    autofill() is not defined
    Das heisst, das er deine Funktion gar nicht findet. Der Fehler muss in der Rechtschreibung oder Pfadangabe deines Js(welches die Funktion autofill() enthält) scriptes liegen.
    mach sonst mal eine funktion im javascript z.b. test() und läst sie durch ein onload event des bodys aufrufen. In der test() funktion machst du ein einfaches alert. Somit kannst du testen ob dein javascript file korrekt eingebungen ist. Was du auch machen könntest wäre, eine javascript funktion direkt im html, es könnte ja sein, das browserseitig das javascript nicht ausgeführt werden kann/javascript deaktiviert ist...

  • Ok hast du es bereits versucht, ohne das (document).ready? Wenn du es mit dem (document).ready machen willst, musst du die funktion autofill() ausserhalb der .ready deklarieren und in der .ready machst du nur noch einen funktionsaufruf der autofill(). Allerdings müsstest du dann dein html anpassen, denn dann müsstest du dann die autofill() nicht mehr aufrufen, sondern schauen, dass die .ready ausgeführt wird.

  • So.. endlich hab ich mal wieder Zeit, mich um meine Code's zu kümmern.. (es lebe die Krankschreibung *hust* *Ironie off*).

    SJay96 schrieb:

    Ok hast du es bereits versucht, ohne das (document).ready? Wenn du es mit dem (document).ready machen willst, musst du die funktion autofill() ausserhalb der .ready deklarieren und in der .ready machst du nur noch einen funktionsaufruf der autofill(). Allerdings müsstest du dann dein html anpassen, denn dann müsstest du dann die autofill() nicht mehr aufrufen, sondern schauen, dass die .ready ausgeführt wird.


    Das war irgendwie das einzige, mit dem ich selber was hab anfangen können bisher. Mein Problem ist jetzt nur, wie ich das so anstell, also das autofill außerhalb zu deklarieren, dass das ready dann läuft. kann mir da bitte jemand helfen? Vielen Dank :)

  • Versuch mal lieber folgenden Ansatz:
    Deinem Formular gibst du innerhalb vom form-Tag eine id (z.B. <form id="irgendwas" ...> und dann kannst du das ganze mit jQuery wunderbar verarbeiten.

    Quellcode

    1. $(document).ready(function() {
    2. $('#irgendwas').submit(function() { // wird aufgerufen, wenn das Formular versendet wird
    3. $('input[name=name], this).val() // enthält den Inhalt vom Input-Feld "name"
    4. });
    5. });