Checkboxen überprüfen
Frank
- javascript
Hallo,
kämpfe immer noch mit dem Problem einer Checkboxen Abfrage... Bisher hat nichts richtig funktioniert und jetzt habe ich im Netz gefunden, dass Checkboxen über "document.formname.elementname.checked" abgefragt werden können... Kann mir jemand helfen, wie ich das umsetze, wenn ich mehrere Checkboxen zur Auswahl habe, von denen mindestens eine angeklickt werden muß? Danke im voraus.
Frank
Hi,
kämpfe immer noch mit dem Problem einer Checkboxen Abfrage
warum schaust Du für solches Basiswissen nicht in der Doku nach?
Gruesse, Joachim
kämpfe immer noch mit dem Problem einer Checkboxen Abfrage...
Meinst du das https://forum.selfhtml.org/?t=138045&m=896709?
Bleib bitte dort im Thread, immerhin drei Leute haben dort bisher versucht dir zu helfen. Wenn du uns nicht sagst, was du nicht verstehst kann dir auch keiner helfen.
Struppi.
Hallo Frank,
kämpfe immer noch mit dem Problem einer Checkboxen Abfrage... Bisher hat nichts richtig funktioniert ...
oh je, was hast du denn schon probiert? So schwer ist es eigentlich gar nicht.
und jetzt habe ich im Netz gefunden, dass Checkboxen über "document.formname.elementname.checked" abgefragt werden können...
Das ist richtig - vorausgesetzt natürlich, die Checkboxen sind wirklich in einem HTML-Formular untergebracht und stehen nicht einfach "solo". Das zugrundeliegende HTML müsste also in etwa diese Struktur haben:
<form name="formular" action="..." method="...">
...
<input type="checkbox" name="check1"> Checkbox 1<br>
<input type="checkbox" name="check2"> Checkbox 2<br>
<input type="checkbox" name="check3"> Checkbox 3<br>
...
</form>
Kann mir jemand helfen, wie ich das umsetze, wenn ich mehrere Checkboxen zur Auswahl habe, von denen mindestens eine angeklickt werden muß?
Das Formular hast du im Prinzip so weit hingekriegt? Gut.
Wann soll denn die Überprüfung stattfinden? Sinnvollerweise doch vor dem Absenden des Formulars. Dazu bietet sich der Eventhandler onsubmit an, den du dem form-Element zusätzlich spendierst:
<form name="formular" action="..." method="..." onsubmit="return (check())">
Damit wird also unmittelbar vor dem Abschicken des Formulars die Javascript-Funktion check() aufgerufen. Das Funktionsergebnis wird über die return-Anweisung gleich weiter durchgereicht, um dem Eventhandler das Ergebnis der Prüfung mitzuteilen. Nun brauchen wir also die Funktion check().
Die muss auf die checkbox-Elemente im Formular zugreifen und prüfen, ob mindestens eins angekreuzt ist. Dieses "mindestens eins" schreit geradezu nach einer ODER-Verknüpfung.
function check()
{ var isokay = (document.formular.check1.checked
|| document.formular.check2.checked
|| document.formular.check3.checked);
return (isokay);
}
Die interne (lokale) Hilfsvariable isokay wird hier also true, wenn mindestens einer der abgefragten Werte true ist. Genau dann ist die Eingabe nach deiner Vorstellung auch tatsächlich in Ordnung - das ist praktisch, denn so können wir diesen ermittelten Wert direkt an den Eventhandler zurückgeben. Denn mit einem Rückgabewert true signalisiert man hier "Ja, das Event ist genehm, mach weiter", mit false dagegen "Vergiss das Ereignis, da stimmt was nicht".
Man könnte hier in der Funktion check() abhängig vom ermittelten Zustand noch weitere Aktionen vor dem return einfügen, etwa ein alert-Fenster aufpoppen lassen:
if (!isokay)
alert("Eingabe unvollständig!");
So sollte es auf jeden Fall laufen wie gewünscht; nun könnte man allerdings noch etwas Kosmetik und "Optimierung" betreiben. Das dreimalige Hinschreiben von 'document.formular' ist nämlich unnötig. Wenn wir beim Aufruf des Eventhandlers den "Zauberparameter" this übergeben, bekommt die aufgerufene Funktion damit eine Referenz auf das Formularobjekt und muss dieses nicht jedesmal wieder umständlich ansprechen. Noch ein Nebeneffekt: Wir können auf das name-Attribut in <form> verzichten, das in den Strict-Varianten von (X)HTML dort sowieso nicht erlaubt ist. Also:
<form action="..." method="..." onsubmit="return (check(this))">
function check(f)
{ var isokay = (f.check1.checked || f.check2.checked || f.check3.checked);
return (isokay);
}
Sieht doch gleich viel netter aus! ;-)
Viel Erfolg und einen schönen Tag noch,
Martin
Hallo Martin,
besten Dank für die ausführliche Hilfe. Die Checkboxen Abfrage funktioniert jetzt auf diesem Weg. Füge ich allerdings meine Abfrage nach den Texteingabefeldern hinzu dann ist wohl irgend etwas noch nicht ganz richtig. Hier mal das komplette Script:
<script language="JavaScript">
<!--
function check()
{
var isokay = (document.formular.check1.checked
|| document.formular.check2.checked
|| document.formular.check3.checked
|| document.formular.check4.checked
|| document.formular.check5.checked
|| document.formular.check6.checked
|| document.formular.check7.checked
|| document.formular.check8.checked
|| document.formular.check9.checked
|| document.formular.check10.checked
|| document.formular.check11.checked
|| document.formular.check12.checked
|| document.formular.check13.checked
|| document.formular.check14.checked
|| document.formular.check15.checked
|| document.formular.check16.checked
|| document.formular.check17.checked
|| document.formular.check18.checked
|| document.formular.check19.checked);
if (!isokay)
alert("Bitte wählen Sie ein Produkt!");
return (isokay);
}
if (document.forms["formular"].elements["name"].value=="")
{
alert ("Bitte geben Sie Ihren Namen an!")
return false;
}
if (document.forms["formular"].elements["vorname"].value=="")
{
alert ("Bitte geben Sie Ihren Vornamen an!")
return false;
}
if (document.forms["formular"].elements["strasse"].value=="")
{
alert ("Bitte geben Sie Ihre Strasse an!")
return false;
}
if (document.forms["formular"].elements["nummer"].value=="")
{
alert ("Bitte geben Sie Ihre Hausnummer an!")
return false;
}
if (document.forms["formular"].elements["plz"].value=="")
{
alert ("Bitte geben Sie Ihre PLZ an!")
return false;
}
if (document.forms["formular"].elements["ort"].value=="")
{
alert ("Bitte geben Sie Ihren Ort an!")
return false;
}
if (document.forms["formular"].elements["telefon"].value=="")
{
alert ("Bitte geben Sie Ihre Telefon-Nummer an!")
return false;
}
if (document.forms["formular"].elements["rueckrufzeit"].value=="")
{
alert ("Bitte geben Sie eine Rückrufzeit an!")
return false;
}
else
{
return true;
}
}
//-->
</script>
Grüße
Frank
besten Dank für die ausführliche Hilfe.
Die du aber nicht bis zu ende gelesen hast, wie man an deinem Code sieht.
<script language="JavaScript">
Wer hat dir das denn gesagt?
function check()
und nach wie vor, wann rufst du diese Funktion auf?
Ausserdem könnte dir evtl. auch die JS Konsole weiterhelfen, denn wie lautet die Fehlermeldung?
Struppi.
besten Dank für die ausführliche Hilfe.
Die du aber nicht bis zu ende gelesen hast, wie man an deinem Code sieht.
warum???
function check()
und nach wie vor, wann rufst du diese Funktion auf?
<form action="dateiname.php" method="post" name="formular" onsubmit="return (check())">
Ausserdem könnte dir evtl. auch die JS Konsole weiterhelfen, denn wie lautet die Fehlermeldung?
????
besten Dank für die ausführliche Hilfe.
Die du aber nicht bis zu ende gelesen hast, wie man an deinem Code sieht.warum???
Weil unten die eigentliche Lösung stand.
function check()
und nach wie vor, wann rufst du diese Funktion auf?<form action="dateiname.php" method="post" name="formular" onsubmit="return (check())">
Bei Martin stand es eher so:
<form action="dateiname.php" method="post" onsubmit="return check(this)">
Ausserdem könnte dir evtl. auch die JS Konsole weiterhelfen, denn wie lautet die Fehlermeldung?
????
Mozillabrowser (z.b. Firefox) haben eine Javascript Fehlerkonsole, da steht der Fehler den du gemacht hast drin sogar mit einem Link auf den Quelltext.
Aber selbst im IE hättest du das kleine gelbe Ausrufezeichen unten Links sehen können, bei einem Doppelklick darauf erhälst du auch dort die Fehlermeldung, die aber oft nicht hilfreich ist.
Struppi.
Hallo Struppi,
Aber selbst im IE hättest du das kleine gelbe Ausrufezeichen unten Links sehen können, bei einem Doppelklick darauf erhälst du auch dort die Fehlermeldung, die aber oft nicht hilfreich ist.
stimmt, aber wenn man das Biest etwas besser kennengelernt hat, kann man mit der Zeit auch aus IE-Fehlermeldungen oft die richtigen Schlüsse ziehen.
Ciao,
Martin
ok, habe das ganze nochmal überarbeitet und jetzt folgendes:
function check(f)
{
var isokay = (f.check1.checked
|| f.check2.checked
|| f.check3.checked
|| f.check4.checked
|| f.check5.checked
|| f.check6.checked
|| f.check7.checked
|| f.check8.checked
|| f.check9.checked
|| f.check10.checked
|| f.check11.checked
|| f.check12.checked
|| f.check13.checked
|| f.check14.checked
|| f.check15.checked
|| f.check16.checked
|| f.check17.checked
|| f.check18.checked
|| f.check19.checked);
if (!isokay)
{
alert("Bitte wählen Sie ein Produkt!");
return (isokay);
}
/// kann / muß ich ab hier jetzt document.forms["formular"] auch durch f. ersetzen?
if (document.forms["formular"].elements["name"].value=="")
{
alert ("Bitte geben Sie Ihren Namen an!")
return false;
}
if (document.forms["formular"].elements["vorname"].value=="")
{
alert ("Bitte geben Sie Ihren Vornamen an!")
return false;
}
if (document.forms["formular"].elements["strasse"].value=="")
{
alert ("Bitte geben Sie Ihre Strasse an!")
return false;
}
if (document.forms["formular"].elements["nummer"].value=="")
{
alert ("Bitte geben Sie Ihre Hausnummer an!")
return false;
}
if (document.forms["formular"].elements["plz"].value=="")
{
alert ("Bitte geben Sie Ihre PLZ an!")
return false;
}
if (document.forms["formular"].elements["ort"].value=="")
{
alert ("Bitte geben Sie Ihren Ort an!")
return false;
}
if (document.forms["formular"].elements["telefon"].value=="")
{
alert ("Bitte geben Sie Ihre Telefon-Nummer an!")
return false;
}
if (document.forms["formular"].elements["rueckrufzeit"].value=="")
{
alert ("Bitte geben Sie eine Rückrufzeit an!")
return false;
}
else
{
return true;
}
}
Aufgerufen wird es jetzt über <form action="dateiname.php" method="post" onsubmit="return (check(this))">
Frank
Aber selbst im IE hättest du das kleine gelbe Ausrufezeichen unten Links sehen können, bei einem Doppelklick darauf erhälst du auch dort die Fehlermeldung, die aber oft nicht hilfreich ist.
stimmt, aber wenn man das Biest etwas besser kennengelernt hat, kann man mit der Zeit auch aus IE-Fehlermeldungen oft die richtigen Schlüsse ziehen.
Du sagt es, "etwas besser kennelernen" und "oft" sind hier die entscheidenden Wörter. Man braucht viel Erfahrung um die Meldung richtig deuten zu können oder auch den Ort den der IE meint. Dann kann man aber durchaus damit arbeiten. Trotzdem ziehe ich um Skripte zu testen Firefox vor und auch für Anfänger ist das was da rauskommt wesentlich hilfreicher.
Struppi.
Hi,
dir fehlt hier eine geschweifte Klammer:
if (!isokay)
{
alert("Bitte wählen Sie ein Produkt!");
return (isokay);
}
mfG,
steckl
Hi,
dir fehlt hier eine geschweifte Klammer:if (!isokay)
{
alert("Bitte wählen Sie ein Produkt!");
return (isokay);
}mfG,
steckl
Danke... das war's anscheinend schon, denn jetzt funktioniert's :-)
dir fehlt hier eine geschweifte Klammer
Danke... das war's anscheinend schon, denn jetzt funktioniert's :-)
solche syntax-fehler koenntest du dir (wie struppi schon angemerkt hat) auch in der javascript-Konsole deines Browsers anzeigen lassen.
Hallo Frank,
Füge ich allerdings meine Abfrage nach den Texteingabefeldern hinzu dann ist wohl irgend etwas noch nicht ganz richtig.
ja, kann man so sagen. Kleinigkeiten haben oft verblüffende Auswirkungen. ;-)
<script language="JavaScript">
<!--
Nur nebenbei: Das language-Attribut gehört ins Museum, das kannste wegwerfen. Den nachfolgenden HTML-Kommentar übrigens auch. Aber dafür _muss_ hier ein type-Attribut her: type="text/javascript".
Das ist allerdings nur 'ne Formsache und hat mit den offensichtlichen Problemchen nichts zu tun.
function check()
{
...
if (!isokay)alert("Bitte wählen Sie ein Produkt!");
return (isokay);
}
Achte bitte mal ganz genau darauf, welchen Block diese geschweifte Klammer schließt. Da steckt nämlich des Lösels Rätsung.
Sorry, vielleicht habe ich dich hier auf die falsche Fährte gebracht, weil ich im Beispiel das alert() nicht als Block geklammert habe, weil es die einzige Anweisung war, die ich nach dem if ausführen wollte.
Der ganze Rest steht dann außerhalb der Funktion:
if (document.forms["formular"].elements["name"].value=="")
...
else
{
return true;
}
Und dann ist da noch eine herrenlose schließende Klammer als einsamer Single übrig:
}
So long,
Martin