[JavaScript] Tabelle automatisch aus Datenbank auffüllen

This site uses cookies. By continuing to browse this site, you are agreeing to our Cookie Policy.

  • "// wird aufgerufen, wenn das Formular versendet wird"

    Das ist dann aber schon zu spät. Sobald alle nötigen Daten für eine eindeutige Identifizierung angegeben wurden, soll eben der jenige Teilnehmer, oder eine Fehlermeldung, wenn was nicht passt, da stehen. Nicht erst, wenn das Formular versendet wird.
  • Ich habs eigentlich so gedacht:

    Angegeben wird:

    - Mannschaftsname
    - Bogentyp
    und dann für jeden einzelnen der DREI Teilnehmer:
    - Scheibennummer
    - Scheibenbuchstabe
    - Gruppe

    Sobald dann der Bogentyp - ein defaulttyp ist immer da - , und für einen Teilnehmer die Gruppe, Scheibennummer und -buchstabe angegeben wurde, soll entweder der Name des Teilnehmers angezeigt werden oder, wenn Scheibennummer/-buchstabe/Gruppe nicht zum Bogentyp passt/leer ist, dann soll eine Fehlermeldung angezeigt werden, BEVOR das Formular abgeschickt wird.
  • bYemma wrote:

    Wann willst du denn prüfen? Wenn der Inhalt der Felder geändert wird?

    Fipsi wrote:

    Sobald dann der Bogentyp - ein defaulttyp ist immer da - , und für einen Teilnehmer die Gruppe, Scheibennummer und -buchstabe angegeben wurde, soll entweder der Name des Teilnehmers angezeigt werden oder, wenn Scheibennummer/-buchstabe/Gruppe nicht zum Bogentyp passt/leer ist, dann soll eine Fehlermeldung angezeigt werden, BEVOR das Formular abgeschickt wird.


    Eben sobald alle nötigen Informationen zu einer eindeutigen Identifizierung (Scheibennummer/-buchstabe, Gruppe, Bogentyp ist immer angegeben) angegeben wurden. Und dann eben sofort, wenn das letzte Feld ausgefüllt wurde und das bei jedem Teilnehmer.
  • Soooooooo...
    Sorry für Doppelpost, aber ich hab jetzt endlich eine Lösung gefunden, allerdings OHNE jQuery.
    Diese sieht wiefolgt aus:

    Source Code

    1. function autofill(teilnehmer) {
    2. var bogentyp = document.getElementById("bogen_typ").value;
    3. var snum = document.getElementById("snum_"+teilnehmer).value;
    4. var salph = document.getElementById("salph_"+teilnehmer).value;
    5. var grp = document.getElementById("grp_"+teilnehmer).value;
    6. if(grp!="" && snum!="" && salph!=""){
    7. var http = null;
    8. if (window.XMLHttpRequest) {
    9. http = new XMLHttpRequest();
    10. } else if (window.ActiveXObject) {
    11. http = new ActiveXObject("Microsoft.XMLHTTP");
    12. }
    13. if (http != null) {
    14. http.open("GET", "mannschaft.php?do=search_teilnehmer&bogen_typ="+bogentyp+"&gruppe="+grp+"&scheibe_num="+snum+"&scheibe_alph="+salph, true);
    15. http.onreadystatechange = function() {
    16. if (http.readyState == 4) {
    17. var ausgabe = http.responseText;
    18. if (ausgabe == 0) {
    19. document.getElementById("ausgabe_"+teilnehmer).innerHTML = "Scheibenplatz wurde nicht gefunden.";
    20. document.getElementById("senden").disabled = true;
    21. } else if (ausgabe == 1) {
    22. document.getElementById("ausgabe_"+teilnehmer).innerHTML = "Scheibenplatz ist leer.";
    23. document.getElementById("senden").disabled = true;
    24. } else if (ausgabe == 2) {
    25. document.getElementById("ausgabe_"+teilnehmer).innerHTML = "Teilnehmer hat nicht den richtigen Bogentyp.";
    26. document.getElementById("senden").disabled = true;
    27. } else {
    28. document.getElementById("ausgabe_"+teilnehmer).innerHTML = ausgabe; }
    29. }
    30. };
    31. http.send(null);
    32. }
    33. }
    34. }
    Display All


    Source Code

    1. <form action="" method="POST">
    2. <table width="75%">
    3. <tr><td>Name</td><td><input type="text" name="name" maxlength="75" /></td></tr>
    4. <tr><td>Bogentyp</td><td><select id="bogen_typ" name="bogen_typ" size="1"><option value="1">Recurve</option><option value="2">Compound</option><option value="3">Blankbogen</option></select></td></tr>
    5. <tr><td>1. Teilnehmer</td><td>Gruppe: <select name="gruppe_1" size="1" id="grp_1" onchange="autofill(1)"><option value="1">Vormittag</option><option value="2">Nachmittag</option></select>
    6. Scheibe: <input type="text" name="scheibe_num_1" id="snum_1" maxlength="3" size="2" onblur="autofill(1)" />
    7. <select name="scheibe_alph_1" id="salph_1" size="1" onchange="autofill(1)"><option value="A">A</option><option value="B">B</option><option value="C">C</option><option value="D">D</option></select></td><td id="ausgabe_1"></td></tr>
    8. <tr><td>2. Teilnehmer</td><td>Gruppe: <select name="gruppe_2" size="1" id="grp_2" onchange="autofill(2)"><option value="1">Vormittag</option><option value="2">Nachmittag</option></select>
    9. Scheibe: <input type="text" name="scheibe_num_2" id="snum_2" maxlength="3" size="2" onblur="autofill(2)" />
    10. <select name="scheibe_alph_2" id="salph_2" size="1" onchange="autofill(2)"><option value="A">A</option><option value="B">B</option><option value="C">C</option><option value="D">D</option></select></td><td id="ausgabe_2"></td></tr>
    11. <tr><td>3. Teilnehmer</td><td>Gruppe: <select name="gruppe_3" size="1" id="grp_3" onchange="autofill(3)"><option value="1">Vormittag</option><option value="2">Nachmittag</option></select>
    12. Scheibe: <input type="text" name="scheibe_num_3" id="snum_3" maxlength="3" size="2" onblur="autofill(3)" />
    13. <select name="scheibe_alph_3" id="salph_3" size="1" onchange="autofill(3)"><option value="A">A</option><option value="B">B</option><option value="C">C</option><option value="D">D</option></select></td><td id="ausgabe_3"></td></tr>
    14. </table>
    15. <input type="submit" value="Speichern" />
    16. </form>
    Display All


    Muss diese jetzt nurnoch für die anderen beiden Teilnehmer erweitern.

    Edit:

    Ein Problem hab ich jetzt allerdings doch noch:
    Ich würde gerne, sobald eine Fehlermeldung angezeigt wird, den Speichernbutton disabled machen. Das funktioniert soweit. Allerdings krieg ich es nicht gebacken, dass er wieder anklickbar wird, wenn KEINE Fehlermeldung mehr vorhanden ist. Kann mir hierbei bitte noch jemand helfen?
  • Dann erstell doch einfach eine Variable, die die Zustände der verschiedenen Teilnehmer hat. Und bei erfolgreicher Fehlerkontrolle bei einem Teilnehmer wird geschaut, ob diese bei den anderen 2 auch erfolgreich war. Nur dann setzt du den Button auf "disabled = false".

    Source Code

    1. t_status = {1: "na", 2: "na", 3: "na"};
    2. function autofill(teilnehmer) {
    3. ...
    4. var ausgabe = http.responseText;
    5. t_status[teilnehmer] = "no";
    6. ...
    7. } else {
    8. document.getElementById("ausgabe_"+teilnehmer).innerHTML = ausgabe; }
    9. t_status[teilnehmer] = "ok";
    10. if(t_status[1] == "ok" && t_status[2] == "ok" && t_status[3] == "ok") {
    11. document.getElementById("senden").disabled = false;
    12. }
    13. }
    14. };
    15. ...
    Display All
  • Okay.. also das krieg ich jetzt alles soweit hin.. es gibt nur noch eine Sache, die einfach nicht will: Der Button will nicht mehr anklickbar werden.

    Folgendes schon erfolgslos ausprobiert:

    Source Code

    1. document.getElementById("senden").disabled = false;
    2. document.getElementById.enable = true;


    Will beides nicht :/