[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

  • 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 schrieb:

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

    Fipsi schrieb:

    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:

    Quellcode

    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;
    7. if(grp!="" && snum!="" && salph!=""){
    9. var http = null;
    10. if (window.XMLHttpRequest) {
    11. http = new XMLHttpRequest();
    12. } else if (window.ActiveXObject) {
    13. http = new ActiveXObject("Microsoft.XMLHTTP");
    14. }
    16. if (http != null) {
    17. http.open("GET", "mannschaft.php?do=search_teilnehmer&bogen_typ="+bogentyp+"&gruppe="+grp+"&scheibe_num="+snum+"&scheibe_alph="+salph, true);
    18. http.onreadystatechange = function() {
    19. if (http.readyState == 4) {
    21. var ausgabe = http.responseText;
    23. if (ausgabe == 0) {
    24. document.getElementById("ausgabe_"+teilnehmer).innerHTML = "Scheibenplatz wurde nicht gefunden.";
    25. document.getElementById("senden").disabled = true;
    26. } else if (ausgabe == 1) {
    27. document.getElementById("ausgabe_"+teilnehmer).innerHTML = "Scheibenplatz ist leer.";
    28. document.getElementById("senden").disabled = true;
    29. } else if (ausgabe == 2) {
    30. document.getElementById("ausgabe_"+teilnehmer).innerHTML = "Teilnehmer hat nicht den richtigen Bogentyp.";
    31. document.getElementById("senden").disabled = true;
    32. } else {
    33. document.getElementById("ausgabe_"+teilnehmer).innerHTML = ausgabe; }
    34. }
    35. };
    36. http.send(null);
    37. }
    38. }
    39. }
    Alles anzeigen


    Quellcode

    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>
    Alles anzeigen


    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".

    Quellcode

    1. t_status = {1: "na", 2: "na", 3: "na"};
    2. function autofill(teilnehmer) {
    4. ...
    6. var ausgabe = http.responseText;
    7. t_status[teilnehmer] = "no";
    9. ...
    11. } else {
    12. document.getElementById("ausgabe_"+teilnehmer).innerHTML = ausgabe; }
    13. t_status[teilnehmer] = "ok";
    14. if(t_status[1] == "ok" && t_status[2] == "ok" && t_status[3] == "ok") {
    15. document.getElementById("senden").disabled = false;
    16. }
    17. }
    18. };
    19. ...
    Alles anzeigen