Form Check


  • gold_digger
  • 1192 Aufrufe 4 Antworten

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

  • Form Check

    hallo,
    Ich habe das gleiche Problem wie Snip3r in "Frage zu JavaScript Submit Button".
    Leider wurde das Thema schon geschlossen, sonst würde ich da nur ein Post erstellen. jedenfalls habe ich ein Formular mit Radio Buttons anstatt checkboxen. sollte es da genauso funktionieren?

    der button bleibt deaktiviert, auch wenn ich in allen 4 bereichen 1 häkchen setze. hier der code wie ich ihn habe:

    script:

    function checkForm() {
    if (document.bewertung.layout.checked & document.bewertung.design.checked & document.bewertung.inhalt.checked & document.bewertung.lesbarkeit.checked) {
    document.bewertung.absenden.disabled=false;
    }
    }

    anmerkung: bin mir nicht sicher ob man mit & oder AND oder && verknüpft, hat aber alles ncith funktioniert. gibt es auch sowas wie enabled anstatt disabled? und else habe ich rausgelassen, weil deaktiviert ist der button ja eh, und nur wenn die bedingung stimmt wird er wieder aktiviert (oder?).

    html code:
    <form id="bewertung" action="" method="post">
    <table>
    <tr>
    <th style="height: 20px; width: 100px;">Bereich:</th>
    <th style="width: 70px;">schlecht</th>
    <th style="width: 70px;">geht so</th>
    <th style="width: 70px;">gut</th>
    <th style="width: 70px;">sehr gut</th>
    <th>Verbesserungsvorschl&auml;ge</th>
    </tr>
    <tr>
    <th>Layout:</th>
    <td><input type="radio" name="layout" value="layout1" onclick="checkForm()" /></td>
    <td><input type="radio" name="layout" value="layout2" onclick="checkForm()" /></td>
    <td><input type="radio" name="layout" value="layout3" onclick="checkForm()" /></td>
    <td><input type="radio" name="layout" value="layout4" onclick="checkForm()" /></td>
    <td class="textarea"><textarea name="verbesserung_layout" cols="20" rows="2"></textarea></td>
    </tr>
    <tr>
    <th>Design:</th>
    <td><input type="radio" name="design" value="design1" onclick="checkForm()" /></td>
    <td><input type="radio" name="design" value="design2" onclick="checkForm()" /></td>
    <td><input type="radio" name="design" value="design3" onclick="checkForm()" /></td>
    <td><input type="radio" name="design" value="design4" onclick="checkForm()" /></td>
    <td class="textarea"><textarea name="verbesserung_design" cols="20" rows="2"></textarea></td>
    </tr>
    <tr>
    <th>Inhalt:</th>
    <td><input type="radio" name="inhalt" value="inhalt1" onclick="checkForm()" /></td>
    <td><input type="radio" name="inhalt" value="inhalt2" onclick="checkForm()" /></td>
    <td><input type="radio" name="inhalt" value="inhalt3" onclick="checkForm()" /></td>
    <td><input type="radio" name="inhalt" value="inhalt4" onclick="checkForm()" /></td>
    <td class="textarea"><textarea name="verbesserung_inhalt" cols="20" rows="2"></textarea></td>
    </tr>
    <tr>
    <th>Lesbarkeit:</th>
    <td><input type="radio" name="lesbarkeit" value="lesbarkeit1" onclick="checkForm()" /></td>
    <td><input type="radio" name="lesbarkeit" value="lesbarkeit2" onclick="checkForm()" /></td>
    <td><input type="radio" name="lesbarkeit" value="lesbarkeit3" onclick="checkForm()" /></td>
    <td><input type="radio" name="lesbarkeit" value="lesbarkeit4" onclick="checkForm()" /></td>
    <td class="textarea"><textarea name="verbesserung_lesbarkeit" cols="20" rows="2"></textarea></td>
    </tr>
    </table>
    <p style="text-align: center;">
    <input type="submit" name="absenden" value="absenden" disabled="disabled" onclick="javascript: danke()" />
    <input type="reset" name="abbrechen" value="abbrechen" />
    </p>
    </form>



    wäre über eure hilfe echt froh!

    mfg gold_digger
    There are 10 kind of people: Those who understand binary code, and those who don't.

  • Hi,
    das Problem bei dir ist, dass document.bewertung.layout.checked nur auf das erste Element zugreifen würde, die anderen außer Acht lassen würde.
    Desweiteren hat deine Form zwar die id "Bewertung", es ist aber nötig, dass es den namen Bewertung hat.

    Ich hab das Script entsprechend geändert, dass alle radiobuttons überprüft werden.

    Quellcode

    1. <script type="text/javascript">
    2. // <![CDATA[
    3. function checkForm() {
    4. var allchecked = true;
    5. var a_checked = new Array();
    6. a_checked[1] = false;
    7. a_checked[2] = false;
    8. a_checked[3] = false;
    9. a_checked[4] = false;
    10. var the_ids = new Array();
    11. the_ids[1] = 'layout';
    12. the_ids[2] = 'design';
    13. the_ids[3] = 'inhalt';
    14. the_ids[4] = 'lesbarkeit';
    15. for(x in the_ids) {
    16. for(i=1; i<5; i++) if(document.getElementById(the_ids[x]+i).checked) a_checked[x] = true;
    17. }
    18. for(x in a_checked) if(!a_checked[x]) allchecked = false;
    19. if(allchecked) document.bewertung.absenden.disabled=false;
    20. else document.bewertung.absenden.disabled=true;
    21. }
    22. // ]]>
    23. </script>
    24. <form name="bewertung" action="" method="post">
    25. <table>
    26. <tr>
    27. <th style="height: 20px; width: 100px;">Bereich:</th>
    28. <th style="width: 70px;">schlecht</th>
    29. <th style="width: 70px;">geht so</th>
    30. <th style="width: 70px;">gut</th>
    31. <th style="width: 70px;">sehr gut</th>
    32. <th>Verbesserungsvorschl&auml;ge</th>
    33. </tr>
    34. <tr id="layout">
    35. <th>Layout:</th>
    36. <td><input type="radio" id='layout1' name="layout" value="layout1" onclick="checkForm()" /></td>
    37. <td><input type="radio" id='layout2' name="layout" value="layout2" onclick="checkForm()" /></td>
    38. <td><input type="radio" id='layout3' name="layout" value="layout3" onclick="checkForm()" /></td>
    39. <td><input type="radio" id='layout4' name="layout" value="layout4" onclick="checkForm()" /></td>
    40. <td class="textarea"><textarea name="verbesserung_layout" cols="20" rows="2"></textarea></td>
    41. </tr>
    42. <tr>
    43. <th>Design:</th>
    44. <td><input type="radio" id="design1" name="design" value="design1" onclick="checkForm()" /></td>
    45. <td><input type="radio" id="design2" name="design" value="design2" onclick="checkForm()" /></td>
    46. <td><input type="radio" id="design3" name="design" value="design3" onclick="checkForm()" /></td>
    47. <td><input type="radio" id="design4" name="design" value="design4" onclick="checkForm()" /></td>
    48. <td class="textarea"><textarea name="verbesserung_design" cols="20" rows="2"></textarea></td>
    49. </tr>
    50. <tr>
    51. <th>Inhalt:</th>
    52. <td><input type="radio" id="inhalt1" name="inhalt" value="inhalt1" onclick="checkForm()" /></td>
    53. <td><input type="radio" id="inhalt2" name="inhalt" value="inhalt2" onclick="checkForm()" /></td>
    54. <td><input type="radio" id="inhalt3" name="inhalt" value="inhalt3" onclick="checkForm()" /></td>
    55. <td><input type="radio" id="inhalt4" name="inhalt" value="inhalt4" onclick="checkForm()" /></td>
    56. <td class="textarea"><textarea name="verbesserung_inhalt" cols="20" rows="2"></textarea></td>
    57. </tr>
    58. <tr>
    59. <th>Lesbarkeit:</th>
    60. <td><input type="radio" id="lesbarkeit1" name="lesbarkeit" value="lesbarkeit1" onclick="checkForm()" /></td>
    61. <td><input type="radio" id="lesbarkeit2" name="lesbarkeit" value="lesbarkeit2" onclick="checkForm()" /></td>
    62. <td><input type="radio" id="lesbarkeit3" name="lesbarkeit" value="lesbarkeit3" onclick="checkForm()" /></td>
    63. <td><input type="radio" id="lesbarkeit4" name="lesbarkeit" value="lesbarkeit4" onclick="checkForm()" /></td>
    64. <td class="textarea"><textarea name="verbesserung_lesbarkeit" cols="20" rows="2"></textarea></td>
    65. </tr>
    66. </table>
    67. <p style="text-align: center;">
    68. <input type="submit" name="absenden" value="absenden" disabled="disabled" onclick="javascript: danke()" />
    69. <input type="reset" name="abbrechen" value="abbrechen" />
    70. </p>
    71. </form>
    Alles anzeigen

    Getestet mit IE, FF und Opera.

    Hoffe alles zu deiner Zufriedenheit berücksichtigt zuhaben.
    Gruß
    Broken Sword
    Auf dem Abstellgleis sah man ihn liegen,
    Auf dem Abstellgleis zwischen Schwelle und Gestein,
    Auf dem Abstellgleis im strömenden Regen,
    Auf dem Abstellgleis allein.

  • ja so funktioniert das und genau so habe ich mir das vorgestellt!
    wow danke broken sword, ich muss in der richtung auf jeden fall noch viel lernen, wäre auf die idee mit den arrays nicht gekommen... und alles an dem code habe ich auch noch nciht verstanden aber musst du nicht erklären.


    also kann geschlossen werden, bzw noch n bissl offen bleiben, falls jemand anders dazu noch fragen oder anregungen hat ^^
    (ich hätt ja auch gern in ein anderes topic reingeschreiben)


    mfg gold_digger
    There are 10 kind of people: Those who understand binary code, and those who don't.

  • gold_digger schrieb:

    und alles an dem code habe ich auch noch nciht verstanden aber musst du nicht erklären.


    Warum denn nicht? Lernen ist doch wichtig =)

    Quellcode

    1. for(x in the_ids) {

    Hier geh ich die Index' aus dem Array the_ids durch

    Quellcode

    1. for(i=1; i<5; i++)

    Da es immer 4 Antwortmöglichkeiten gibt, kann man am einfachsten mit einer for-Schleife nacheinander auf die Radiobuttonszugreifen

    Quellcode

    1. if(document.getElementById(the_ids[x]+i).checked) a_checked[x] = true;

    was ich hier auch mache. the_ids[x]+i lässt so layout1 layout2 u.s.w. entstehen.

    Quellcode

    1. for(x in a_checked) if(!a_checked[x]) allchecked = false;

    Und hier geh ich das Array a_checked durch und prüfe ob auch alle wahr sind.

    Hoffe dir so das ganze veranschaulicht zuhaben.

    Gruß
    Broken Sword

    P.S.
    Wenn der Thread geschlossen werden kann, nicht vergessen Prefix von "JavaScript" auf "Geschlossen" umzustellen ;)
    Auf dem Abstellgleis sah man ihn liegen,
    Auf dem Abstellgleis zwischen Schwelle und Gestein,
    Auf dem Abstellgleis im strömenden Regen,
    Auf dem Abstellgleis allein.